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

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
---
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:
![The FreeSewing development environment](./nd.png)
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.
:::

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
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

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
@ -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.

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
---
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.