Dream stack for React dev

architecture
project setup
patterns
quality gates

Intro

It will be a longer article about project setup. Prepare a huge mug of coffee before you start reading.

Technical check

Author

Linguistic check

Developers should work on functionalities. Did I say something weird?

Many of you may disagree. What about creating a project? What about connecting

eslint

prettier

? What about preparing a test environment for

unit

and

e2e

tests? Seems like a lot of work. Honestly, it may be...

However, today you'll see how you can do it easier/better/faster/stronger 🎧.

Here is a

final result

. Don't be afraid, just use it :0.

1. Monorepo

We'll divide our solution into

applications

and

libraries

. All of these will be stored in a single repository with the same configuration for linting, formatting, TypeScript, jest, cypress, storybook, ...etc.

Thanks to this you will have the opportunity to run the applications separately or together. This is what you can achieve with

monorepo

. In simple words, it's a way of storing and managing a solution, which involves keeping the code in a single repository and dividing it into packages and applications accordingly.

2. Monorepo with nx

It's mainly a

CLI

and

patterns

that helps you to create and manage monorepo. Below is a list of cool things you will get with this technology:

3. What will we create?

We are going to make a solution that will allow you to manage your blog and display the created articles/courses. So let's describe the components we'll create:

Each component will be independent. It will reduce the risk of conflicts. Libs will be consumed by apps.

Check out

this article

if you are interested in architecture.

4. Initialization of the project

First, install this script, which will start the

nx repository

npm i -g create-nx-workspace@latest --legacy-peer-deps

Later you need to type:

npx create-nx-workspace@latest

The CLI will ask you the following questions sequentially. You can find description of the options in

nx documentation

. Let's focus on creating our dream project.

Answer the questions the same way I did.

The file and folder structure generated by nx should look like this:

If you look at it you will see that by default you have

TypeScript

prettier

and

eslint

configured. In addition, tests in

jest

have been configured and e2e in

cypress

We already have a project and app in

Next.js

. Now it's time for the

single page application in React

cd .\system\

npx nx g @nrwl/react:application blog-creator

The tool may ask you to install additional dependencies, which it uses to generate folders and files. Confirm it. After that, you will see similar questions as before. Answer them the same way I did:

We have the apps! After a while you'll see two new folders in the

apps

directory.

In this nice looking

commit

you have the current progress.

5. Creating libraries

The idea is the same, only the questions and your answers differ. It's beautiful ❤️. Type the command:

npx nx g @nrwl/react:lib figa-ui

I named my component library after my beloved cat -

Figa

. You can name it after a turtle (or whatever pet you have at home). These are my answers:

Now it's time to do the two simplest things. We need to create two

TypeScript

libraries. Type the following two commands:

npx nx generate @nrwl/js:lib utils

npx nx generate @nrwl/js:lib blog-api

In both cases, choose the same answers:

We have what we wanted, so let's move on.

In this nice looking

commit

you have the current progress.

6. Adding storybook to UI library

Storybook

will be needed for our components library.

allows per scope configuration or global one. We need scoped. So let's enter some commands:

npm i --save @nrwl/storybook --legacy-peer-deps

npx nx g @nrwl/storybook:configuration figa-ui --uiFramework=@storybook/react

As usual there will be questions, answer as I did:

Now you can start the storybook process and play with it via this command:

npx nx run figa-ui:storybook

After a while, the

storybook window

will launch with the message that you don't have any story yet. We'll add the

Bell.tsx

and

Bell.stories.tsx

component to see if everything works as it should.

In this nice looking

commit

you have the current progress.

7. Running the applications

Now it begins :D. You can run all applications, one of them, or just the storybook. It depends what kind of feature you are already working on. To run single app type:

npx nx serve blog

You can run all apps via:

npx nx run-many --parallel --target=serve --projects=blog,blog-creator

npx nx run-many --target=serve --all

You can get an error about same port usage attempt. To fix it you need to visit

project.json

files and add port number. For each application add different one. After that type:

npx nx run-many --target=serve --all

and all applications will be run on different ports, in my case

3001

and

3002

. Looks cool? Yea!

In this nice looking

commit

you have the current progress.

8. Using libraries

Take a look at this. Do you want to use a component library in two applications? Forget about

npm install

. All you need is a simple

import

statement.

Who cares about configuring aliases for webpack? Certainly not you :D

In this nice looking

commit

you have the current progress.

9. Adding custom fonts