Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/amazingandyyy/mern
🌐 MERN stack 2.0 - MongoDB, Express, React/Redux, Node
https://github.com/amazingandyyy/mern
boilerplate boilerplate-template express expressjs fullstack jwt mern mern-boilerplate mern-stack mongodb nodejs react redux starter-kit
Last synced: 26 days ago
JSON representation
🌐 MERN stack 2.0 - MongoDB, Express, React/Redux, Node
- Host: GitHub
- URL: https://github.com/amazingandyyy/mern
- Owner: amazingandyyy
- License: mit
- Created: 2016-12-26T03:28:04.000Z (almost 8 years ago)
- Default Branch: main
- Last Pushed: 2024-07-15T17:47:39.000Z (4 months ago)
- Last Synced: 2024-09-27T18:23:02.510Z (about 1 month ago)
- Topics: boilerplate, boilerplate-template, express, expressjs, fullstack, jwt, mern, mern-boilerplate, mern-stack, mongodb, nodejs, react, redux, starter-kit
- Language: JavaScript
- Homepage: https://amazingandyyy.com/mern
- Size: 34.4 MB
- Stars: 510
- Watchers: 18
- Forks: 285
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
🌐 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
```terminal
$ git clone https://github.com/amazingandyyy/mern.git
$ yarn # or npm i
```
## project structure
```terminal
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)
## Prerequisites
- [MongoDB](https://gist.github.com/nrollr/9f523ae17ecdbb50311980503409aeb3)
- [Node](https://nodejs.org/en/download/) ^10.0.0
- [npm](https://nodejs.org/en/download/package-manager/)
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)
```terminal
$ 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
```
## 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)
```terminal
// in the root level
$ cd server
$ echo "JWT_SECRET=YOUR_JWT_SECRET" >> src/.env
```
### Start
```terminal
$ 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](https://dashboard.heroku.com/)
```terminal
$ npm i -g heroku
$ heroku login
...
$ heroku create
$ npm run heroku:add
// 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//mern
$ npm run deploy:heroku
```
### After creating heroku
if using webpack:
remember to update the file of [client/webpack.prod.js](https://github.com/amazingandyyy/mern/blob/master/client/webpack.prod.js)
```javascript
'API_URI': JSON.stringify('https://your-super-amazing-heroku-app.herokuapp.com')
```
if using parcel
remember to update the file of [client/.env.production](https://github.com/amazingandyyy/mern/blob/master/client/.env.production.js)
```
REACT_APP_API_URI=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 can sign in or sign up
After signing in user can go to account route and make request to token-protected API endpoint
## Standard
[](https://github.com/standard/standard)
## BUGs or comments
[Create new Issues](https://github.com/amazingandyyy/mern/issues) (preferred)
Email Me: [email protected] (welcome, say hi)
## Author
[Amazingandyyy](https://amazingandyyy.com)
I recently launch my monthly mentorship program, feel free to reach out and see what we can grow together:
## Join the growing community
[](https://star-history.com/#amazingandyyy/mern&Date)
### License
[MIT](https://github.com/amazingandyyy/mern/blob/master/LICENSE)