Set up a development environment for Mainsail

Set up the environment

At this point you should have already forked Mainsail into your repositories. If that is not the case, go ahead and fork Mainsail now.
Copy the .env.development.local.example file and omit the .example at the end. The file is located in the root directory of the Mainsail project.
Now edit the .env.development.local file to reflect your printers network configuration.
Example: If the IP of your printer is, modify it like this:
# hostname or ip from the moonraker instance
You need to set VUE_APP_HOSTNAME=localhost in case you want to use a Virtual-Klipper-Printer.

Configure Moonraker

For Moonraker, you need to add localhost:8080 to the cors_domains section inside the moonraker.conf:
Port 8080 is the default port npm will serve the development server on.

Install NodeJS

You can download NodeJS from here. Pick your preferred installation package.
Make sure you run node >= 16
Open your preferred terminal application and navigate into the Mainsail root directory. Run the following command to install all required modules and dependencies:
npm install
Afterwards run the following command to start a local development server:
npm run serve
Once the server is up and running, you can access Mainsail on http://localhost:8080.

Virtual-Klipper-Printer with Docker

It is possible to develop Mainsail with a virtual printer running inside a Docker container. We created a special project for that, which you can find here.
To use our Virtual-Klipper-Printer project, it is required to have Docker installed. Below are some general resources on how to get Docker.
After Docker is installed, follow the instructions here to get everything up and running.