Installing Express in a MERN App

I thought that I would take the time to document this for myself as both times I did this previously I used different methods.  As Tony Horton likes to say in the P90x videos…

How do you know what to do if you don’t know what you did?

The following assumes that the project is separated into /client and /server folders.

1. 1.  Navigate to the /server folder
   2. Issue “yarn install” and accept the defaults

      

   3. Install Express

      

   4.   Create the initial server/index.js file.

      const express = require(‘express’);

      const path = require(‘path’);

      const publicPath = path.join(__dirname, ‘..\\..\\‘, ‘public’);

      module.exports = app => {

        app.use(express.static(publicPath)); // we will take the return value from express (a function);

        app.get(‘*’, (req, res) => {

          //necessary to handle routing issues

          res.sendFile(path.join(publicPath, ‘index.html’));

        });

      };
   5. Launch node (node server/index.js) and check the browser to verify that you get the expected result on localhost:5000
   6. Issue ‘node -v’ and ‘npm -v’ in order to get the corresponding versions of each
   7. Update server/package.json with the “engines”.  Use values from previous step.

       "engines": {
          "node": "15.5.0",
          "npm": "7.3.0"
        },

   8. Add the start command to server/package.json.  The “start” launches the express server where the routes are defined.

       "scripts": {
          "dev": "react-scripts start",
          "build": "react-scripts build",
          "start": "node server/index.js",

   9. Create server/.gitignore, include “node_modules” in it
   10. Create the connection to Mongo.  This will involve putting the key values into environment values and not committing the key values

       const keys = require('./config/keys');
       const mongoose = require('mongoose');
       mongoose.Promise = global.Promise;
       try {
         // Connect to the MongoDB cluster
         mongoose.connect(keys.mongoURI, { useNewUrlParser: true, useUnifiedTopology: true }, () =>
           console.log(' Mongoose is connected'),
         );
       } catch (e) {
         console.log('could not connect');
       }
        
       module.exports = { mongoURI: 'mongodb+srv://' + process.env.REACT_APP_MONGO_DB_USER + ':' +
       process.env.REACT_APP_MONGO_DB_PASSWORD + '@cluster0.hxitc.mongodb.net/test?retryWrites=true&w=majority', };

       This is from /server/config/keys.js.  This code figures out which environment file to use.

       switch (process.env.NODE_ENV) {
         case 'production':
           module.exports = require('./production');
           break;
         case 'development':
           module.exports = require('./development');
           break;
         case 'staging':
           module.exports = require('./staging');
           break;
         default:
           module.exports = require('./development');
           break;
       }

       And this is the server/config/development.js file that figures out which environment to use

       module.exports = {
         mongoURI:
           'mongodb+srv://' +
           process.env.REACT_APP_MONGO_DB_USER +
           ':' +
           process.env.REACT_APP_MONGO_DB_PASSWORD +
           '@cluster0.hxxxx.mongodb.net/penpal?retryWrites=true&w=majority',
       };