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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue