1
0
Fork 0
freesewing/sites/dev/docs/tutorials/getting-started-mac/dev-start
Joost De Cock 469eb43c95
feat: Add various content types to docusaurus (#7231)
This brings blog posts, showcase posts, and newsletter editions into the Docusaurus site.

It also adds support for using TailwindCSS inside a container. So this will probably end up being the new freesewing.org site in v4.
2024-11-18 11:05:16 +01:00
..
readme.mdx feat: Add various content types to docusaurus (#7231) 2024-11-18 11:05:16 +01:00

---
title: Start the development environment
sidebar_position: 50
---

FreeSewing provides a development environment to help you design and develop patterns.

There are two ways to run this development environment:

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

## Monorepo development

Run `yarn lab` to start the development environment:

```bash
yarn lab
```

Then point your browser to http://localhost:8000

:::tip

### Adding a new design

This is all you need to work on existing designs. If you'd like to add a new design, run:

```bash
yarn new design
```

Just make sure to re-start the lab afterwards with `yarn lab`
:::

## Stand-alone development

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

Then open your browser and go to http://localhost:8000

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

:::note

##### Yay, you're done!

All you have to do now is design your pattern.
Thankfully, we have a tutorial for that too:

- [Pattern design tutorial](/tutorials/pattern-design/): A step-by-step guide to designing your first pattern

:::