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
Joost De Cock
parent
fdd94d9bb1
commit
dcf7c0412b
14 changed files with 242 additions and 266 deletions
|
|
@ -3,17 +3,16 @@ title: Setting up the FreeSewing development environment
|
|||
sidebar_position: 40
|
||||
---
|
||||
|
||||
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
|
||||
- [**Repository studio**](#monorepo-studio): Use this if you intend to
|
||||
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
|
||||
|
||||
## Monorepo development
|
||||
## Repository studio
|
||||
|
||||
:::note
|
||||
This is the recommended way for (aspiring) FreeSewing contributors
|
||||
|
|
@ -24,7 +23,7 @@ This is the recommended way for (aspiring) FreeSewing contributors
|
|||
```bash
|
||||
git clone https://codeberg.org/freesewing/freesewing.git
|
||||
cd freesewing
|
||||
yarn kickstart
|
||||
npm run kickstart
|
||||
```
|
||||
|
||||
:::tip
|
||||
|
|
@ -34,22 +33,16 @@ fork](https://codeberg.org/freesewing/freesewing/fork)
|
|||
```bash
|
||||
git clone https://codeberg.org/your-username/freesewing.git
|
||||
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:
|
||||
|
||||
```sh
|
||||
yarn new design
|
||||
```
|
||||
|
||||
If you'd like to create a new plugin, run this variant instead:
|
||||
|
||||
```sh
|
||||
yarn new plugin
|
||||
npm run add
|
||||
```
|
||||
|
||||
### Step by step
|
||||
|
|
@ -59,16 +52,6 @@ These docs assume you have git installed.
|
|||
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
|
||||
|
||||
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
|
||||
|
||||
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
|
||||
cd freesewing
|
||||
yarn kickstart
|
||||
npm run kickstart
|
||||
```
|
||||
|
||||
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,
|
||||
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:
|
||||
If you would like to create a new design or plugin, run the following command:
|
||||
|
||||
```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:
|
||||
|
||||
```sh
|
||||
yarn new plugin
|
||||
```
|
||||
Now you're ready to [start the development
|
||||
environment](/tutorials/getting-started-linux/dev-start).
|
||||
|
||||
## Stand-alone development
|
||||
|
||||
With Node.js installed, all you need to do to setup the stand-alone development environment is run this command:
|
||||
|
||||
```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
|
||||
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
|
||||
environment](/tutorials/getting-started-linux/dev-start).
|
||||
|
||||
:::tip
|
||||
The folder will have the name you chose above.
|
||||
:::
|
||||
|
||||
:::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](https://freesewing.org/designs/brian)
|
||||
- Use `Extend Bent` to start from [Bent](https://freesewing.org/designs/bent)
|
||||
- Use `Extend Bella` to start from [Bella](https://freesewing.org/designs/bella)
|
||||
- Use `Extend Breanna` to start from [Breanna](https://freesewing.org/designs/breanna)
|
||||
- Use `Extend Titan` to start from [Titan](https://freesewing.org/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.
|
||||
- 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)
|
||||
|
||||
:::
|
||||
|
|
|
|||
|
|
@ -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!
|
||||
|
|
|
|||
|
|
@ -6,10 +6,10 @@ sidebar_position: 20
|
|||
Now we will use `nvm` to install Node.js. Run the following command:
|
||||
|
||||
```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
|
||||
to use because they are stable and supported for a long time.
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
||||
```bash
|
||||
nvm use lts/hydrogen
|
||||
nvm use lts/iron
|
||||
```
|
||||
|
||||
If you picked a version that is not installed, `nvm` will simply tell you
|
||||
|
|
|
|||
|
|
@ -3,17 +3,16 @@ title: Setting up the FreeSewing development environment
|
|||
sidebar_position: 40
|
||||
---
|
||||
|
||||
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
|
||||
- [**Repository studio**](#monorepo-studio): Use this if you intend to
|
||||
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
|
||||
|
||||
## Monorepo development
|
||||
## Repository studio
|
||||
|
||||
:::note
|
||||
This is the recommended way for (aspiring) FreeSewing contributors
|
||||
|
|
@ -22,57 +21,41 @@ This is the recommended way for (aspiring) FreeSewing contributors
|
|||
### TL;DR
|
||||
|
||||
```bash
|
||||
git clone https://github.com/freesewing/freesewing
|
||||
git clone https://codeberg.org/freesewing/freesewing.git
|
||||
cd freesewing
|
||||
yarn kickstart
|
||||
npm run kickstart
|
||||
```
|
||||
|
||||
:::tip
|
||||
Even better: [clone your own
|
||||
fork](https://github.com/freesewing/freesewing/fork)
|
||||
fork](https://codeberg.org/freesewing/freesewing/fork)
|
||||
|
||||
```bash
|
||||
git clone https://github.com/your-username/freesewing
|
||||
git clone https://codeberg.org/your-username/freesewing.git
|
||||
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:
|
||||
|
||||
```sh
|
||||
yarn new design
|
||||
```
|
||||
|
||||
If you'd like to create a new plugin, run this variant instead:
|
||||
|
||||
```sh
|
||||
yarn new plugin
|
||||
npm run add
|
||||
```
|
||||
|
||||
### Step by step
|
||||
|
||||
:::note
|
||||
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
|
||||
|
||||
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
|
||||
|
||||
|
|
@ -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>
|
||||
```
|
||||
|
||||
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`.
|
||||
|
||||
#### 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
|
||||
cd freesewing
|
||||
yarn kickstart
|
||||
npm run kickstart
|
||||
```
|
||||
|
||||
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
|
||||
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:
|
||||
|
||||
```sh
|
||||
yarn new plugin
|
||||
```
|
||||
Now you're ready to [start the development
|
||||
environment](/tutorials/getting-started-mac/dev-start).
|
||||
|
||||
## Stand-alone development
|
||||
|
||||
With Node.js installed, all you need to do to setup the stand-alone development environment is run this command:
|
||||
|
||||
```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
|
||||
environment inside.
|
||||
|
||||
Now you're ready to [start the development
|
||||
environment](/tutorials/getting-started-linux/dev-start).
|
||||
### Creating a new design
|
||||
|
||||
:::tip
|
||||
The folder will have the name you chose above.
|
||||
:::
|
||||
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
|
||||
environment](/tutorials/getting-started-mac/dev-start).
|
||||
|
||||
:::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](https://freesewing.org/designs/brian)
|
||||
- Use `Extend Bent` to start from [Bent](https://freesewing.org/designs/bent)
|
||||
- Use `Extend Bella` to start from [Bella](https://freesewing.org/designs/bella)
|
||||
- Use `Extend Breanna` to start from [Breanna](https://freesewing.org/designs/breanna)
|
||||
- Use `Extend Titan` to start from [Titan](https://freesewing.org/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.
|
||||
- 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)
|
||||
|
||||
:::
|
||||
|
|
|
|||
|
|
@ -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!
|
||||
|
|
|
|||
|
|
@ -6,10 +6,10 @@ sidebar_position: 20
|
|||
Now we will use `nvm` to install Node.js. Run the following command:
|
||||
|
||||
```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
|
||||
to use because they are stable and supported for a long time.
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
||||
```bash
|
||||
nvm use v10.22.1
|
||||
nvm use lts/iron
|
||||
```
|
||||
|
||||
If you picked a version that is not installed, `nvm` will simply tell you
|
||||
|
|
|
|||
|
|
@ -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
|
||||
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
|
||||
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
|
||||
then activate using `nvm use <version>`. You can determine what version the
|
||||
FreeSewing project uses by checking
|
||||
|
|
@ -68,16 +68,12 @@ FreeSewing project uses by checking
|
|||
:::warning
|
||||
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
|
||||
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.
|
||||
:::
|
||||
|
||||
Node.js comes with the Node Package Manager (npm) by default which can be used to
|
||||
set up the project. The default package manager uses a fairly simplistic approach
|
||||
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).
|
||||
Node.js comes with the Node Package Manager (npm) by default which is used to
|
||||
set up the project.
|
||||
|
||||
#### 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
|
||||
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
|
||||
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
|
||||
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.
|
||||
You will receive a prompt for elevated permissions and will need to accept it in
|
||||
order to activate the new version of Node.js.
|
||||
|
|
@ -150,20 +146,16 @@ order to activate the new version of Node.js.
|
|||
:::warning
|
||||
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
|
||||
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.
|
||||
:::
|
||||
|
||||
Node.js comes with the Node Package Manager (npm) by default which can be used to
|
||||
set up the project. The default package manager uses a fairly simplistic approach
|
||||
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).
|
||||
Node.js comes with the Node Package Manager (npm) by default which is used to
|
||||
set up the project.
|
||||
|
||||
## 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.
|
||||
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.
|
||||
|
||||
#### 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
|
||||
|
|
@ -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.)
|
||||
|
||||
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
|
||||
|
||||
|
|
|
|||
|
|
@ -1,28 +1,22 @@
|
|||
---
|
||||
title: Setting up the development environment
|
||||
title: Setting up the FreeSewing development environment
|
||||
sidebar_position: 20
|
||||
---
|
||||
|
||||
FreeSewing provides a development environment that visualizes your design for
|
||||
you. This tutorial is for the stand-alone development environment, not the
|
||||
monorepo development environment (which you may have set up if you followed a
|
||||
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:
|
||||
|
||||
```sh
|
||||
npx @freesewing/new-design
|
||||
npx @freesewing/studio
|
||||
```
|
||||
|
||||
It will ask if it is ok to install the development environment in a new folder
|
||||
named `freesewing`. You can accept the default, or pick a different folder name
|
||||
if you prefer.
|
||||
|
||||
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).
|
||||
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
|
||||
|
||||
|
|
@ -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
|
||||
cd freesewing
|
||||
npm run dev
|
||||
### 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:
|
||||
|
||||
```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
|
||||
cd freesewing
|
||||
yarn dev
|
||||
:::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](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
|
||||
|
||||
If all goes well, we'll should see this landing page:
|
||||
|
||||
|
||||
Then open your browser and go to http://localhost:3000
|
||||
|
||||
:::tip
|
||||
|
||||
##### More detailed setup tutorials are available
|
||||
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.
|
||||
|
|
@ -69,7 +92,7 @@ For more detailed instructions, please refer to one of our setup tutorials:
|
|||
|
||||
##### 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.
|
||||
|
||||
:::
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ If you don't have NodeJS on your system, you can go to
|
|||
|
||||
##### 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
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -10,24 +10,23 @@ this section. If not, I have good news and bad news (and then some more good
|
|||
news) for you.
|
||||
|
||||
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.
|
||||
|
||||
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
|
||||
in the code itself, but rather getting everything to work together.
|
||||
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.
|
||||
|
||||
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:
|
||||
|
||||
```sh
|
||||
npx @freesewing/new-design
|
||||
npx @freesewing/studio
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ title: The FreeSewing development environment
|
|||
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.
|
||||
|
||||
At the top of the page is the header with a row of icons that lay out what is available to you.
|
||||
|
|
|
|||
|
|
@ -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
|
||||
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),
|
||||
deals with the prerequisites. Installing node, setting up the FreeSewing
|
||||
development environment on your system, and so on. If you are familiar with
|
||||
deals with the prerequisites. Installing node, setting up the FreeSewing
|
||||
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
|
||||
that sets up the FreeSewing development environment on your system:
|
||||
|
||||
```sh
|
||||
npx @freesewing/new-design
|
||||
npx @freesewing/studio
|
||||
```
|
||||
|
||||
## Part 2: Parametric design
|
||||
|
||||
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.
|
||||
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.
|
||||
|
||||
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
|
||||
frontend.
|
||||
|
||||
|
||||
You can follow this tutorial start to finish, or skip ahead and back, the
|
||||
choice is yours.
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue