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…