MERN Boilerplate

MongoDB Express.js React.js Node.js

A Full MERN Stack Boilerplate for Web Apps. Includes a local authentication system using passport. User is given a simple profile with Full Name and Profile Picture. User is also able to reset password and username case.

NEW: For those of you who wish to separate the client and server into separate projects, I have created two repos that do just that! Check out MERN Client and MERN Server.

Requirements

• Operating System: MacOS or Linux
• Node.js (I recommend installing with NVM)
• Homebrew (to install MongoDB)

Quick Start

Setup

npm install

# Install MongoDB
brew tap mongodb/brew
brew install mongodb-community

Start the database

brew services start mongodb-community

for Development

Start the client

npm run start:client

Start the server

npm run start:server

for Production

npm run build
npm start:server

Other Commands

npm start
npm test
npm run lint
npm run lint:fix
npm run test:verbose
npm run test:coverage
npm run test:watch-client
npm run test:watch-server

Setup Instructions

Note: This is now a github template project. This makes copying the contents of the project into a new repo very simple.

To setup your own project, you will need to copy the contents of this project into a new repo. You will need to update the content in these files to names of your project and yourself:

• package.json: name, version, description, repository, author, bugs, homepage
• LICENSE: (update to your preferred license)
• client/index.html: description and title
• this README.md

This is also a good time to go through the included libraries to add or remove features that you want.

After this you can commit the files into a new repository and push up to your github. You can now start updating files in your client to begin working on your own project!

Features

• Webpack conveniently bundles your code for you.
• Babel lets you use ES6/7 features.
• CSS pre-processor setup for LESS and SASS lets you keep your styles clean and organized.
• ESLint helps you maintain a high level of code quality.
• Jest gives you a robust testing framework to make sure your code works.

Code Structure

- client
  - api
  - assets
    - images
    - icons
  - components
    - atoms
    - molecules
    - organisms
    - pages
    - environment
  - hooks
  - store
    - actions
    - reducers
    - thunks
    - tests
  - styles
  - utils
- server
  - config
  - database
  - routes
- scripts

Component Heirarchy:

Environment > Pages > Organisms > Molecules > Atoms

This is based on atomic design. Learn more about atomic design.

Technologies

React - View Library

Redux - State Manager

Webpack - Module Bundler

Express - Node Application Framework

MongoDB - Document Database

Mongoose - MongoDB Framework

Passport - Authentication Framework

React Notifications Component - Notification System

Bulma - CSS Framework

React Bulma Companion - Bulma Component Library

FontAwesome - Icons

Ramda - Functional Library

date-fns - Date Functions Library

SuperAgent - HTTP Request Library

ESLint - Code Linter

Jest - Testing Framework