• Stars
    star
    468
  • Rank 93,767 (Top 2 %)
  • Language
    JavaScript
  • Created over 4 years ago
  • Updated 7 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Full stack boilerplate with React, Redux, Express, Mongoose, Passport Local, JWT, Facebook and Google OAuth out of the box.

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.

Demo

  • 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.

Features

  • 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

Installation

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

$ git clone https://github.com/nemanjam/mern-boilerplate.git
$ cd mern-boilerplate

Server

.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.

#db
MONGO_URI_DEV=mongodb://localhost:27017/mernboilerplate
MONGO_URI_PROD=

#google
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
GOOGLE_CALLBACK_URL=/auth/google/callback

#facebook
FACEBOOK_APP_ID=
FACEBOOK_SECRET=
FACEBOOK_CALLBACK_URL=/auth/facebook/callback

#jwt
JWT_SECRET_DEV=secret
JWT_SECRET_PROD=

#site urls
CLIENT_URL_DEV=https://localhost:3000
CLIENT_URL_PROD=https://mern-boilerplate-demo.herokuapp.com
SERVER_URL_DEV=https://localhost:5000
SERVER_URL_PROD=https://mern-boilerplate-demo.herokuapp.com

#img folder path
IMAGES_FOLDER_PATH=/public/images/

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

Client

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.

Screenshots

Screenshot1

Screenshot2

Screenshot3

Screenshot4

Screenshot5

Screenshot6

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 https://git.heroku.com/my-own-app-name.git
$ 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.

MONGO_URI_PROD=mongodb+srv://<your-username-here>:<your-password-here>@cluster0-abcd.mongodb.net/test?retryWrites=true&w=majority

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

Development

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",

Production

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 =
  "https://my-own-app.herokuapp.com/auth/facebook";
export const GOOGLE_AUTH_LINK = "https://my-own-app.herokuapp.com/auth/google";

References

Licence

MIT

More Repositories

1

nextjs-prisma-boilerplate

Full stack boilerplate with Next.js, Prisma, Tailwind, TypeScript, Docker, Postgres, documentation, frontend and backend unit and integration tests with Jest, Cypress end-to-end tests, Github Actions CI/CD workflows, and production deployment with Traefik and Docker.
TypeScript
635
star
2

audio-twitter

Twitter clone with audio messages made with React, Apollo and MongoDB.
JavaScript
72
star
3

rn-chat

Chat app made with React Native, NativeBase, Apollo Hooks and Sequelize.
JavaScript
40
star
4

redux-ecommerce

Ecommerce website with React Hooks and Redux.
JavaScript
34
star
5

bookmarks

Links to useful coding resources.
19
star
6

nemanjam.github.io

Developer blog website built with Astro and Tailwind.
MDX
17
star
7

next-auth-custom-provider-demo

Custom Next-auth OAuth provider for Square with Prisma and Postgres.
TypeScript
15
star
8

reddit-unread-comments

Chrome/Firefox extension for easier tracking of new comments on Reddit. Free, open source, privacy aware.
TypeScript
13
star
9

mern-docker

Dockerized MERN boilerplate with CRUD Todo app.
JavaScript
12
star
10

traefik-proxy

Production deployment for nextjs-prisma-boilerplate app.
HTML
6
star
11

react-material-passport

Authentication boilerplate with React, Material-UI and Local, Facebook, Google and JWT Passport strategies.
JavaScript
6
star
12

curious-cat

Curiouscat clone in Material-UI.
JavaScript
3
star
13

nextjs-prisma-blog

TypeScript
2
star
14

mern-docker-prod

Shell
2
star
15

my-blogster

Astro
2
star
16

multistep-form

Multistep form using Next.js 14 and server actions.
TypeScript
1
star
17

rathole-server

1
star
18

react-ecommerce

JavaScript
1
star
19

grid-gallery

Image search with masonry grid gallery in React.
JavaScript
1
star