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.
$ git clone https://github.com/amazingandyyy/mern.git
$ yarn # or npm i
LICENSE
package.json
server/
package.json
.env (to create .env, check [prepare your secret session])
client/
package.json
...
notice, you need client and server runs concurrently in different terminal session, in order to make them talk to each other
$ cd client // go to client folder
$ yarn # or npm i // npm install packages
$ 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
run the script at the first level:
(You need to add a JWT_SECRET in .env to connect to MongoDB)
// in the root level
$ cd server
$ echo "JWT_SECRET=YOUR_JWT_SECRET" >> src/.env
$ cd server // go to server folder
$ npm i // npm install packages
$ 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
if using webpack: remember to update the file of client/webpack.prod.js
'API_URI': JSON.stringify('https://your-super-amazing-heroku-app.herokuapp.com')if using parcel remember to update the file of client/.env.production
REACT_APP_API_URI=https://your-super-amazing-heroku-app.herokuapp.com
| 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 |
User visit public and Home page
User can sign in or sign up
After signing in user can go to account route and make request to token-protected API endpoint
Create new Issues (preferred)
Email Me: [email protected] (welcome, say hi)
I recently launch my monthly mentorship program, feel free to reach out and see what we can grow together:
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent