Full-stack monorepo starter project with Nx, NestJs, React and Docker.
Below are the Nx plugins that this project uses:
- Docker-compose integration.
- Separate package.json for workspace projects.
- CI with Github actions (build, test, containerization).
- Nx-workspace and Nx-cloud distributed caching.
- Pnpm workspaces.
- Single pnpm cache container for dockerized workspace components.
- Workspace versioning by using semantic-release.
- Project versioning by using calver convention.
- Various dev-scripts for affected project understanding, calver generation and versioning.
- Tailwind and styled-components integration.
- Radix UI integration.
- Azure pipelines for deployment.
- Kubernetes and Helm Charts integration.
This section explains how to setup the application for development.
-
Install Nvm: Install
nvm
to easily switch between node versions on your computer. You can find the documentation on how to installnvm
on your machine:https://github.com/nvm-sh/nvm#installing-and-updating
. Inside the root of the project directory runnvm use
. This command is going to set the node version of your machine to the node version required for this project. If this does not work, find the node version written inside the ./.nvmrc file and runnvm install ${REPLACE_WITH_NVMRC_NODE_VERSION}
. Then runnvm use
again. -
Install Docker: Details on how to install docker to your system can be found inside the official documentation:
https://docs.docker.com/engine/install/
-
Install pnpm: This repository uses pnpm to manage the dependencies of apps & libs existing inside the monorepo architecture. To install pnpm run
npm install -g pnpm
. -
Generate .env files: Make copies of all env files inside the ./config/env folder. Add '.' to the beginning of all. This will make your env files invisible to git while enabling them inside the project.
-
SSL setup: Trusted certificate generation is necessary for SSL. It can easily be done by using
mkcert
. Mkcert can easily be installed by usingbrew
. After the installation, please follow the steps given below:
$ mkcert -install
$ cd config/certificates
$ mkcert -key-file localhost-key.pem -cert-file localhost-crt.pem localhost host.minikube.internal 0.0.0.0 127.0.0.1 ::1
-
Run
pnpm install
. This command will automatically install all the dependencies for your apps & libs inside the monorepo recursively. -
Run
pnpm start
. After running this command, please wait for all docker containers to be up. Then navigate tohttps://localhost:10443
.
The monorepo consists of three different applications.
- client-app:
React
SPA for front-end face of the application. - api-customer-service: Written by using
NestJS
- Main interface of application REST api - api-worker: Written by using NestJS - Worker app)
These three applications can run at the same time (React-SPA, Rest-API, Worker) or client-app (React-SPA) can run only by itself while pointing its dependent URIs to the remote QA/DEV servers.
Here are some core development needs and the description of the default npm scripts to cover those needs:
-
pnpm start
: Starts all the applications inside the workspace while pointing all the data sources forapi-*
applications to your local machine. If DBs are empty in your local machine you might need to seed some data. -
pnpm start:client:qa
: Starts only the client-app while pointing all api references to remote deployedQA
REST api. -
pnpm start:client:dev
: Starts only the client-app while pointing all api references to remote deployedDEV
REST api. -
pnpm start:workspace:host
: Please seepnpm start
(alias for this command). -
pnpm start:workspace:qa
: Starts all the applications inside the workspace while pointing the data sources inside theapi-*
applications (databases etc.) toQA
. -
pnpm start:workspace:dev
: Starts all the applications inside the workspace while pointing the data sources inside theapi-*
applications (databases etc.) toDEV
. -
pnpm stop
: Stops all the containers gracefully. -
pnpm stop:prune
: Stops all the containers while pruning all unused containers and deleting all images. Dangling images which does not include a tag (<none>
) are also deleted by this command. -
pnpm nx:start
: Starts all the applications without the help of Docker containers. Not recommended since environment configs are tightly bound with the docker-compose flow. -
pnpm nx:build
: Builds all the applications inside the monorepo into the ./dist folder. This command should be used during deployment. -
pnpm nx:test
: Runs all the test suits for all applications inside the workspace. -
pnpm nx:test:affected
: Runs all the test suits for the affected applications by the recent changes. NX handles the comparison in between the HEAD of the current branch to the target branch where PR has been opened.
Run nx g @nx/react:lib my-lib
to generate a library.
You can also use any of the plugins above to generate libraries as well.
Libraries are shareable across libraries and applications. They can be imported from @highhammer/mylib
.
Run nx g @nx/react:component my-component --project=client-app
to generate a new component.
Run nx graph
to see a diagram of the dependencies of your projects.
Visit the Nx Documentation to learn more.