MERN Boilerplate

React nicely featured (Babel, Webpack, Redux) App, with Node/Express Backend, and Mongo Database all within Docker's container

Installation • Usage • Social Media Login • How to use • Technologies • Sources and Related

Installation

Prerequisites

Install docker and docker-compose

Due to the large number of available platforms I would refer you to theclear, clean and well explained Docker website.

👇 Follow the links above 👇

	Install Docker

Usage

Generate SSL Certificate

To run this project with HTTPS, and use Facebook Login feature, you have to generate certificates. You can follow this tutorial, created by Daksh Shah :

	www.medium.freecodecamp.org/how-to-get-https-working-on-your-local-development-env...

$ mkdir -p MERN-Boilerplate/server/certs

And place your server.key, server.crt and server.csr under server/certs/

If you don't want to use HTTPS

• in server/server.js and client/src/containers/Login.js comment/uncomment

  //const server = http.createServer(app)
  const server = https.createServer(certOptions, app)
  const certOptions = {
      ...
  }
  
  //const API_URL = "http://localhost:8080"
  const API_URL = "https://localhost:8080"

• in client/config/webpack.base.config.js remove

  devServer: {
      https: true,
      [...]
  }

Want to use social media login ?

Refer to the Social Media Login chapter ✌️ 👇

Build Docker's containers with

$ docker-compose build

Launch Docker's containers with

$ docker-compose up

Open your favorite browser on

https://localhost:3000

And that's it, you can code 👍 🎉

This is what you should see 👇

Social Media Login

To use social media login, you have to follow few steps :

• Submit to a developper account on the following websites :

  • www.developers.facebook.com
  • www.developer.twitter.com/
  • www.console.developers.google.com/
  • www.instagram.com/developer/
  • www.github.com/settings/developers

• Get CLIENT_ID and CLIENT_SECRET and place them in a server/.env file as

  GOOGLE_KEY=''
  GOOGLE_SECRET=''

How to use

Architecture

.
├── client                   # Client sources
│   ├── config               # Webpack configuration files
│   ├── src                  # Sources files
│   │   ├── action           #
│   │   ├── reducers         # Redux configuration files
│   │   ├── store            #
│   │   ├── components       # React components
│   │   ├── containers       # React containers
│   │   └── stylesheets      # SASS Styles files
│   ├── .babelrc             # Babel configation file
│   └── Dockerfile           # Client Dockerfile
├── sever                    # Back-end sources
└── docker-compose.yml       # Docker Compose (client, backend, mongodb)

Client

Server

Technologies

• MongoDB Open Source Document Database

  

  For giant ideas

• Express Node.js web application framework

  

  Fast, unopinionated, minimalist web framework for Node.js

• React A JavaScript library for building user interfaces

  

  Declarative, efficient, and flexible

• Node.js JavaScript runtime built on Chrome's V8 JavaScript engine

  

  Designed to build scalable network applications

• Docker Enterprise Container Platform

  

  Protect your legacy, invest in your future

Sources and Related