Set up and configure a new Nx Workspace
Tags: api, nest, nx, node
Published: 2020-08-06 04:50:17

---
title: "Set up and configure a new Nx Workspace"
series: "Building API's with NestJS and Nrwl Nx"
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/3lapwr5f7xlnzlqfs7vv.png
published: true
canonical_url: https://beeman.dev/posts/set-up-and-configure-a-new-nx-workspace-1oh6/
tags: api, nest, nx, node
---

## Introduction

In this tutorial, you learn how to set up and configure a Nx Workspace. Read [the introduction](https://dev.to/beeman/introduction-to-building-api-s-with-nestjs-and-nrwl-nx-1l2b) to learn more about Nx Workspace.

We use the `create-nx-workspace` package to scaffold a new project. After that, we adjust the [prettier](https://prettier.io/) settings to our liking, and add [lint-staged](https://github.com/okonet/lint-staged) and [husky](https://github.com/typicode/husky) to make sure our code gets properly formatted on commit.

## Requirements

For this tutorial, you need:

- Node.js, visit the [homepage](https://nodejs.org) for installation instructions.
  - Run `node -v` to verify you have version 12 or higher.
- Yarn (the classic version), visit the [homepage](https://classic.yarnpkg.com/lang/en/) for installation instructions.
  - Run `yarn -v` to verify you have version 1.22.0 or higher (in the 1.x range).

## 1. Set up new project.

In this step we create a new project using the [create-nx-workspace](https://www.npmjs.com/package/create-nx-workspace) package on npm. The name of the project in this tutorial is **beehive** which will also be the _npm scope_ of the packages that are created.

### 1.1 Create Workspace

Run the following command in your terminal to create a new workspace with the name **beehive**:

```bash
yarn create nx-workspace beehive
```

The installer asks a few questions, we provide the following options:

- Create an **empty** workspace, we will add a custom structure.
- Select the **Nx** CLI.
- Answer **Yes** to enable [Nx Cloud](https://nx.app/).

This generates a new workspace in the **beehive** directory.

Run the following command to enter the _project root_:

```bash
cd beehive
```

> 💡 All the following commands in this series will be executed from this directory, unless explicitly stated otherwise.

### 1.2 Create and add GitHub repo

Navigate to [github.com/new](https://github.com/new), add a repository name like **tutorial-nestjs-apis-with-nx**, select either **private** or **public** and click **Create Repository**.

We are importing an existing repository, so be sure to not select any of the options below the line _Skip this step if you’re importing an existing repository_.

After that we land on the page of the new repository. Look for the commands in the second block on the page that says, _...or push an existing repository from the command line_.

Execute the commands and in your terminal:

```bash
git remote add origin git@github.com:beeman/tutorial-nestjs-apis-with-nx.git
git push -u origin master
```

After this is done, switch back to the browser and refresh the page to verify the empty workspace is push to GitHub.

## 2. Configure Prettier

When creating a new Nx Workspace, it comes with support for Prettier out of the box. Let's adjust the default settings so that the formatting is done in line with our other projects.

> 💡This step is not essential, but it's very likely that you have some preference on how Prettier is formatting your code. Check [this page](https://prettier.io/docs/en/options.html) to see what options are available.

### 2.1 Update the Prettier configuration

Open the project in your editor, then open the file `.prettierrc`.

Update the content with the settings you prefer or use my default options:

```json
{
  "singleQuote": true,
  "printWidth": 120,
  "semi": false,
  "trailingComma": "all",
  "arrowParens": "always"
}
```

### 2.2 Re-format your code with the new settings

Once we have that in place, it's time to format the project with these settings.

In your terminal, run the following command:

```bash
nx format:write --all
```

> 💡 As the output suggest, because of performance it is not recommended running this command with the _--all_ flag in larger projects. However, our project is empty and with the auto-formatting in place our project should always be properly formatted.

## 3. Set up automatic formatting on commit

To make sure the formatting gets applied consistently for each contributor of the project, it makes sense to have auto-format the code on each commit. With this in place we can be sure formatting is not dependent on whatever extensions the contributors might have installed in their editors.

To achieve this, we use the tools [husky](http://npm.im/husky) and [lint-staged](http://npm.im/lint-staged). The first one, **husky**, is a tool that allows you to define hooks on various git commands, we will be using the `pre-commit` hook. The second one, **lint-staged**, is a tool that runs commands like linters (or formatters in our case) on the files that are _staged_ by git.

### 3.1 Add the dependencies

Run the following command to install these packages as dev-dependency:

```
yarn add -D husky lint-staged
```

### 3.2 Configure husky

Open `package.json` and add a new the following object on the _top-level_ (for example, right below the _devDependencies_ object):

```json
"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
}
```

This configures **husky** to run the command **lint-staged** before each commit.

### 3.3 Configure lint-staged

Open `package.json` and right below your **husky** configuration, add the following:

```json
"lint-staged": {
  "*.{js,json,css,scss,md,ts,html,graphql}": [
    "yarn format --uncommitted"
  ]
}
```

With this in place, when **lint-staged** runs, it will look for any of the extensions defined in the configuration, and execute the command `yarn format --uncommitted`.

## 4. Commit changes and push

With all this in place, the basic project is ready.

Run the following command to add the files commit and push:

```bash
git add .
git commit -m "configure prettier, husky and lint-staged"
```

When you run the commands above, you should see **husky** kicking in, which executes **lint-staged** which in turn formats your code.

Run the following command to push to GitHub

```bash
git push
```

## Conclusion

In this tutorial, we created a new Nx Workspace and set it up with some tools to help us keep the project neat and clean.

We configured Prettier to our liking. After that, we installed **husky** and **lint-staged** and configured them in our `package.json`. After adding the files and committing them, we verified that we say these tools do their job.

In the next tutorial, we will add the Nest API to our project, stay tuned!

## Thanks!

Thanks for reading my article, I hope it was useful. Feel free to reach out and follow me on [Twitter](https://twitter.com/beeman_nl/) or leave a comment on DEV! 🐝