dcf7c0412b
Changes to tutorial documentation: 1. Changed instances of `yarn` to `npm`. Remove references to installing `yarn`. 2. Changed instances of `@freesewing/new-design` to `@freesewing/studio`. 3. Changed instances of "lab" to "development environment" and `npm run lab` to `npm run org`. 4. Changed instances of Node v18.17.0 to v20.19.1. ~(I think I might have missed it in one spot. I'll submit a future PR for it.)~ I did not touch the Getting "Started with Vercel" and "Getting Started with Codespaces" tutorials. I need to take a closer look at these to see if they are still relevant or if we might want to remove them. Co-authored-by: Benjamin Fan <ben-git@swinglonga.com> Reviewed-on: https://codeberg.org/freesewing/freesewing/pulls/278 Reviewed-by: Joost De Cock <joostdecock@noreply.codeberg.org> Co-authored-by: Benjamin Fan <benjamesben@noreply.codeberg.org> Co-committed-by: Benjamin Fan <benjamesben@noreply.codeberg.org>
79 lines
2 KiB
Text
79 lines
2 KiB
Text
---
|
|
title: Start the development environment
|
|
sidebar_position: 50
|
|
---
|
|
|
|
FreeSewing provides the studio, a development environment to help you design and develop patterns.
|
|
|
|
There are two ways to run this studio:
|
|
|
|
- [**Repository studio**](#repository-studio): Use this if you intend to contribute your work to FreeSewing
|
|
- [**Stand-alone studio**](#stand-alone-studio): Use this if you want to do your own thing, and not contribute to FreeSewing
|
|
|
|
## Repository Studio
|
|
|
|
Run `npm run studio` to start the repository studio development environment:
|
|
|
|
```bash
|
|
npm run studio
|
|
```
|
|
|
|
Then point your browser to http://localhost:3000
|
|
|
|
Your new design will appear in the Local Designs page.
|
|
|
|
:::tip
|
|
|
|
### Adding another new design
|
|
|
|
This is all you need to work on existing designs. If you'd like to add another new design, run:
|
|
|
|
```bash
|
|
npm run add
|
|
```
|
|
|
|
Just make sure to re-start the repository studio afterwards with `npm run studio`
|
|
|
|
:::
|
|
|
|
## Stand-alone studio
|
|
|
|
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.)
|
|
|
|
To start the development environment, enter the folder that was created
|
|
and run `npm run start`.
|
|
|
|
```bash
|
|
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.
|
|
:::
|
|
|
|
### Adding another new design
|
|
|
|
This is all you need to work on existing designs. If you'd like to add another new design, run:
|
|
|
|
```bash
|
|
npm run add
|
|
```
|
|
|
|
Just make sure to re-start the stand-alone studio afterwards with `npm run start`.
|
|
|
|
:::note
|
|
|
|
##### Yay, you're done!
|
|
|
|
All you have to do now is design your pattern.
|
|
Thankfully, we have a tutorial for that too:
|
|
|
|
- [Pattern design tutorial](/tutorials/pattern-design/): A step-by-step guide to designing your first pattern
|
|
|
|
:::
|