# Install using Visual Studio Code

The benefit of using Visual Studio Code is that it is super quick to get up and running. Follow these steps to set up an Umbraco project with Visual Studio Code.

## Installing and setting up Visual Studio Code

1. Go to <https://code.visualstudio.com/> and download Visual Studio Code for free.
2. Launch Visual Studio Code once the installation is complete.
3. Click the extensions menu on the left side.
4. Search for **C#** and install it.

   ![Visual Studio Code install extension](https://2050077833-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fb0WSXUuM7Qx5BfREagAI%2Fuploads%2Fgit-blob-29bb1f5f1df922202717dc2131e82e96720f59a1%2FMarketplace.jpg?alt=media)

## Creating your Umbraco project

Follow the [Install using .NET CLI](https://docs.umbraco.com/umbraco-cms/fundamentals/setup/install/install-umbraco-with-templates) article to create your project folder.

## Configure Visual Studio Code to run the Umbraco project

1. Open your project folder in Visual Studio Code.

![Fresh Umbraco installation](https://2050077833-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fb0WSXUuM7Qx5BfREagAI%2Fuploads%2Fgit-blob-f5500b1d5098eefd7742f6f489179af5f9b5354b%2FVS_Code_Explorer.png?alt=media)

2. Open the command palette using the shortcut `Ctrl+Shift+P`.
3. Type **Tasks: Configure**.
4. Select **Tasks: Configure Task**.

![Configure task option](https://2050077833-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fb0WSXUuM7Qx5BfREagAI%2Fuploads%2Fgit-blob-880a0e3e594bb921d81f762c70866a2b28745c54%2FConfigureTask.png?alt=media)

5. Select **Create task.json from template**.

![Create task from template](https://2050077833-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fb0WSXUuM7Qx5BfREagAI%2Fuploads%2Fgit-blob-8c11cb849b12e055c6cb21a8da2a0160c13d8553%2FTaskJsonFromTemplate.png?alt=media)

6. select **.NET Core** as your template.

![Create .NET Core Template](https://2050077833-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fb0WSXUuM7Qx5BfREagAI%2Fuploads%2Fgit-blob-f8f28bc4d028cdf58a00c12526b185c02aabf275%2FNetcoreTemplate.png?alt=media)

Visual Studio Code creates a folder called **.vscode** that contains a file called **tasks.json**. The **tasks.json** file tells Visual Studio Code how to build your project.

7. Select the **Run and Debug** button from the left side menu.
8. Select the **Create a launch.json file** link.

![Creating launch.json file](https://2050077833-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fb0WSXUuM7Qx5BfREagAI%2Fuploads%2Fgit-blob-0ce06b712d2be3fa123d1af3a0aea23e1780a052%2FCreate_LaunchJson_file.jpg?alt=media)

9. Select **.NET 5+ and .NET Core**.

![Prompt Menu](https://2050077833-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fb0WSXUuM7Qx5BfREagAI%2Fuploads%2Fgit-blob-e700d4609b94a550b16bb28785fada36c15eaa78%2FPrompt_Menu.jpg?alt=media)

{% hint style="info" %}
If **.NET 5+ and .NET Core** is missing in the drop-down menu:

1. Press **Ctrl + Shift + P** (on Windows/Linux) or **Cmd + Shift + P** (on macOS) to open the Command Palette.
2. Search for the command `.NET: Generate Assets for Build and Debug`. This command will generate the necessary assets for building and debugging your .NET application.
   {% endhint %}

You'll see a green play button appear with a dropdown where **.NET Core Launch (web)** is selected.

![Green play button options](https://2050077833-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fb0WSXUuM7Qx5BfREagAI%2Fuploads%2Fgit-blob-8c6c135c273291df447d462f7175982b3677ae68%2FDropdown_option.jpg?alt=media)

If you navigate to the **Explorer** section, a new **launch.json** file is created in the **.vscode** folder. When you press F5, the **launch.json** file tells Visual Studio Code to build your project, run it, and then open a browser.

![launch.json file](https://2050077833-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fb0WSXUuM7Qx5BfREagAI%2Fuploads%2Fgit-blob-0178fb8f0f0912f94cce419e51a790ff6d7b669a%2FlaunchJson.jpg?alt=media)

With that, you're ready to run the project.

3. Press **F5** or click the green play button in the **Run and Debug** section to run your brand new Umbraco site locally.

## Umbraco Web Installer

This section covers the installation and configuration of Umbraco inside your web browser when you run Umbraco for the first time.

You will see the install screen where you will need to fill in some data before Umbraco can be installed.

![Web Installer - Lets Get Started](https://2050077833-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fb0WSXUuM7Qx5BfREagAI%2Fuploads%2Fgit-blob-b077660c7207e8080d9782f005581f6f02978bcc%2FInstall_Umbraco.jpg?alt=media)

When the installation is completed, you will be prompted to enter the login credentials. Enter the credentials you used to install Umbraco.

After entering the credentials, you are logged into the backoffice.

![Umbraco Backoffice](https://2050077833-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fb0WSXUuM7Qx5BfREagAI%2Fuploads%2Fgit-blob-3694b3ca07f0cd43b85c3ab90c26a450597616cd%2Fv17-Backoffice.png?alt=media)

Congratulations, you have now installed an Umbraco site.

{% hint style="info" %}
You can log into your Umbraco site by entering the following into your browser: `https://localhost:xxxxx/umbraco/`.
{% endhint %}