foyzulkarim / mernboilerplate-antd

A MERN boilerplate repository using Antd-Pro with RBAC feature, following all production best practices.

Welcome to the RBAC MERN Boilerplate project

A complete (Work in progress now) MERN boilerplate repository with RBAC feature, following all production best practices.

In this repository I will keep adding the production best practices we should follow in a MERN (MongoDB, Express.js, React.js, and Node.js) project. Also for better UX I am using Antd Pro for the UI. May be later I will use MUI as well.

Below are the sample of a sample list page:

Technology stack

As the name suggests, this repository is built on top of Express.js and React.js, however in the implementation detail, we will find other supporting technologies as well.

Client side

• React - A JavaScript library for building user interfaces
• Ant Design Pro - A design system for enterprise-level products. Create an efficient and enjoyable work experience
• Testing Library - React Testing Library
• Umi Request - HTTP client for the executing HTTP request from browser to server.

Server side

• Node.js - evented I/O for the backend
• Express.js - Fast, unopinionated, minimalist web framework for Node.js
• MongoDB - The application data platform for NoSQL databases
• Mongoose - mongoose
• Swagger - Swagger (Not done yet)
• Jest - JavaScript testing framework
• Super Test - Super test API testing framework

Details frameworks and packages can be found in the package.json files in server and client directory.

Running the application

This project can be run basically in two ways. One is using docker, other way is to run manually via vscode.

Docker

Depending on the MongoDB hosting option, we choose the appropriate docker-compose file.

Docker compose files

Currently we have two docker-compose files:

• docker-compose.mongocloud.yml - MongoDB.com hosted cluster
• docker-compose.yml - Local MongoDB container

Notes

1. We need to change the MONGODB_CLOUD_URL in docker-compose.mongocloud.yml to the appropriate MongoDB URL.
2. We need to change the REACT_APP_API_URL in docker-compose.yml to the appropriate API URL. If we want to expose our client to the internet, we need to change the REACT_APP_API_URL to the appropriate API URL. Otherwise keep REACT_APP_API_URL as http://localhost:8002.

Run docker-compose commands

It is expected that the machine must have docker and docker-compose installed. Go to the root of the repository and execute appropriate commands. This will spin up the server and client containers along with the MongoDB container (if we are using local MongoDB server) inside of Docker environment.

Using docker containers with cloud hosted MongoDB

> cd project-root
> docker-compose -f docker-compose.mongocloud.yml build
> docker-compose -f docker-compose.mongocloud.yml up

Using docker containers with local MongoDB

> cd project-root
> docker-compose build
> docker-compose up

The client and server both are up and running and we should see the following screen if we navigate to the client url.

• seed data Go inside of the docker container and execute below commands. These will seed the database with roles, users and products data.

  docker exec -it appserver bash
  npm run db:seed
  npm run db:migrate

  You should see the following output:

  

  

  You should be now login to the application and see the products list.

Visual Studio Code

Prerequisites

• Node.js : To run npm packages
• MongoDB : As a database for the application

Steps

• To run via vscode, we should run the server and client side projects separately, and also make sure mongodb is up and running.

• Create a .env file inside of the server directory. Add the below entries or change accordingly. You can follow the .env.sample file to see the format.

  DB_HOST=localhost
  DB_PORT=27017
  DB_NAME=appdb
  JWT_SECRET=secret
  JWT_EXPIRES_IN=3600
  PORT=5000
  IS_MONGODB_CLOUD_URL=false
  MONGODB_CLOUD_URL=mongodb+srv:// <USER >: <PASSWORD >@cluster0.abcd.mongodb.net/myFirstDatabase?retryWrites=true
  

Server commands

We assume we run the MongoDB in the docker container.

cd server
npm i
npm run db:up
npm start

Client commands

cd client-pro
nvm use --lts
yarn
yarn start

Data seeding

To seed the database, we need to run the following commands in the docker container. You can run these commands in the terminal as well if you are running the server and client outside of the docker environment. I assume we are running appserver in the docker container.

docker exec -it appserver bash
npm run db:seed
npm run db:migrate

You should be able to see the username and password in the /server/setup/users.json file.

Permission management ui

