1
0
Fork 0

fix(dev): v4 tutorial setup changes (#278)

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>
This commit is contained in:
Benjamin Fan 2025-05-18 09:32:33 +00:00 committed by Joost De Cock
parent fdd94d9bb1
commit dcf7c0412b
14 changed files with 242 additions and 266 deletions

View file

@ -3,55 +3,70 @@ title: Start the development environment
sidebar_position: 50
---
FreeSewing provides a development environment to help you design and develop patterns.
FreeSewing provides the studio, a development environment to help you design and develop patterns.
There are two ways to run this development environment:
There are two ways to run this studio:
- [**Monorepo development**](#monorepo-development): Use this if you intend to contribute your work to FreeSewing
- [**Stand-alone development**](#stand-alone-development): Use this if you want to do your own thing, and not contribute to FreeSewing
- [**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
## Monorepo development
## Repository Studio
Run `yarn lab` to start the development environment:
Run `npm run studio` to start the repository studio development environment:
```bash
yarn lab
npm run studio
```
Then point your browser to http://localhost:8000
Then point your browser to http://localhost:3000
Your new design will appear in the Local Designs page.
:::tip
### Adding a new design
### Adding another new design
This is all you need to work on existing designs. If you'd like to add a new design, run:
This is all you need to work on existing designs. If you'd like to add another new design, run:
```bash
yarn new design
npm run add
```
Just make sure to re-start the lab afterwards with `yarn lab`
Just make sure to re-start the repository studio afterwards with `npm run studio`
:::
## Stand-alone development
## Stand-alone studio
You will have a new folder that has the name you picked for your design.
If you chose `test`, you will have a folder named `test`.
If you chose `banana`, you'll have a folder named `banana`.
(Within this new folder, the `design` subfolder holds your design's configuration file and source code.
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 `yarn dev` (or `npm run dev` if you're using npm as a package manager).
and run `npm run start`.
Then open your browser and go to http://localhost:8000
```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, it will update automatically in your browser.
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!