Monthly Archives: October 2017

Creating my ideal MERN Stack

This is going to change A LOT over time

Setup Express

npm install -g express-generator
npm install -g nodemon
express express-backend --view=hbs --css=sass
cd express-backend
npm install

Open the folder in a code editor (I’m using VSCode right now. It’s pretty nice!)

  • In /bin/www, change “start”: “node ./bin/www” to “start”: “nodemon ./bin/www”
  • In /bin/www, change var port = normalizePort(process.env.PORT || ‘3000‘); to var port = normalizePort(process.env.PORT || ‘3001‘);
  • In /app.js, choose your sass syntax : indentedSyntax: false, // true = .sass and false = .scss

Setup React

From inside the express-backend

npm install -g create-react-app
create-react-app client
  • In /client/package.json, append after the end of the “scripts” block
    } // end of "scripts"
    ,"proxy": "http://localhost:3001"
  • Now you are ready to start react.  It will talk to your Express route APIs by using fetch or axios, as if the data was local, thank to the “proxy” we added! In another command window to go to the /client folder and type:
npm start

Note: This process is roughly based off this article by Dave Ceddia. Thanks Dave!

Setup MongoDB

  • Download Mongo Community version : the engine
  • Download Mongo Compass : the database visualizer
  • Install them both : use the defaults
  • (WINDOWS) Add Mongo \bin folder to your path
  • Add the following to you package.json file in your “express-backend” folder:
"mongo-mac": "mkdir mongo-db; mongod --dbpath mongo-db",
"mongo-win": "md mongo-db & mongod.exe --dbpath mongo-db"
  • Install mongoose in /express-backend with:
cd express-backend
npm install mongoose --save
npm install axios --save
  • If you want to replace any fetch calls with axios in react, you can use the following conversion style:
  componentDidMount() {
    /*fetch('/users')
      .then(res => res.json())
      .then(users => this.setState({ users }));
    */
    axios.get('/users')
      .then(res => this.setState({ users : res.data }))
      .catch(error => console.log(error));
  }
npm install react-router-dom --save

 

more to come…

Mongo-Express-React-Node : My MERN Stack

Prerequisites (for Windows)

npm install -g node-gyp
(as administrator) npm install --global --production windows-build-tools

Node

  • Axios : Like fetch() but it works everywhere, processes your json and detect 400 errors
npm install --save axios

Express

  • express-generator : easy setup of express environment
  • body-parser : parse the incoming requests bodies for the info we are sending (allows access to req.body)
  • nodemon : watches our server.js file for changes, then restarts it.
  • mongoose : Allows easy interaction with a MongoDB
npm install -g express-generator
npm install -g nodemon
npm install express body-parser nodemon mongoose --save

React

  • create-react-app : My go-to boilerplate
  • Axios : (Yes here too!)
  • StoryBook : Author your components in a standalone environment
  • Jest : “delightful” javascript testing

Redux

MobX

I haven’t tried MobX yet, but I am eager to see what it can do.

Mongo

  • Compass – Essential for visualizing your data and tables