# 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](/files/Zt3xxeTG9cS9SBrRDEpJ)

## Creating your Umbraco project

Follow the [Install using .NET CLI](/umbraco-cms/fundamentals/setup/install/install-umbraco-with-templates.md) 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](/files/0TKhKS7QEZNiRVRMnksq)

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

![Configure task option](/files/0V0XM340sUlsDHkPBayC)

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

![Create task from template](/files/z6WOKOG9o0vB1O5n9XYb)

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

![Create .NET Core Template](/files/3ZheHc2PGUwHnychW1GH)

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](/files/IHTiTDHLygfbhMIiggtX)

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

![Prompt Menu](/files/yvk85nJr2Tm01NGMZ0rr)

{% 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](/files/IcZo2U3PrUo5h6Cx8e1N)

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](/files/zpZMHO9HtgjdKFASrSES)

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](/files/9fcVKY2x9DUukQUFoP6q)

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](/files/o3ty4J0bEhnKi2bvJQZD)

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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.umbraco.com/umbraco-cms/fundamentals/setup/install/install-umbraco-with-vs-code.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
