Install using Visual Studio Code
Follow these steps to set up an Umbraco project with VS Code. The benefit of using VS Code is that it is super quick to get up and running.
Installing and setting up VS Code
Go to https://code.visualstudio.com/ and download VS Code for free.
Once installed, launch VS Code.
Click the extensions menu at the bottom on the left side. Then search for C#, install it then press reload.
VS Code install extension
Creating your Umbraco project
Follow the Templates Guide to create your project folder.
Configure VS Code to run the Umbraco project
Open your project folder in VS Code, your project will look something like this:
![](https://docs.umbraco.com/~gitbook/image?url=https%3A%2F%2F65787334-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F8h0xdoteqcFVV1pGZgk0%252Fuploads%252Fgit-blob-8a2fb9da11560ffcfa8255a365a952c1af8b9f99%252FVS_Code_Explorer.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=ab805224&sv=1)
Now we need to tell VS Code how to run your project.
Open the command palette, you can use the shortcut Ctrl+Shift+P
, and type in Tasks: Configure
and select the Tasks: Configure Task
option:
![](https://docs.umbraco.com/~gitbook/image?url=https%3A%2F%2F65787334-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F8h0xdoteqcFVV1pGZgk0%252Fuploads%252Fgit-blob-880a0e3e594bb921d81f762c70866a2b28745c54%252FConfigureTask.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=9e2c9ea9&sv=1)
Select "Create task.json from template"
![](https://docs.umbraco.com/~gitbook/image?url=https%3A%2F%2F65787334-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F8h0xdoteqcFVV1pGZgk0%252Fuploads%252Fgit-blob-8c11cb849b12e055c6cb21a8da2a0160c13d8553%252FTaskJsonFromTemplate.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=d20105be&sv=1)
Now select ".NET Core" as your template.
![](https://docs.umbraco.com/~gitbook/image?url=https%3A%2F%2F65787334-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F8h0xdoteqcFVV1pGZgk0%252Fuploads%252Fgit-blob-f8f28bc4d028cdf58a00c12526b185c02aabf275%252FNetcoreTemplate.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=2540038d&sv=1)
After this VS Code will have created a folder called .vscode
that contains a file called tasks.json
, it's this file that tells VS Code how to build your project.
Now that we've told VS Code how to build your project, we need to tell it how to launch it. VS Code can do this for you. First, select the little play button in the left side menu, and then select the "create a launch.json file" link.
![](https://docs.umbraco.com/~gitbook/image?url=https%3A%2F%2F65787334-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F8h0xdoteqcFVV1pGZgk0%252Fuploads%252Fgit-blob-0ce06b712d2be3fa123d1af3a0aea23e1780a052%252FCreate_LaunchJson_file.jpg%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=4b196612&sv=1)
This will prompt a menu to appear, select .NET 5+ and .NET Core:
![](https://docs.umbraco.com/~gitbook/image?url=https%3A%2F%2F65787334-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F8h0xdoteqcFVV1pGZgk0%252Fuploads%252Fgit-blob-e700d4609b94a550b16bb28785fada36c15eaa78%252FPrompt_Menu.jpg%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=cf17ac69&sv=1)
If .NET 5+ and .NET Core is missing in the drop-down menu:
Press Ctrl + Shift + P (on Windows/Linux) or Cmd + Shift + P (on macOS) to open the Command Palette.
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.
Now you'll see a green play button appear with a dropdown where ".NET Core Launch" is selected.
![](https://docs.umbraco.com/~gitbook/image?url=https%3A%2F%2F65787334-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F8h0xdoteqcFVV1pGZgk0%252Fuploads%252Fgit-blob-8c6c135c273291df447d462f7175982b3677ae68%252FDropdown_option.jpg%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=9ff234a1&sv=1)
If you navigate to the Files section, a new launch.json
file is created in the .vscode
folder. When you press F5, the launch.json
file tells VS Code to build your project, run it, and then open a browser .
![](https://docs.umbraco.com/~gitbook/image?url=https%3A%2F%2F65787334-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F8h0xdoteqcFVV1pGZgk0%252Fuploads%252Fgit-blob-a9a8171036e4ed0629c24e613899e94672ab2445%252FlaunchJson.jpg%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=b366e0fd&sv=1)
With that, you're ready to run the project! Press F5, or click the little green play button in the Run and Debug section to run your brand new Umbraco site locally.
Umbraco Web Installer
This section continues from where we left off but 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.
![](https://docs.umbraco.com/~gitbook/image?url=https%3A%2F%2F65787334-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F8h0xdoteqcFVV1pGZgk0%252Fuploads%252Fgit-blob-88c43ab285e3a12f296e8c20dda7f2a8058bd9a6%252FInstall_Umbraco.jpg%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=381889d7&sv=1)
When the installer is done you will automatically be logged into the backoffice.
Congratulations, you have installed an Umbraco site!
You can log into your Umbraco site by entering the following into your browser: http://yoursite.com/umbraco/.
Last updated