Editor Setup

Here's some guides for setting up a comfy dev environment. Personally I (Tom) use WebStorm so can offer the most guidance there, but others are welcome to add guides for other editors here.

WebStorm

Running commands

Whilst there's an official Nx plugin for JetBrains IDEs I tend to find it a little buggy, and haven't been able to get debugging working. As such I prefer to use terminal windows for running applications, usually with 2-3 split terminal windows for running the frontend, backend, and other tasks.

One area that the Nx plugin works really well is in the "Run Anything" dialogue, where it gives detailed suggestions for Nx commands, in particular generators. So I find the plugin worth having for that reason.

Debugging

As above, I just run stuff via CLI, then attach a debugger separately. Debugging Nest and Angular are both very easy:

Testing

WebStorm has superb native support for Jest, and should detect test suites in any .spec.ts/.e2e-spec.ts files - just use the buttons in the below image.

You can run all the tests in a project using the configurations in the run menu. I've included configurations for the larger projects, and you can add others as needed as below.

Note that running the outermost jest.config.ts won't work for backend E2E tests. These need to be run with --runInBand to avoid DB conflicts. The Jest maintainers have completely ignored the PR to support this for several years...

File Scopes

Nx adds a ton of config files for Typescript compilation, tests, linting, etc. that usually you don't need to pay any attention to. WebStorm has a helpful "File Scopes" config that allows you to hide them. I use the below setup with these scopes

!file:*.eslintrc.json&&!file:*jest.config.ts&&!file:*project.json&&!file:*/tsconfig.app.json&&!file:*tsconfig*json&&!file:*webpack.config.js&&!file:*cypress.config.ts&&!file:lint-staged.config.js&&!file:.gitignore&&!file:*package.json&&!file:migrations.json&&!file:docker-compose.yml&&!file:package-lock.json&&!file:.prettierrc&&!file:docker-compose.override.yml&&!file:.prettierignore&&!file:commitlint.config.js&&!file:jest.preset.js&&!file:nx.json&&!file:docker-compose.prod.yml&&!file:docker-compose.test.yml&&!file:.eslintignore&&!file:.editorconfig&&!file[website]:data//*&&!file[website]:.github//*&&!file[website]:.husky//*&&!file[website]:.idea//*&&!file[website]:.vscode//* &&!file:*.eslintrc.js&&!file:.env.test&&!file:apps/frontend/proxy.conf.json

VS Code

Extensions

.vscode/extensions.json contains some extension recommendations.

The "Make Hidden" extensions seems like a pretty good alternative to WS's file scopes for if you want to hide the endless configuration files, here's a some exclusion rules:

{
  "files.exclude": {
    ".angular": true,
    ".eslintignore": true,
    ".eslintrc.json": true,
    ".git": true,
    ".github": true,
    ".gitignore": true,
    ".husky": true,
    ".idea": true,
    ".prettierignore": true,
    ".prettierrc": true,
    ".vscode": true,
    "commitlint.config.js": true,
    "data": true,
    "dist": true,
    "docker-compose.override.yml": true,
    "docker-compose.prod.yml": true,
    "docker-compose.test.yml": true,
    "docker-compose.yml": true,
    "jest.config.ts": true,
    "jest.preset.js": true,
    "lint-staged.config.js": true,
    "migrations.json": true,
    "node_modules": true,
    "nx.json": true,
    "package-lock.json": true,
    "package.json": true,
    "tsconfig.base.json": true,
    "**/tsconfig.*": true,
    "**/.eslintrc": true,
    "**/jest.config.ts": true,
    "**/project.json": true,
    "**/package.json": true,
    "**/webpack.config.js": true
  }
}

Testing

Jest Runner seems like the best extension for running individual tests, and sets up debugger correctly. I can't emphasize enough how useful it is to be able to debug tests!