Getting Started

System requirements

fr1end1y requires the .NET 9.0 SDK and Node.js 20 or later. You can check whether you have these installed by running the following commands in a terminal:

dotnet --list-sdks
node -v

If either of these commands is not found or reports a version number below the required version, you will need to install or update .NET and/or Node.js before proceeding.

.NET and Node.js are cross-platform (Linux, macOS, and Windows) but I have not tested extensively across all platforms. For development, I have been using a Ubuntu 24.04 virtual machine with 8GB of RAM, 20GB of disk, and 4 CPUs, which has been fine.

Install the template

fr1end1y is distributed as a .NET project template on NuGet and can be installed as follows:

dotnet new install Umbraco.Community.Templates.Fr1end1y

Create a solution

Create a new solution by running:

dotnet new fr1end1y -n Thingy

You should be prompted to install the required Node.js modules:

Template is configured to run the following action:
Actual command: npm install
Do you want to run this action [Y(yes)|N(no)]?

Type Y and press Enter.

This will create a new directory named Thingy containing two projects:

• Thingy.CMS: an ASP.NET/Umbraco project.

• Thingy.Site: a Node.js/Eleventy project.

Install Umbraco

Move into the solution directory with the cd command (short for change directory):

cd Thingy

Then launch the CMS:

npm run dev-cms

By default, the CMS listens on https://localhost:11111. Open this URL in your web browser and follow the instructions to install Umbraco (unless unattended install was configured, in which case should be able to just log in at https://localhost:11111/umbraco).

Log in to Umbraco and check that the demo content has been imported (courtesy of uSync FirstBoot) and is published. Sometimes this fails and a manual publish/index rebuild is needed (see the troubleshooting page for instructions).

Run Eleventy

With the CMS still running, in a new terminal run the following command to launch the front end site:

npm run dev-site

By default, the Eleventy Dev Server listens on http://localhost:8080. Open this URL in your web browser and hopefully you will see this very site!

Run Umbraco and Eleventy concurrently

Provided everything worked up to this point, you should now be able to run the CMS and site projects side by side using the below command (make sure to stop any previously launched servers by pressing Ctrl+C in their terminals):

npm run dev

The uSync directory in the CMS project has been added as an Eleventy watch target so that any time Umbraco content is published (or content types/data types/etc are modified), the static site will be rebuilt automatically for rapid local dev and editing 🚀.

Troubleshooting

If you are getting errors or having trouble setting up the site, take a look at the troubleshooting page for some things to try.

Important stuff

Once you're all set up, there are some important concepts you should be aware of when using this starter kit.