Dream stack for React dev

12m
new
  • 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.

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.
Nx
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
or
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
I will appear here in next week... :).
10. Adding husky
I will appear here in next week... :).
11. Adding chromatic
I will appear here in next week... :).
12. CI&CD
I will appear here in next week... :).
13. State management
I will appear here in next week... :).
14. Adding code style and standards
I will appear here in next week... :).
15. Architecture design and documentation
I will appear here in next week... :).
16. Additional tools and libraries
I will appear here in next week... :).
17. Bumping packages
I will appear here in next week... :).
18. Adding common hooks
I will appear here in next week... :).
19. Implementing themes
I will appear here in next week... :).
20. Adding visual regression and e2e tests
I will appear here in next week... :).
Repository
to play with.
I tell you right away, this is going to be a huge article. Don't worry. At the end you will have a great starter for future projects.
We went through the wonderful tool together. I recommend playing with it. We have described only a part of the possibilities.
As always, this is my point of view and opinion based on my experience.
Feel free to contact me if you have any questions/proposals. Have a nice day and good health!