Manual Project setup
While Builder's Auto Setup feature is powerful, certain applications may require more fine tuning or hyper-specific configuration. In this doc, learn how and where to make manual adjustments to your Project.
Navigate to the manual setup process
To manually setup a Project:
- Click the Connect Repo button from the Projects page.
- Select your repository from available connected sources.
- Click Setup Visual Editing. This enables the Builder Visual Editor right away.
- Click Use Manual Setup.
At the end of this process, you are brought to the Setup Your Project wizard, which carries you through the remaining steps.
Define environment variables
Within the environment variables step, you are prompted to add individual environment variables, an entire .env file, or a combination of the two.
By default, Builder seeks through your configuration files for environment variables. It is a good idea to check the values of these environment variables by clicking the checkboxes next to each value.
In the following video, a .env file is provided to load an environment variable into the Project. Then, another environment variable is manually added.
Set installation commands
Within the installation commands step, you are prompted to provide runtime dependencies and an installation script.
To set installation commands:
- Choose one or more runtime dependencies.
- Write the installation script you wish Builder to use for your Project.
- Click the Verify button to ensure your runtime and commands lead to a successful installation.
- Optionally expand the Advanced Options dropdown and fill in additional details.
- Click the Next Step button once you are all done.
Runtime dependencies
Choose one or more runtime dependencies for your Project. You can lock your runtime dependencies to a specific version, or have Builder pull the latest one on build.
Dependency install script
Include the steps Builder must take to install and set up your Project. For example, a basic Node.js Project might have the following setup script:
Advanced options
Within the Advanced options panel, you have two additional options to customize your installation:
- .npmrc Contents: provide the contents of an instruction file that contains authentication and location information for private npm packages.
- Other File Overrides: provide files that should be written to the file system during setup, such as configuration files or certificates.
Set dev server commands
Within the dev server commands step, you are prompted to provide a script that runs your application's development server.
Once you've done so, click the Verify button to ensure Builder is able to run your development server. A small preview appears on the left, for you to visually confirm the application is running correctly.
Dev server URL
Builder attempts to auto-detect your running development server. Uncheck the box to manually set the server URL.
Advanced settings
Underneath the Advanced settings dropdown is the Dev server patterns field. Enter a JavaScript regular expression pattern for Builder to follow when attempting to auto-detect your development server.
This option is useful in a situation where your development server port or path changes frequently due to configuration settings.
Optional tools
At this point, Builder should have enough information to run your development server. Within this step are additional options that can improve Builder's output.
Setup verification scripts
If your application uses additional tooling to verify code correctness before committing, enter those scripts here. Providing these to Builder helps catch issues early and prevent CI failures.
Design System Intelligence
If you have already created one or more design systems for your application, select them here. For more details on design systems within Builder, visit Design System Intelligence.
