Set up and configure a new Nx Workspace

Introduction

In this tutorial, you learn how to set up and configure a Nx Workspace. Read the introduction to learn more about Nx Workspace.

We use the create-nx-workspace package to scaffold a new project. After that, we adjust the prettier settings to our liking, and add lint-staged and husky to make sure our code gets properly formatted on commit.

Requirements

For this tutorial, you need:

• Node.js, visit the homepage for installation instructions.
  • Run node -v to verify you have version 12 or higher.
• Yarn (the classic version), visit the homepage 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 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:

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.

This generates a new workspace in the beehive directory.

Run the following command to enter the project root:

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

git remote add origin [e-mail]: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 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:

{
  "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:

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 and 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):

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

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

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

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 or leave a comment on DEV! 🐝

Comments

[Oliver Glas]

Would be very nice to know how to best uninstall nx.