VSinerva/freesewing
1
0
Fork 0
Code Activity

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

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

117
sites/dev/docs/tutorials/getting-started-linux/dev-setup/readme.mdx
View file

@ -3,17 +3,16 @@ title: Setting up the FreeSewing development environment
sidebar_position: 40 sidebar_position: 40
--- ---
FreeSewing provides a development environment to help you design and develop FreeSewing provides the studio, a development environment to help you design and develop patterns.
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 - [**Repository studio**](#monorepo-studio): Use this if you intend to
contribute your work to FreeSewing contribute your work to FreeSewing
- [**Stand-alone development**](#stand-alone-development): Use this if you want - [**Stand-alone studio**](#stand-alone-studio): Use this if you want
to do your own thing, and not contribute to FreeSewing to do your own thing, and not contribute to FreeSewing
## Monorepo development ## Repository studio
:::note :::note
This is the recommended way for (aspiring) FreeSewing contributors This is the recommended way for (aspiring) FreeSewing contributors
@ -24,7 +23,7 @@ This is the recommended way for (aspiring) FreeSewing contributors
```bash ```bash
git clone https://codeberg.org/freesewing/freesewing.git git clone https://codeberg.org/freesewing/freesewing.git
cd freesewing cd freesewing
yarn kickstart npm run kickstart
``` ```
:::tip :::tip
@ -34,22 +33,16 @@ fork](https://codeberg.org/freesewing/freesewing/fork)
```bash ```bash
git clone https://codeberg.org/your-username/freesewing.git git clone https://codeberg.org/your-username/freesewing.git
cd freesewing cd freesewing
yarn kickstart npm run kickstart
``` ```
::: :::
This sets up the monorepo. If you would like to create a new design, run the This sets up the monorepo. If you would like to create a new design or plugin, run the
following command: following command:
```sh ```sh
yarn new design npm run add
```
If you'd like to create a new plugin, run this variant instead:
```sh
yarn new plugin
``` ```
### Step by step ### Step by step
@ -59,16 +52,6 @@ These docs assume you have git installed.
But if you're running Linux, you have git, right? But if you're running Linux, you have git, right?
::: :::
#### Install yarn
Our repository uses yarn workspaces. So you'll need `yarn` to work with it.
To install it run:
```bash
npm install yarn --global
```
#### Fork our repository #### Fork our repository
You'll want to fork our repository. This way you have your own copy where you can make You'll want to fork our repository. This way you have your own copy where you can make
@ -87,91 +70,71 @@ obviously with your real username rather than `your-username`.
#### Install dependencies #### Install dependencies
Enter the directory that was created, and run the `yarn kickstart` command: Enter the directory that was created, and run the `npm run kickstart` command:
```bash ```bash
cd freesewing cd freesewing
yarn kickstart npm run kickstart
``` ```
Now you're ready to [start the development environment](/tutorials/getting-started-linux/dev-start). Now you're ready to [start the development environment](/tutorials/getting-started-linux/dev-start).
:::note ### Creating a new design or plugin
There is another `yarn` command that comes with some Linux distributions, If you would like to create a new design or plugin, run the following command:
installed as part of the `cmdtest` package and used for command line
scenario testing.
If you get an `ERROR: There are no scenarios; must have at least one.`
message when trying to run the `yarn` command, it may be because the wrong
`yarn` is being used.
Possible workarounds for this include uninstalling the `cmdtest` package
or making sure that npm `yarn` is installed and comes first in your `PATH`
environment variable.
:::
## Creating a new design
If you would like to create a new design, run the following command:
```sh ```sh
yarn new design npm run add
``` ```
## Creating a new plugin After you've answered [some questions](#questions), it create a new
sub-folder for your design in the `designs` folder.
If you'd like to create a new plugin, run the following command: Now you're ready to [start the development
environment](/tutorials/getting-started-linux/dev-start).
```sh
yarn new plugin
```
## Stand-alone development ## Stand-alone development
With Node.js installed, all you need to do to setup the stand-alone development environment is run this command: With Node.js installed, all you need to do to setup the stand-alone development environment is run this command:
```bash ```bash
npx @freesewing/new-design npx @freesewing/studio
``` ```
After you've answered [some questions](#questions), it will take a while to set 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 everything up. When it's done, you will have a new folder with the development
environment inside. environment inside.
### 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:
```sh
npm run add
```
After you've answered [some questions](#questions), it create a new
sub-folder for your design in the `designs` folder.
Now you're ready to [start the development Now you're ready to [start the development
environment](/tutorials/getting-started-linux/dev-start). environment](/tutorials/getting-started-linux/dev-start).
:::tip
The folder will have the name you chose above.
:::
:::note :::note
### Questions ### Questions
#### What design name to use
Please stick to a single word name using \[a-z] to avoid problems.
#### What template to use #### What template to use
Use `From scratch` unless you want to start from our of our blocks: Use `From scratch` unless you want to start from our of our blocks:
- Use `Extend Brian` to start from [Brian](https://freesewing.org/designs/brian) - Use `Extend Brian` to start from [Brian](https://freesewing.eu/designs/brian)
- Use `Extend Bent` to start from [Bent](https://freesewing.org/designs/bent) - Use `Extend Bent` to start from [Bent](https://freesewing.eu/designs/bent)
- Use `Extend Bella` to start from [Bella](https://freesewing.org/designs/bella) - Use `Extend Bella` to start from [Bella](https://freesewing.eu/designs/bella)
- Use `Extend Breanna` to start from [Breanna](https://freesewing.org/designs/breanna) - Use `Extend Breanna` to start from [Breanna](https://freesewing.eu/designs/breanna)
- Use `Extend Titan` to start from [Titan](https://freesewing.org/designs/titan) - Use `Extend Titan` to start from [Titan](https://freesewing.eu/designs/titan)
#### What name to use
This will become the name of your design. Stick to \[a-z] here to avoid problems.
If you're not certain what to pick, just mash some keys, it doesn't matter.
#### What package manager to use
You may wish to choose `yarn` since that is the package manager
that we use when doing work in the monorepo,
and many of our tutorials are written to use `yarn`.
However, it doesn't really matter.
You can choose either `yarn` or `npm` as you wish.
::: :::

55
sites/dev/docs/tutorials/getting-started-linux/dev-start/readme.mdx
View file

@ -3,55 +3,70 @@ title: Start the development environment
sidebar_position: 50 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 - [**Repository studio**](#repository-studio): 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 - [**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 ```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 :::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 ```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. You will have a new folder that contains the stand-alone studio development environment.
If you chose `test`, you will have a folder named `test`. (Within this new folder, the `design` subfolder holds your design's configuration files and source code.
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 can ignore all other subfolders and files; they are part of the development environment.) 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 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 :::tip
The development environment will watch for any changes you make to The development environment will watch for any changes you make to
the pattern's source code or configuration. 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 :::note
##### Yay, you're done! ##### Yay, you're done!

4
sites/dev/docs/tutorials/getting-started-linux/installing-node/readme.mdx
View file

@ -6,10 +6,10 @@ sidebar_position: 20
Now we will use `nvm` to install Node.js. Run the following command: Now we will use `nvm` to install Node.js. Run the following command:
```bash ```bash
nvm install lts/hydrogen nvm install lts/iron
``` ```
This will install the so-called LTS version of Node.js 18 on your system. This will install the so-called LTS version of Node.js 20 on your system.
LTS versions -- short for Long Term Support -- are good Node.js versions LTS versions -- short for Long Term Support -- are good Node.js versions
to use because they are stable and supported for a long time. to use because they are stable and supported for a long time.

2
sites/dev/docs/tutorials/getting-started-linux/node-versions/readme.mdx
View file

@ -47,7 +47,7 @@ With multiple Node.js versions installed, `nvm` allows you to switch between dif
versions. Just tell it which version you want to use: versions. Just tell it which version you want to use:
```bash ```bash
nvm use lts/hydrogen nvm use lts/iron
``` ```
If you picked a version that is not installed, `nvm` will simply tell you If you picked a version that is not installed, `nvm` will simply tell you

116
sites/dev/docs/tutorials/getting-started-mac/dev-setup/readme.mdx
View file

@ -3,17 +3,16 @@ title: Setting up the FreeSewing development environment
sidebar_position: 40 sidebar_position: 40
--- ---
FreeSewing provides a development environment to help you design and develop FreeSewing provides the studio, a development environment to help you design and develop patterns.
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 - [**Repository studio**](#monorepo-studio): Use this if you intend to
contribute your work to FreeSewing contribute your work to FreeSewing
- [**Stand-alone development**](#stand-alone-development): Use this if you want - [**Stand-alone studio**](#stand-alone-studio): Use this if you want
to do your own thing, and not contribute to FreeSewing to do your own thing, and not contribute to FreeSewing
## Monorepo development ## Repository studio
:::note :::note
This is the recommended way for (aspiring) FreeSewing contributors This is the recommended way for (aspiring) FreeSewing contributors
@ -22,57 +21,41 @@ This is the recommended way for (aspiring) FreeSewing contributors
### TL;DR ### TL;DR
```bash ```bash
git clone https://github.com/freesewing/freesewing git clone https://codeberg.org/freesewing/freesewing.git
cd freesewing cd freesewing
yarn kickstart npm run kickstart
``` ```
:::tip :::tip
Even better: [clone your own Even better: [clone your own
fork](https://github.com/freesewing/freesewing/fork) fork](https://codeberg.org/freesewing/freesewing/fork)
```bash ```bash
git clone https://github.com/your-username/freesewing git clone https://codeberg.org/your-username/freesewing.git
cd freesewing cd freesewing
yarn kickstart npm run kickstart
``` ```
::: :::
This sets up the monorepo. If you would like to create a new design, run the This sets up the monorepo. If you would like to create a new design or plugin, run the
following command: following command:
```sh ```sh
yarn new design npm run add
```
If you'd like to create a new plugin, run this variant instead:
```sh
yarn new plugin
``` ```
### Step by step ### Step by step
:::note :::note
These docs assume you have git installed. These docs assume you have git installed.
But if you're running macOS, you have git, right? But if you're running on a Mac system, you have git, right?
::: :::
#### Install yarn
Our repository uses yarn workspaces. So you'll need `yarn` to work with it.
To install it run:
```bash
npm install yarn --global
```
#### Fork our repository #### Fork our repository
You'll want to fork our repository. This way you have your own copy where you can make You'll want to fork our repository. This way you have your own copy where you can make
all the changes you want. To do so, visit https://github.com/freesewing/freesewing/fork all the changes you want. To do so, visit https://codeberg.org/freesewing/freesewing/fork
#### Clone the forked repository #### Clone the forked repository
@ -82,81 +65,76 @@ Now that you have your very own fork, it's time to clone it locally.
git clone <url to your fork> git clone <url to your fork>
``` ```
Make sure to use the URL to your own fork, typically `https://github.com/your-username/freesewing` but Make sure to use the URL to your own fork, typically `https://codeberg.org/your-username/freesewing.git` but
obviously with your real username rather than `your-username`. obviously with your real username rather than `your-username`.
#### Install dependencies #### Install dependencies
Enter the directory that was created, and run the `yarn kickstart` command: Enter the directory that was created, and run the `npm run kickstart` command:
```bash ```bash
cd freesewing cd freesewing
yarn kickstart npm run kickstart
``` ```
Now you're ready to [start the development environment](/tutorials/getting-started-linux/dev-start). Now you're ready to [start the development environment](/tutorials/getting-started-linux/dev-start).
## Creating a new design ### Creating a new design or plugin
If you would like to create a new design, run the following command: If you would like to create a new design or plugin, run the following command:
```sh ```sh
yarn new design npm run add
``` ```
## Creating a new plugin After you've answered [some questions](#questions), it create a new
sub-folder for your design in the `designs` folder.
If you'd like to create a new plugin, run the following command: Now you're ready to [start the development
environment](/tutorials/getting-started-mac/dev-start).
```sh
yarn new plugin
```
## Stand-alone development ## Stand-alone development
With Node.js installed, all you need to do to setup the stand-alone development environment is run this command: With Node.js installed, all you need to do to setup the stand-alone development environment is run this command:
```bash ```bash
npx @freesewing/new-design npx @freesewing/studio
``` ```
After you've answered [some questions](#questions), it will take a while to set 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 everything up. When it's done, you will have a new folder with the development
environment inside. environment inside.
Now you're ready to [start the development ### Creating a new design
environment](/tutorials/getting-started-linux/dev-start).
:::tip If you would like to create a new design, enter the folder that was just created and run the following command:
The folder will have the name you chose above.
::: ```sh
npm run add
```
After you've answered [some questions](#questions), it create a new
sub-folder for your design in the `designs` folder.
Now you're ready to [start the development
environment](/tutorials/getting-started-mac/dev-start).
:::note :::note
### Questions ### Questions
#### What design name to use
Please stick to a single word name using \[a-z] to avoid problems.
#### What template to use #### What template to use
Use `From scratch` unless you want to start from our of our blocks: Use `From scratch` unless you want to start from our of our blocks:
- Use `Extend Brian` to start from [Brian](https://freesewing.org/designs/brian) - Use `Extend Brian` to start from [Brian](https://freesewing.eu/designs/brian)
- Use `Extend Bent` to start from [Bent](https://freesewing.org/designs/bent) - Use `Extend Bent` to start from [Bent](https://freesewing.eu/designs/bent)
- Use `Extend Bella` to start from [Bella](https://freesewing.org/designs/bella) - Use `Extend Bella` to start from [Bella](https://freesewing.eu/designs/bella)
- Use `Extend Breanna` to start from [Breanna](https://freesewing.org/designs/breanna) - Use `Extend Breanna` to start from [Breanna](https://freesewing.eu/designs/breanna)
- Use `Extend Titan` to start from [Titan](https://freesewing.org/designs/titan) - Use `Extend Titan` to start from [Titan](https://freesewing.eu/designs/titan)
#### What name to use
This will become the name of your design. Stick to \[a-z] here to avoid problems.
If you're not certain what to pick, just mash some keys, it doesn't matter.
#### What package manager to use
You may wish to choose `yarn` since that is the package manager
that we use when doing work in the monorepo,
and many of our tutorials are written to use `yarn`.
However, it doesn't really matter.
You can choose either `yarn` or `npm` as you wish.
::: :::

55
sites/dev/docs/tutorials/getting-started-mac/dev-start/readme.mdx
View file

@ -3,55 +3,70 @@ title: Start the development environment
sidebar_position: 50 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 - [**Repository studio**](#repository-studio): 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 - [**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 ```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 :::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 ```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. You will have a new folder that contains the stand-alone studio development environment.
If you chose `test`, you will have a folder named `test`. (Within this new folder, the `design` subfolder holds your design's configuration files and source code.
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 can ignore all other subfolders and files; they are part of the development environment.) 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 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 :::tip
The development environment will watch for any changes you make to The development environment will watch for any changes you make to
the pattern's source code or configuration. 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 :::note
##### Yay, you're done! ##### Yay, you're done!

4
sites/dev/docs/tutorials/getting-started-mac/installing-node/readme.mdx
View file

@ -6,10 +6,10 @@ sidebar_position: 20
Now we will use `nvm` to install Node.js. Run the following command: Now we will use `nvm` to install Node.js. Run the following command:
```bash ```bash
nvm install lts/hydrogen nvm install lts/iron
``` ```
This will install the so-called LTS version of Node.js 18 on your system. This will install the so-called LTS version of Node.js 20 on your system.
LTS versions -- short for Long Term Support -- are good Node.js versions LTS versions -- short for Long Term Support -- are good Node.js versions
to use because they are stable and supported for a long time. to use because they are stable and supported for a long time.

2
sites/dev/docs/tutorials/getting-started-mac/node-versions/readme.mdx
View file

@ -47,7 +47,7 @@ With multiple Node.js versions installed, `nvm` allows you to switch between dif
versions. Just tell it which version you want to use: versions. Just tell it which version you want to use:
```bash ```bash
nvm use v10.22.1 nvm use lts/iron
``` ```
If you picked a version that is not installed, `nvm` will simply tell you If you picked a version that is not installed, `nvm` will simply tell you

40
sites/dev/docs/tutorials/getting-started-windows/readme.mdx
View file

@ -55,11 +55,11 @@ guide](https://github.com/nvm-sh/nvm#install--update-script). Once installed
you will need to activate NVM by either following the instructions printed to you will need to activate NVM by either following the instructions printed to
the screen or opening a new terminal. the screen or opening a new terminal.
#### Install Node.js (and optionally Yarn) #### Install Node.js
Now that you have NVM installed, you can install Node.js. The latest version can be Now that you have NVM installed, you can install Node.js. The latest version can be
installed using `nvm install default`. You can also install a specific version installed using `nvm install default`. You can also install a specific version
using `nvm install v18.17.0`. For the purposes of debugging it can be useful to using `nvm install v20.19.1`. For the purposes of debugging it can be useful to
have the same version of Node.js installed as the main project uses, which you can have the same version of Node.js installed as the main project uses, which you can
then activate using `nvm use <version>`. You can determine what version the then activate using `nvm use <version>`. You can determine what version the
FreeSewing project uses by checking FreeSewing project uses by checking
@ -68,16 +68,12 @@ FreeSewing project uses by checking
:::warning :::warning
At the time this guide was written the latest version of Node.js/npm has At the time this guide was written the latest version of Node.js/npm has
a bug in the dependency resolution process which causes the freesewing project a bug in the dependency resolution process which causes the freesewing project
to fail to build. Use the latest LTS version (currently 18.17.0) or the specific to fail to build. Use the latest LTS version (currently 20.19.1) or the specific
version used by the main project to avoid this issue. version used by the main project to avoid this issue.
::: :::
Node.js comes with the Node Package Manager (npm) by default which can be used to Node.js comes with the Node Package Manager (npm) by default which is used to
set up the project. The default package manager uses a fairly simplistic approach set up the project.
to dependency resolution which can make builds take a long time. Yarn is an
alternative package manager which makes builds faster, especially for monolithic
projects like FreeSewing. If you'd like to install yarn run `npm install yarn
--global` (optional, but recommended).
#### Install and configure Git (recommended) #### Install and configure Git (recommended)
@ -137,12 +133,12 @@ will take you to the latest release which provides an installer you can download
and run. Once nvm-windows is installed you will be able to continue with the and run. Once nvm-windows is installed you will be able to continue with the
rest of this process. rest of this process.
### Install Node.js (and optionally Yarn) ### Install Node.js
Open a Powershell terminal or command prompt. Run `nvm ls available` to show Open a Powershell terminal or command prompt. Run `nvm ls available` to show
versions that can be installed. Choose the appropriate version (you should use versions that can be installed. Choose the appropriate version (you should use
the same version as the freesewing project or latest LTS version) then run `nvm the same version as the freesewing project or latest LTS version) then run `nvm
install 18.17.0` and `nvm use 18.17.0` (where `18.17.0` is the full version install 20.19.1` and `nvm use 20.19.1` (where `20.19.1` is the full version
string of the version you wish to use) to activate the newly installed version. string of the version you wish to use) to activate the newly installed version.
You will receive a prompt for elevated permissions and will need to accept it in You will receive a prompt for elevated permissions and will need to accept it in
order to activate the new version of Node.js. order to activate the new version of Node.js.
@ -150,20 +146,16 @@ order to activate the new version of Node.js.
:::warning :::warning
At the time this guide was written the latest version of Node.js/npm has At the time this guide was written the latest version of Node.js/npm has
a bug in the dependency resolution process which causes the freesewing project a bug in the dependency resolution process which causes the freesewing project
to fail to build. Use the latest LTS version (currently 18.17.0) or the specific to fail to build. Use the latest LTS version (currently 20.19.1 or the specific
version used by the main project to avoid this issue. version used by the main project to avoid this issue.
::: :::
Node.js comes with the Node Package Manager (npm) by default which can be used to Node.js comes with the Node Package Manager (npm) by default which is used to
set up the project. The default package manager uses a fairly simplistic approach set up the project.
to dependency resolution which can make builds take a long time. Yarn is an
alternative package manager which makes builds faster, especially for monolithic
projects like FreeSewing. If you'd like to install yarn run (`npm install yarn
-g`) (optional).
## Setting up the FreeSewing development environment ## Setting up the FreeSewing development environment
In VSCode or in a terminal, navigate to the folder you wish to contain your new patterns (e.g. `D:\Documents\my-freesewing-patterns`). Inside this directory run `npx @freesewing/new-design`. In VSCode or in a terminal, navigate to the folder you wish to contain your new patterns (e.g. `D:\Documents\my-freesewing-patterns`). Inside this directory run `npx @freesewing/studio`.
After you've answered [some questions](#questions), it will take a while to set everything up. After you've answered [some questions](#questions), it will take a while to set everything up.
When it's done, you will have a new folder with the development environment inside. When it's done, you will have a new folder with the development environment inside.
@ -192,14 +184,6 @@ This will become the name of your design. Stick to \[a-z] here to avoid problems
If you're not certain what to pick, just mash some keys, it doesn't matter. If you're not certain what to pick, just mash some keys, it doesn't matter.
#### What package manager to use
You may wish to choose `yarn` since that is the package manager
that we use when doing work in the monorepo,
and many of our tutorials are written to use `yarn`.
However, it doesn't really matter.
You can choose either `yarn` or `npm` as you wish.
::: :::
## Start the development environment ## Start the development environment
@ -211,7 +195,7 @@ If you chose `banana`, you'll have a folder named `banana`.
You can ignore all other subfolders and files; they are part of the development environment.) You can ignore all other subfolders and files; they are part of the development environment.)
To start the development environment, navigate to the folder that was created To start the development environment, navigate to 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 org`.
Then open your browser and go to http://localhost:8000 Then open your browser and go to http://localhost:8000

83
sites/dev/docs/tutorials/pattern-design/part1/new-design/readme.mdx
View file

@ -1,28 +1,22 @@
--- ---
title: Setting up the development environment title: Setting up the FreeSewing development environment
sidebar_position: 20 sidebar_position: 20
--- ---
FreeSewing provides a development environment that visualizes your design for FreeSewing provides the studio, a development environment that visualizes your design for
you. This tutorial is for the stand-alone development environment, not the you. This tutorial is for the stand-alone studio, not the
monorepo development environment (which you may have set up if you followed a repository studio (which you may have set up if you followed a
getting started tutorial). getting started tutorial).
To set it up, I will open a terminal and enter the following command: To set it up, I will open a terminal and enter the following command:
```sh ```sh
npx @freesewing/new-design npx @freesewing/studio
``` ```
It will ask if it is ok to install the development environment in a new folder After you enter the folder name to create, it will take a while to set
named `freesewing`. You can accept the default, or pick a different folder name everything up. When it's done, you will have a new folder with the development
if you prefer. environment inside.
It will also ask what package manager you would like to use.
Here too the default (`npm`) is fine., unless you are certain you have **yarn** installed.
After answering these questions, files will be downloaded, dependencies installed,
and it will also initialize a git repository for you (if you have git on your system).
:::note :::note
@ -31,29 +25,58 @@ of dependencies that need to be downloaded.
::: :::
When it's ready, you can enter the `freesewing` directory that was just created and run `npm run dev`: 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.)
```sh ### Creating a new design
cd freesewing
npm run dev If you would like to create a new design, enter the folder that was just
created and run the following command:
```bash
npm run add
``` ```
Or if you want to use yarn as package manager: After you've answered [some questions](#questions), it create a new
sub-folder for your design in the `designs` folder.
```sh :::note
cd freesewing
yarn dev ### 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](https://freesewing.eu/designs/brian)
- Use `Extend Bent` to start from [Bent](https://freesewing.eu/designs/bent)
- Use `Extend Bella` to start from [Bella](https://freesewing.eu/designs/bella)
- Use `Extend Breanna` to start from [Breanna](https://freesewing.eu/designs/breanna)
- Use `Extend Titan` to start from [Titan](https://freesewing.eu/designs/titan)
:::
### Starting the development environment
To start the development environment, enter the folder containing the
stand-alone studio and run `npm run start`.
```bash
npm run start
``` ```
Now open a browser and go to http://localhost:8000 Then open your browser and go to http://localhost:3000
If all goes well, we'll should see this landing page:
![The FreeSewing development environment](./nd.png)
:::tip :::tip
The development environment will watch for any changes you make to
##### More detailed setup tutorials are available 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 This pattern design tutorial contains only an abbreviated overview
of the setup process. of the setup process.
@ -69,7 +92,7 @@ For more detailed instructions, please refer to one of our setup tutorials:
##### Need help? ##### Need help?
If you run into any issues, head over to [FreeSewing.org/support](https://next.freesewing.org/support) If you run into any issues, head over to [FreeSewing.eu/support](https://freesewing.eu/support)
which lists the various ways in which you can get help. which lists the various ways in which you can get help.
::: :::

2
sites/dev/docs/tutorials/pattern-design/part1/nodejs/readme.mdx
View file

@ -25,7 +25,7 @@ If you don't have NodeJS on your system, you can go to
##### NodeJS versions ##### NodeJS versions
You need Node.js 18 (lts/hydrogen) or higher to use FreeSewing You need Node.js 20 (lts/iron) or higher to use FreeSewing
If you're looking to use different versions, I can recommend using `nvm` which makes this very easy: https://github.com/nvm-sh/nvm If you're looking to use different versions, I can recommend using `nvm` which makes this very easy: https://github.com/nvm-sh/nvm

13
sites/dev/docs/tutorials/pattern-design/part1/readme.mdx
View file

@ -1,5 +1,5 @@
--- ---
title: "Part 1: Prerequisites" title: 'Part 1: Prerequisites'
--- ---
In this first part, I will get your up and running with the FreeSewing In this first part, I will get your up and running with the FreeSewing
@ -10,24 +10,23 @@ this section. If not, I have good news and bad news (and then some more good
news) for you. news) for you.
The good news is that JavaScript is an easy language to pick up. It is also a The good news is that JavaScript is an easy language to pick up. It is also a
very popular and versatile language and the skills you learn here will serve very popular and versatile language and the skills you learn here will serve
you well. you well.
The bad news is that the JavaScript ecosystem is vast, and unfortunately The bad news is that the JavaScript ecosystem is vast, and unfortunately
somewhat fractured. Most of the problems people need help with are not so much somewhat fractured. Most of the problems people need help with are not so much
in the code itself, but rather getting everything to work together. in the code itself, but rather getting everything to work together.
This is true not just for FreeSewing, but pretty much all modern JavaScript. This is true not just for FreeSewing, but pretty much all modern JavaScript.
But, no need to despair, FreeSewing provides a development environment that But, no need to despair, FreeSewing provides a development environment that
will take care of all of this for you. So you can focus on designing patterns. will take care of all of this for you. So you can focus on designing patterns.
If you have NodeJS on your system, getting that development environment up If you have NodeJS on your system, getting that development environment up
and running takes only a single command: and running takes only a single command:
```sh ```sh
npx @freesewing/new-design npx @freesewing/studio
``` ```
If you don't have NodeJS on your system --- or if you're not sure what If you don't have NodeJS on your system --- or if you're not sure what
NodeJS is to begin with --- read on to learn how to install it. NodeJS is to begin with --- read on to learn how to install it.

2
sites/dev/docs/tutorials/pattern-design/part1/sde/readme.mdx
View file

@ -3,7 +3,7 @@ title: The FreeSewing development environment
sidebar_position: 30 sidebar_position: 30
--- ---
If you have been to FreeSewing.org the FreeSewing development environment will look familiar. If you have been to FreeSewing.eu the FreeSewing development environment will look familiar.
That's because under the hood, it re-uses the same building blocks. That's because under the hood, it re-uses the same building blocks.
At the top of the page is the header with a row of icons that lay out what is available to you. At the top of the page is the header with a row of icons that lay out what is available to you.

13
sites/dev/docs/tutorials/pattern-design/readme.mdx
View file

@ -9,22 +9,22 @@ how to design a bespoke sewing pattern, start to finish.
This tutorial is divided into three parts, allowing you to speedrun or entirely This tutorial is divided into three parts, allowing you to speedrun or entirely
skip certain parts depending on your interests or prior experience: skip certain parts depending on your interests or prior experience:
## Part 1: Prerequisites ## Part 1: Prerequisites
The first sections of this tutorial, [Part 1](/tutorials/pattern-design/part1), The first sections of this tutorial, [Part 1](/tutorials/pattern-design/part1),
deals with the prerequisites. Installing node, setting up the FreeSewing deals with the prerequisites. Installing node, setting up the FreeSewing
development environment on your system, and so on. If you are familiar with development environment on your system, and so on. If you are familiar with
the JavaScript ecosystem, I can summarize that entire section in this one-liner the JavaScript ecosystem, I can summarize that entire section in this one-liner
that sets up the FreeSewing development environment on your system: that sets up the FreeSewing development environment on your system:
```sh ```sh
npx @freesewing/new-design npx @freesewing/studio
``` ```
## Part 2: Parametric design ## Part 2: Parametric design
In [Part 2](/tutorials/pattern-design/part2) I will show you how to design a In [Part 2](/tutorials/pattern-design/part2) I will show you how to design a
parametric sewing pattern with FreeSewing. We'll create a part, add a bunch of parametric sewing pattern with FreeSewing. We'll create a part, add a bunch of
points, draw lines and curves, and so on. points, draw lines and curves, and so on.
All the basic skills required to create a sewing pattern in code. All the basic skills required to create a sewing pattern in code.
@ -39,10 +39,9 @@ There is more to FreeSewing patterns than meets the eye, and in [Part
further value to your designs. further value to your designs.
This includes things like translation, supporting laser cutters, avoiding the This includes things like translation, supporting laser cutters, avoiding the
need to printing with so-called *paperless patterns*, as well as how you can need to printing with so-called _paperless patterns_, as well as how you can
configure your pattern to integrate with FreeSewing.org, or your own configure your pattern to integrate with FreeSewing.org, or your own
frontend. frontend.
You can follow this tutorial start to finish, or skip ahead and back, the You can follow this tutorial start to finish, or skip ahead and back, the
choice is yours. choice is yours.