# Development

## Editor setup

We recommend VS Code, with the following extensions:

-   Prettier - reformats your code automatically (enable format on save),
-   ESLint - warns you about issues

Optionally, if you're going to make many changes to the CSS in JS, you might
also find it useful to install the _vscode-styled-components_ extension.

## Yarn commands

Make sure you're on yarn 1.x series (aka yarn "classic").

### yarn install

Installs dependencies. This needs to be done once, and thereafter wherever there
is a change in `yarn.lock` (e.g. when pulling the latest upstream).

### yarn dev:\*

Launch the app in development mode. There is one `yarn dev:foo` for each app,
e.g. `yarn dev:auth`. `yarn dev` is a shortcut for `yarn dev:photos`.

The ports are different for the main apps (3000), various sidecars (3001, 3002).

### yarn build:\*

Build a production export for the app. This is a bunch of static HTML/JS/CSS
that can be then deployed to any web server.

There is one `yarn build:foo` for each app, e.g. `yarn build:auth`. The output
will be placed in `apps/<foo>/out`, e.g. `apps/auth/out`.

### yarn preview:\*

Build a production export and start a local web server to serve it. This uses
Python's built in web server, and is okay for quick testing but should not be
used in production.

The ports are the same as that for `yarn dev:*`

### lint, lint-fix

Use `yarn lint` to check that your code formatting is as expected, and that
there are no linter errors. Use `yarn lint-fix` to try and automatically fix the
issues.

## Monorepo

The monorepo uses Yarn (classic) workspaces.

To run a command for a workspace `<ws>`, invoke `yarn workspace <ws> <cmd>` from
the root folder instead the `yarn <cmd>` you’d have done otherwise. For example,
to start a development server for the `photos` app, we can do

```sh
yarn workspace photos next dev
```

There is also a convenience alias, `yarn dev:photos`. See `package.json` for the
full list of such aliases. The two common patterns are `dev:<app-name>` for
running a local development server, and `build:<app-name>` for creating a
production build.

> Tip: `yarn dev` is a shorcut for `yarn dev:photos`

Note that yarn does not automatically update `node_modules` if you switch to a
branch that has added or modified dependencies. So if you encounter unexpected
errors on switching branches, make sure that your `node_modules` is up to date
by running `yarn install` first.

> `yarn` is a shortcut for `yarn install`

To add a local package as a dependency, use `<package-name>@*`. The "\*" here
denotes any version.

```sh
yarn workspace photos add '@/utils@*'
```

> Note: The yarn (classic) command above causes harmless but noisy diffs in
> `yarn.lock` when adding or removing dependencies to the workspaces. To fix
> them, run `yarn` again once to reset these unnecessary changes.

To see what packages depend on each other locally, use

```sh
yarn workspaces info
```