An Umbraco v14 Early Adopter's Development setup
Tags: umbraco
Published: 2024-02-09 10:37:45

I've written [21 Blog posts about the new umbraco backoffice](https://dev.to/kevinjump/series) now!, I've written [a dotnet template to help you get started](https://dev.to/kevinjump/early-adopters-umbraco-package-template-fbh) and I not-so-secretly also have the uSync package pritty much working in the back office too 🎉. 

---

![uSync 14 in Umbraco V14](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y4n30fikq82tqdcc6xrx.gif)
<figcaption>uSync running in v14</figcaption>

---

So I though it probibly also a good time to document my dev setup for how i am working with the new backoffice.

This is obviously subject to change, I keep tweaking things, but at the moment this works quite well for me. 

> _**This is my Development setup, if you think i've missed anything please let me know!**_

## 1. The Early Adopter's Umbraco Template,
Quick plug, for the Early Adoper's template, its a quick install : 

```bash
dotnet new install Umbraco.Community.Early.Templates
```
and then you can fire up a new project really quickly.
```bash
dotnet new early.umbracopackage -n MySuperPackage
```

This will set you up with a solution, with the projects in it to build your next great package. 

## 2. Tasks. 
Building both a front end and backend project means that there are a couple of diffrent things you have to do to keep everything upto date. 

### Dotnet builds
For DotNet. I often will build the site and then run it via visual studio, either via Debuging or the "view in browser" command (which runs the site but not in debug). 

> I do very occasionally use Hot Reload, but more often then not i forget about it, and just rebuild/restart the site to see changes.

### Typescript / Vite
The early adopter templates, have a few scripts setup in the package.json file to make it quick to get going the one i am using the most is the watch command: 

```bash
npm run watch
```

That will watch the folder for changes and run anything through vite should it change. 

So i don't forget to run the command I am using the [NPM TaskRunner extension for Visual Studio](https://marketplace.visualstudio.com/items?itemName=MadsKristensen.NpmTaskRunner64) to spin up the watch command when i open the project. 

![Task runner running](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ui30yl9izasb0bbxhic.png)
<figcaption>Task runner in visual studio, running the watch task</figcaption>

A limitation of the Extension (well actually i think its of the task runner extension points in visual studio). Is it can only find tasks in the root of the project, and for me the front end code is actually buried several layers deep. 

The soluition to that is to have a 'dummy' package.json in the root of the project with script commands that point to the actual commands you want in the sub folders _(this is in the dotnet template)_

```json
{
  "name": "MyPackage.1",
  "private": "true",
  "version": "0.0.0",
  "type": "commonjs",
  "description": "proxy package.json",
  "scripts": {
    "build": "cd ./MyPackage.1.Client/Assets/ && npm run build",
    "watch": "cd ./MyPackage.1.Client/Assets/ && npm run watch"
   }
}
```

3. Reloading / Refreshing during development.
With my project website up and watch script running, I have quite a nice streamlined development. 

If you make changes in your typescript, then the watch command will mean that vite processes it and places the bundled javascript into the package project's wwwroot folder.

Because the package is a Razor Class Library (RCL) and our website project has a dependency on the package library, any changes in the wwwroot folder are reflected immidiatly in the website project. 

In visual studio I have Hot Reload enabled (Options -> Debugging -> general). 

![Visual Studio, Options, Debug, Hot Reload](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/umfpcpti94sx1e12gbsw.png)
<figcaption>Hot reload options in Visual Studio</figcaption>

This means Visual studio injects a bit of javascript into the site you are developing that it can then use to trigger a refresh of the page should anything change. 


![Automatic reload from project, to site via RCL](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ezm1d6t9cugua37b0vuu.gif)
<figcaption>Automatic refresh from the front end, via the RCL and .net website</figcaption>


I find you also need the developer console of the browser open with the "Disable cache (While DevTools is open)" box ticked.

![Dev Tools](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bunmfm22jyfocpg705ua.png)
<figcaption>Dev tools settings in Edge/Chrome</figcaption>

## 4. Development Environments
At the moment i am spending my time split between visual studio and visual studio code (maybe a sign i need to try Rider again?). 

I find visual studio is still the best place for me to do .net development, and while it does do a good job with typescript and vite, i find Visual Studio code is slightly better at managing that side. 

My preference for VSCode Mainy comes down to auto complete working inside the html elements of a lit file. 

![Autocompleting html](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n0l7sjwd4ceecw72quyf.png)
<figcaption>Autocompleting html in VSCode</figcaption>

If i can work that out, I might switch back to just one environment.

For now i also have the [Open in visual studio extension in Visual Studio](https://marketplace.visualstudio.com/items?itemName=MadsKristensen.OpeninVisualStudioCode) so i can right click on a folder and quickly open it in VSCode. 

## Next - Deployment
I haven't quite gotten to package deployment yet, but its on my list, i know the Umbraco Package team [have some nice github scripts for package deployment in their Package template](https://github.com/umbraco/Package.Templates/blob/master/ProjectTemplates/UmbracoPackage.1/.github/workflows/build.yml) so that might well be my starting point when i get there.