I have introduced a permission management ui for the application. Sample image is given below.

Centralized log to Sentry.io

We can also send the logs to sentry.io. To use this feature, we need to add the dsn entry into client/src/env.config.js. Setup snippet is like below in index.js file

Sentry.init({
  dsn: Config.dsn,
  integrations: [new Integrations.BrowserTracing()],
  tracesSampleRate: 1.0,
});

Test server API (NOT DONE YET)

To view the api, open your browser and visit http://localhost:5000/api-docs Ideally we should add all of the API endpoints into the swagger, but for the demo purpose, we only added Products API endpoint.
To test the APIs, we can reuse the postman collection. Open docs/rbac-mern-boilerplate.postman_collection.json into Postman and you should see the endpoints with appropriate payloads.

Scripts

Project	Command	Task
root	npm run build	Builds the containers
root	npm run start	Start the projects and database in docker containers
root	docker exec -it appserver /bin/sh then npm run db:seed	Executes seed products inside container
server	npm i	Install server side dependencies
server	npm run db:up	Start the database in a docker container
server	npm run test	Execute tests using jest
client	npm i	Install client side dependencies
client	npm run start	Start the react app
client	npm run build	Build the react app in production mode
client	npm run test	Execute tests using Testing Library

Types of testing

In this repository, we have included both unit testing and integration testing. For now, the code coverage is very low, but we are working on it to make it more than 90% somewhere in the future

Client side

• We incorporated only unit tests in client side, and mock all the externals dependencies like localStorage and axios.

To run the tests, we can run npm run test command.

Server side

• Integration testing: We have integrated the Jest as the testing library, and we have added supertest and mongodb-memory-server packages to make the integration testing easier.
• Unit testing: We have used Jest to test the service layers and mock the external dependencies like MongoDB.

To run the tests, we can run npm run test command.

License

This project is MIT licensed.

Contribution

For now, I am not taking any community contritutions in terms of code. But if you have any suggestions or you found any bugs, please feel free to open an issue or a pull request.

On the other hand, if you want to know something, or want to start a discussion about this project, please start a discussion in our GitHub's discussion board.

Tutorials about how to build or use this project

I have been screen recording the coding steps of this project. You can find the videos in the YouTube playlist. These videos are only in Bangla, but I am happy to take special dedicated+paid sessions in English for international intersted audience. Feel free to reach out to me at [email protected] for any kind of help.

Thanks. Cheers.

mernboilerplate-antd's Issues

customer\service.js unused declared/assign, console.log fix

customer\service.js unused declared/assign, console.log fix

Remove `console.log` from `seed-products.js`

Remove console.log from seed-products.js file

Eslint and prettier setup

Since this is a starter application, would be helpful if there's code formatting rules aka prettier and linting with eslint.

customer\controller.js async arrow function fix

customer\controller.js async arrow function fix.

`customer-controller.js` Expected to return a value at the end of async arrow function

Error

Fix

const getByIdHandler = async (req, res, next) => {
  try {
    const { id } = req.params;
    const item = await getById(id);
    if (item) {
      res.status(200).send(item);
      return;
    }
    throw new NotFound(`Customer not found by the id: ${id}`);
  } catch (error) {
    next(error, req, res);
  }
};

Pls upgrade client boilerplate code to react-router v6

This boilerplate is the most comprehensive and production quality boilerplates on Github and so has set high expectations for everyone. I have recommended this boilerplate to many guys.

Few suggestions:

1. Pls upgrade to react-router v6. This will simplify boilerplate by some factor.
2. Moment.js has been deprecated in favor of new Intl API. You can also use React Intl npm package.
3. More descriptive and explainatory comments in server side code.

fix eslint error to `product-service.test.js`

fix eslint error to product-service.test.js.

`ValidationError: Product validation failed` error when running `npm run db:seed`

When I run npm run db:seed to seed the database, it is giving me below error.

You can get hits how to solve this in this video: https://youtu.be/UhXjemzbNSs?t=1192

Full terminal output:

> [email protected] db:seed /Users/foyzul/Documents/foyzul/github/rbac-mern-boilerplate/server
> node ./setup/seed-products.js

