Skip to content
🌐 MERN stack 2.0 - MongoDB, Express, React/Redux, Node
Branch: master
Clone or download
Latest commit 9ca74b8 May 14, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci change name May 14, 2019
.github/ISSUE_TEMPLATE Update issue templates Mar 20, 2019
client change name May 14, 2019
docs update build May 14, 2019
server change name May 14, 2019
.eslintrc
.gitignore update script Aug 8, 2018
.travis.yml add travis Mar 20, 2019
CONTRIBUTING.md Create CONTRIBUTING.md Mar 22, 2019
LICENSE Update LICENSE Mar 20, 2019
README.md change name May 14, 2019
package-lock.json change name May 14, 2019
package.json change name May 14, 2019

README.md

🌐 MERN Stack

MongoDB, Expressjs, React/Redux, Nodejs

MERN is a fullstack implementation in MongoDB, Expressjs, React/Redux, Nodejs.

MERN stack is the idea of using Javascript/Node for fullstack web development.

clone or download

$ git clone https://github.com/amazingandyyy/mern.git
$ npm i

project structure

LICENSE
package.json
server/
   package.json
   .env (to create .env, check [prepare your secret session])
client/
   package.json
...

Usage (run fullstack app on your machine)

Prerequirements

notice, you need client and server runs concurrently in different terminal session, in order to make them talk to each other

Client-side usage(PORT: 3000)

$ cd client   // go to client folder
$ npm i       // npm install pacakges
$ npm run dev // run it locally

// deployment for client app
$ npm run build // this will compile the react code using webpack and generate a folder called docs in the root level
$ npm run start // this will run the files in docs, this behavior is exactly the same how gh-pages will run your static site

Server-side usage(PORT: 8000)

Prepare your secret

run the script at the first level:

(You need to add a JWT_SECRET in .env to connect to MongoDB)

// in the root level
$ echo "JWT_SECRET=YOUR_JWT_SECRET" >> ./server/src/.env

Start

$ cd server   // go to server folder
$ npm i       // npm install pacakges
$ npm run dev // run it locally
$ npm run build // this will build the server code to es5 js codes and generate a dist file

Deploy Server to Heroku

$ npm i -g heroku
$ heroku login
...
$ heroku create
$ npm run heroku:add <your-super-amazing-heroku-app>
// remember to run this command in the root level, not the server level, so if you follow the documentation along, you may need to do `cd ..`
$ pwd
/Users/<your-name>/mern
$ npm run deploy:heroku

After creating heroku

remember to update the file of client/webpack.prod.js

 'API_URI': JSON.stringify('https://your-super-amazing-heroku-app.herokuapp.com')

Dependencies(tech-stacks)

Client-side Server-side
axios: ^0.15.3 bcrypt-nodejs: ^0.0.3
babel-preset-stage-1: ^6.1.18 body-parser: ^1.15.2
lodash: ^3.10.1 cors: ^2.8.1
react: ^16.2.0 dotenv: ^2.0.0
react-dom: ^16.2.0 express: ^4.14.0
react-redux: ^4.0.0 jwt-simple: ^0.5.1
react-router-dom: ^4.2.2 mongoose: ^4.7.4
redux: ^3.7.2 morgan: ^1.7.0
redux-thunk: ^2.1.0

Screenshots of this project

User visit public and Home page User visit public and Home page

User can sign in or sign up User can sign in or sign up

After signing in user can go to account route and make request to token-protected API endpoint After signing in user can go to account route

Standard

JavaScript Style Guide

BUGs or comments

Create new Issues (preferred)

Email Me: amazingandyyy@gmail.com (welcome, say hi)

Author

Amazingandyyy

License

MIT

You can’t perform that action at this time.