Mern Boilerplate

Full stack boilerplate with React, Redux, Express, Mongoose, Passport Local, JWT, Facebook and Google OAuth out of the box.
Alternatives To Mern Boilerplate
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Api Security Checklist21,061
3 months ago12mit
Checklist of the most important security countermeasures when designing, testing, and releasing your API
Next Auth18,934212266 hours ago650July 25, 2023303iscTypeScript
Authentication for the Web.
Awesome Go Cn5,896
7 months ago10
Go 资源大全中文版, 内容包括:Web框架、模板引擎、表单、身份认证、数据库、ORM框架、图片处理、文本处理、自然语言处理、机器学习、日志、代码分析、教程和(电子)书等。由「开源前哨」和「Go开发大全」微信团队维护。
Awesome Go Cn4,374
2 days ago13mit
一个很棒的Go框架、库和软件的中文收录大全。:alarm_clock:脚本定期与英文文档同步,包含了各工程star数/最近更新时间,助您快速发现优质项目。Awesome Go~
Microservices Platform4,111
4 months ago10apache-2.0Java
Authlib3,9581622166 days ago39June 25, 202360bsd-3-clausePython
The ultimate Python library in building OAuth, OpenID Connect clients and servers. JWS,JWE,JWK,JWA,JWT included.
4 months ago8gpl-3.0Java
基于Spring Boot 2.x的一站式前后端分离快速开发平台XBoot 微信小程序+Uniapp 前端:Vue+iView Admin 后端:Spring Boot 2.x/Spring Security/JWT/JPA+Mybatis-Plus/Redis/Elasticsearch/Activiti 分布式限流/同步锁/验证码/SnowFlake雪花算法ID 动态权限 数据权限 工作流 代码生成 定时任务 社交账号 短信登录 单点登录 OAuth2开放平台 客服机器人 数据大屏 暗黑模式
Cli3,2591214 days ago313July 18, 2023123apache-2.0Go
🧰 A zero trust swiss army knife for working with X509, OAuth, JWT, OATH OTP, etc.
Oauth22,8741034 months ago17February 03, 202387mitGo
OAuth 2.0 server library for the Go programming language.
Node Oidc Provider2,808259710 days ago329May 30, 20231mitJavaScript
OpenID Certified™ OAuth 2.0 Authorization Server implementation for Node.js
Alternatives To Mern Boilerplate
Select To Compare

Alternative Project Comparisons

MERN Boilerplate

This is full stack boilerplate with React, Redux, Express, Mongoose and Passport. Skip the tedious part and get straight to developing your app.


  • Live demo is available here: Demo

Deployment with Docker (2023. update)

Since Heroku is no longer free I made Docker production deployment that you can use on any Linux VPS.


  • Server

    • User and Message models with 1:N relation
    • Full CRUD REST API operations for both Message and User models
    • Passport authentication with local email/password, Facebook and Google OAuth strategies and JWT protected APIs
    • User and Admin roles
    • NodeJS server with Babel for new JS syntax unified with React client
    • async/await syntax across whole app
    • Joi server side validation of user's input
    • Single .env file configuration
    • Image upload with Multer
    • Database seed
  • Client

    • React client with functional components and Hooks
    • Redux state management with Thunk for async actions
    • CSS agnostic, so you don't waste your time replacing my CSS framework with yours
    • Home, Users, Profile, Admin, Notfound, Login and Register pages
    • Protected routes with Higher order components
    • Different views for unauthenticated, authenticated and admin user
    • Edit/Delete forms for Message and User with Formik and Yup validation
    • Admin has privileges to edit and delete other users and their messages
    • Layout component, so you can have pages without Navbar
    • Loading states with Loader component
    • Single config file within /constants folder


Read on on how to set up this for development. Clone the repo.

$ git clone
$ cd mern-boilerplate


.env file

Rename .env.example to .env and fill in database connection strings, Google and Facebook tokens, JWT secret and your client and server production URLs.





#site urls

#img folder path

Generate certificates

Facebook OAuth requires that your server runs on https in development as well, so you need to generate certificates. Go to /server/security folder and run this.

$ cd server/security
$ openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout cert.key -out cert.pem -config req.cnf -sha256

Install dependencies

$ cd server
$ npm install

Run the server

You are good to go, server will be available on https://localhost:5000

$ npm run server


Just install the dependencies and run the dev server. App will load on https://localhost:3000.

$ cd client
$ npm install
$ npm start

That's it as far for development setup. For production check the Deployment on Heroku section.








Deployment on Heroku

Push to Heroku

This project is already all set up for deployment on Heroku, you just need to create Heroku application add heroku remote to this repo and push it to heroku origin.

$ heroku login
$ heroku create my-own-app-name
$ git remote add heroku
$ git push heroku master
$ heroku open

Database setup

But before that you need MongoDB database, so go to MongoDB Atlas, create cluster, whitelist all IPs and get database URL. Set that URL in .env file as MONGO_URI_PROD.


If you don't insert environment variables in Heroku manually via web interface or console you'll need to remove .env file from server/.gitignore and push it to Heroku. Never push .env file to development repo though.

#.env #comment out .env file

In the following section you can read detailed instructions about Heroku deployment process.

Server setup


Server uses Babel so that we can use the same newer JavaScript syntax like the one used on the Client. In development we are passing server/src/index.js file to babel-node executable along with nodemon daemon. We run that with npm run server script.

"server": "nodemon --exec babel-node src/index.js",


That is fine for development, we compile the source on every run but for production we want to avoid that and to compile and build code once to JavaScript version which Node.JS can execute. So we take all the code from /server/src folder compile it and put the output into /server/build destination folder. -d is short for destination, and -s flag is for sourcemaps for debugging. We make that into build-babel script.

"build-babel": "babel -d ./build ./src -s",

We also need to delete and make build folder on every deployment, so we do that with this simple script.

"clean": "rm -rf build && mkdir build",

Now we have everything to build our server code. We do that by calling 2 last scripts.

"build": "npm run clean && npm run build-babel",

Now we just need to call build script and run compiled file with node. Make sure Babel is in the production dependencies in the server/package.json or you'll get "babel is not defined" error on Heroku.

"start-prod": "npm run build && node ./build/index.js",

Running server on Heroku

Our server is now all set up, all we need is to call start-prod script. Heroku infers runtime he needs to run the application by the type of dependencies file in the root folder, so for Node.JS we need another package.json. Heroku will call start script after building phase so we just need to pass our start-prod script to spin up the server with the --prefix server where server is folder in which package.json with that script is located.

"start": "npm run start-prod --prefix server",

Installing dependencies

Before all this happens Heroku needs to install the dependencies for both server and client, heroku-postbuild script is meant for that. NPM_CONFIG_PRODUCTION=false variable is there to disable production environment while dependencies are being installed. Again --prefix flag is specifying the folder of the script being run. In this script we build our React client as well.

"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix server && npm install --prefix client && npm run build --prefix client"

Client Setup

Before you push to production you'll need to set your URLs in client/constants. That's it.

export const FACEBOOK_AUTH_LINK =
export const GOOGLE_AUTH_LINK = "";




Popular Oauth Projects
Popular Jwt Projects
Popular Security Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Full Stack
Redux Thunk
Facebook Login
Google Login