Seed starting
mongodb://localhost:27017/appdb
Seed finished
(node:32458) DeprecationWarning: collection.ensureIndex is deprecated. Use createIndexes instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
Database connection established
/Users/foyzul/Documents/foyzul/github/rbac-mern-boilerplate/server/node_modules/mongoose/lib/document.js:2760
    this.$__.validationError = new ValidationError(this);
                               ^

ValidationError: Product validation failed: size: Path `size` is required., expiryDate: Path `expiryDate` is required., manufacturingDate: Path `manufacturingDate` is required., description: Path `description` is required.
    at model.Document.invalidate (/Users/foyzul/Documents/foyzul/github/rbac-mern-boilerplate/server/node_modules/mongoose/lib/document.js:2760:32)
    at /Users/foyzul/Documents/foyzul/github/rbac-mern-boilerplate/server/node_modules/mongoose/lib/document.js:2552:17
    at /Users/foyzul/Documents/foyzul/github/rbac-mern-boilerplate/server/node_modules/mongoose/lib/schematype.js:1273:9
    at processTicksAndRejections (node:internal/process/task_queues:78:11)
    at runNextTicks (node:internal/process/task_queues:65:3)
    at processImmediate (node:internal/timers:437:9) {
  errors: {
    size: ValidatorError: Path `size` is required.
        at validate (/Users/foyzul/Documents/foyzul/github/rbac-mern-boilerplate/server/node_modules/mongoose/lib/schematype.js:1270:13)
        at /Users/foyzul/Documents/foyzul/github/rbac-mern-boilerplate/server/node_modules/mongoose/lib/schematype.js:1253:7
        at Array.forEach (<anonymous>)
        at SchemaNumber.SchemaType.doValidate (/Users/foyzul/Documents/foyzul/github/rbac-mern-boilerplate/server/node_modules/mongoose/lib/schematype.js:1198:14)
        at /Users/foyzul/Documents/foyzul/github/rbac-mern-boilerplate/server/node_modules/mongoose/lib/document.js:2545:18
        at processTicksAndRejections (node:internal/process/task_queues:78:11)
        at runNextTicks (node:internal/process/task_queues:65:3)
        at processImmediate (node:internal/timers:437:9) {
      properties: {
        validator: [Function (anonymous)],
        message: 'Path `size` is required.',
        type: 'required',
        path: 'size',
        value: undefined
      },
      kind: 'required',
      path: 'size',
      value: undefined,
      reason: undefined,
      [Symbol(mongoose:validatorError)]: true
    },
    expiryDate: ValidatorError: Path `expiryDate` is required.
        at validate (/Users/foyzul/Documents/foyzul/github/rbac-mern-boilerplate/server/node_modules/mongoose/lib/schematype.js:1270:13)
        at /Users/foyzul/Documents/foyzul/github/rbac-mern-boilerplate/server/node_modules/mongoose/lib/schematype.js:1253:7
        at Array.forEach (<anonymous>)
        at SchemaDate.SchemaType.doValidate (/Users/foyzul/Documents/foyzul/github/rbac-mern-boilerplate/server/node_modules/mongoose/lib/schematype.js:1198:14)
        at /Users/foyzul/Documents/foyzul/github/rbac-mern-boilerplate/server/node_modules/mongoose/lib/document.js:2545:18
        at processTicksAndRejections (node:internal/process/task_queues:78:11)
        at runNextTicks (node:internal/process/task_queues:65:3)
        at processImmediate (node:internal/timers:437:9) {
      properties: {
        validator: [Function (anonymous)],
        message: 'Path `expiryDate` is required.',
        type: 'required',
        path: 'expiryDate',
        value: undefined
      },
      kind: 'required',
      path: 'expiryDate',
      value: undefined,
      reason: undefined,
      [Symbol(mongoose:validatorError)]: true
    },
    manufacturingDate: ValidatorError: Path `manufacturingDate` is required.
        at validate (/Users/foyzul/Documents/foyzul/github/rbac-mern-boilerplate/server/node_modules/mongoose/lib/schematype.js:1270:13)
        at /Users/foyzul/Documents/foyzul/github/rbac-mern-boilerplate/server/node_modules/mongoose/lib/schematype.js:1253:7
        at Array.forEach (<anonymous>)
        at SchemaDate.SchemaType.doValidate (/Users/foyzul/Documents/foyzul/github/rbac-mern-boilerplate/server/node_modules/mongoose/lib/schematype.js:1198:14)
        at /Users/foyzul/Documents/foyzul/github/rbac-mern-boilerplate/server/node_modules/mongoose/lib/document.js:2545:18
        at processTicksAndRejections (node:internal/process/task_queues:78:11)
        at runNextTicks (node:internal/process/task_queues:65:3)
        at processImmediate (node:internal/timers:437:9) {
      properties: {
        validator: [Function (anonymous)],
        message: 'Path `manufacturingDate` is required.',
        type: 'required',
        path: 'manufacturingDate',
        value: undefined
      },
      kind: 'required',
      path: 'manufacturingDate',
      value: undefined,
      reason: undefined,
      [Symbol(mongoose:validatorError)]: true
    },
    description: ValidatorError: Path `description` is required.
        at validate (/Users/foyzul/Documents/foyzul/github/rbac-mern-boilerplate/server/node_modules/mongoose/lib/schematype.js:1270:13)
        at /Users/foyzul/Documents/foyzul/github/rbac-mern-boilerplate/server/node_modules/mongoose/lib/schematype.js:1253:7
        at Array.forEach (<anonymous>)
        at SchemaString.SchemaType.doValidate (/Users/foyzul/Documents/foyzul/github/rbac-mern-boilerplate/server/node_modules/mongoose/lib/schematype.js:1198:14)
        at /Users/foyzul/Documents/foyzul/github/rbac-mern-boilerplate/server/node_modules/mongoose/lib/document.js:2545:18
        at processTicksAndRejections (node:internal/process/task_queues:78:11)
        at runNextTicks (node:internal/process/task_queues:65:3)
        at processImmediate (node:internal/timers:437:9) {
      properties: {
        validator: [Function (anonymous)],
        message: 'Path `description` is required.',
        type: 'required',
        path: 'description',
        value: undefined
      },
      kind: 'required',
      path: 'description',
      value: undefined,
      reason: undefined,
      [Symbol(mongoose:validatorError)]: true
    }
  },
  _message: 'Product validation failed'
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] db:seed: `node ./setup/seed-products.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] db:seed script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/foyzul/.npm/_logs/2021-09-21T03_52_39_643Z-debug.log

`product-service.js` Missing Radix Param, nested ternary, expected '===', console.log

Error

DB seed for users and role

Dear Foyzul Karim
please
create seed for users and roles
Thanks.

Your name in Arabic
Foyzul : فيض الله
means : God's gift or God's Excess Giving or Generous of God
Karim : كريم
means :Generous

Language problem in whole website

I think this is a small bug on this website, it is mainly a language translation problem.

Customer module simple CRUD

Task description and acceptance criteria

Complete the CRUD operation for Customer model.
The model will have following schema
name: { type: String, required: true }, phoneNumber: { type: String, required: true, unique: true}, email: { type: String, required: true, unique: true}, streetAddress: { type: String, required: true }, area: { type: String, required: true }, city: { type: String, required: true }, state: { type: String, required: true }, postcode: { type: String, required: true }, country : { type: String, required: true },

• Use modular architecture in server
• Email should be valid format and unique (must be checked before calling save to server)
• Follow existing work patterns (user or permission module works)
• no need to apply authorization middleware. We will do authorization in different task

Special note for devs:

• I Will update this issue if needed. Please drop a comment if you are unclear about anything
• You can include your friends in your forked repository so that you can work faster and can send the PR together

Can´t Login in frontend

Hi Foyzul,

First of all, thank you very much for sharing your work! I am really interested in learning from your mernboilerplate-antd project. Currently, I have MongoDB, backend, and frontend up and running. However, I haven't been able to figure out how to log in to the frontend using the default credentials. I haven't encountered any errors on either the backend or frontend. I have already checked the database, and the three default users (admin, user, superadmin) with encoded passwords are present. I'm not sure where the issue could be with the login process.

Here is a screenshot of the login page for reference:

I would greatly appreciate any comments or suggestions you may have.

Kind regards,