Skip to main content

Setting up the FreeSewing development environment

FreeSewing provides the studio, a development environment that visualizes your design for you. This tutorial is for the stand-alone studio, not the repository studio (which you may have set up if you followed a getting started tutorial).

To set it up, I will open a terminal and enter the following command:

npx @freesewing/studio

After you enter the folder name to create, it will take a while to set everything up. When it's done, you will have a new folder with the development environment inside.

note

This will take a few minutes because the development environment has a number of dependencies that need to be downloaded.

You will have a new folder that contains the stand-alone studio development environment. (Within this new folder, the design subfolder holds your design's configuration files and source code. You can ignore all other subfolders and files; they are part of the development environment.)

Creating a new design​

If you would like to create a new design, enter the folder that was just created and run the following command:

npm run add

After you've answered some questions, it create a new sub-folder for your design in the designs folder.

note

Questions​

What design name to use​

Please stick to a single word name using [a-z] to avoid problems.

What template to use​

Use From scratch unless you want to start from our of our blocks:

  • Use Extend Brian to start from Brian
  • Use Extend Bent to start from Bent
  • Use Extend Bella to start from Bella
  • Use Extend Breanna to start from Breanna
  • Use Extend Titan to start from Titan

Starting the development environment​

To start the development environment, enter the folder containing the stand-alone studio and run npm run start.

npm run start

Then open your browser and go to http://localhost:3000

tip

The development environment will watch for any changes you make to the pattern's source code or configuration. When you do, the pattern will update automatically in your browser.

This pattern design tutorial contains only an abbreviated overview of the setup process. For more detailed instructions, please refer to one of our setup tutorials:

:::

tip
Need help?​

If you run into any issues, head over to FreeSewing.eu/support which lists the various ways in which you can get help.