Environment
Learn how to set up a local development environment for Mainsail on your PC. This guide walks you through the process so you can start developing and customizing quickly.
Last updated
Was this helpful?
Learn how to set up a local development environment for Mainsail on your PC. This guide walks you through the process so you can start developing and customizing quickly.
Last updated
Was this helpful?
Whether new to Mainsail development or looking to optimize your existing setup, this guide provides clear instructions for installing the necessary tools and configuring your environment. We will show you how to install the required dependencies, set up your development environment, and take the first steps towards customizing your Mainsail project efficiently.
Before you start setting up your development environment, make sure you have the following prerequisites.
Git is a version control system that you'll need to clone the Mainsail repository to manage your changes. Download Git from the official and install it according to the instructions for your operating system.
Node.js is a JavaScript runtime environment required for developing and building Mainsail. Download and install the latest LTS version of Node.js from the . Ensure npm (the Node Package Manager) is installed along with Node.js.
Fork the Mainsail repository on GitHub to create a copy of the project in your own GitHub account. Visit the and click on "Fork." Afterward, you can clone your forked repository to your local machine using Git. Use the following command in your terminal:
After successfully cloning the Mainsail repository, the next step is to set up and start the development server. Follow these steps:
Use npm ci in your project directory to install all the necessary dependencies for the project. This command ensures that the exact versions of packages specified in the package-lock.json file are installed:
Mainsail uses a .env file to define environment variables. Copy the .env.development.local.example file in the project's root directory, rename it .env.development.local, and adjust the configurations to suit your needs. Here is an example of what the .env.development.local file might look like:
cors_domains to MoonrakerTo ensure the development server can access the Moonraker API, add the cors_domains entry `*//localhost:8080` in the Moonraker configuration file (moonraker.conf). Open the configuration file and add the line at the end of cors_domains. Your moonraker.conf should look like this:
To start the Mainsail development server and test the application locally, run the following command:
Before proceeding, ensure that Docker is installed on your system. Docker allows you to run applications in isolated containers, making it an ideal tool for testing and development.
Docker Installation Resources:
Once Docker is installed, follow the instructions in the virtual Klipper printer project repository to set up and run your virtual printer environment.
You need to set VUE_APP_HOSTNAME=localhost in case you want to use a .
This command will start the development server, and you should be able to open Mainsail in your default browser at . The server will respond to code changes and automatically refresh the components/page.
For those who wish to develop Mainsail using a virtual printer, it's possible to set up a virtual Klipper printer within a Docker container. We've created a dedicated project to simplify this process, which you can find .
Linux:
Mac:
Windows: