A rough documentation of setting up MERN environment on a Fresh Centos 7 Server on Digital Ocean

gistfile1.md

Context

Reverse Proxy?

• Node and Apache are not mutually exclusive. Apache (or NGINX if preferred) can be set up as a reverse-proxy for the Node server. This means that requests would go to Apache first, then forwarded on to the Node server.
  • Reasoning for this can be found: https://linuxtogether.org/configuring-reverse-proxy-for-node-using-apache-mod-proxy/

Or just use Node

• We had the opportunity of setting up a fresh Digital Ocean server running CentOS 7, and opt'd for this for simplicity and for the fun experience of learning how to set up a fresh CentOS 7 Server to be used with the MERN stack.
• In our scenario, Node can listen on port 80 and we should be good to go...

List of Dependencies/Packages to download

VIM

• Vim is...
  • persistent, multi-level undo tree
  • extensive plugin system
  • support for hundreds of programming languages and file formats
  • powerful search and replace
  • integrates with many tools
• install with
  • sudo yum install vim
• More documentation here: https://www.digitalocean.com/community/tutorials/installing-and-using-the-vim-text-editor-on-a-cloud-server#installation

Wget

• sudo yum install wget

Git

• https://www.digitalocean.com/community/tutorials/how-to-install-git-on-centos-7
  • sudo yum install git
  • git --version

Node Installation (A lot of options... a lot of trial and error)

• See: https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-a-centos-7-server#install-node-from-the-epel-repository
  • This link shows how to do a bunch of the methods below, in detail.

Option 1: Node from EPEL

• I first attempted to install Node from EPEL Release, this seemed the most standard for Centos. Unfortunately, I ran into a few hurdles getting the latest versions of NPM and Node installed from EPEL. (See NodeSource Github Issues)
• sudo yum install epel-release
• sudo yum install nodejs
  • (NOTE: Seems like we are blocked from upgrade node and npm to their latest versions with yum. I was only able to get node v6.14.3, and npm v3.10.10
  • May be able to use the following commands AFTER INSTALLING NPM through this method, to upgrade
    • npm install node -g
    • npm install npm

Option 2: Install Node from Source (Not recommended)

• One way of acquiring Node.js is to obtain the source code and compile it yourself. (See Digital Ocean Link Above)
• wget https://nodejs.org/dist/v10.11.0/node-v10.11.0-linux-x64.tar.xz
• tar xzvf node-v* && cd node-v*
• sudo yum install gcc gcc-c++
• ./configure
• make
• sudo make install
• Verify installation with node --version

Option 3: Install Node using NVM

• https://github.com/creationix/nvm
• I haven't attempted this, but it looks very tried and true, and might not even need sudo for it if students use in their own folders... but need to experiment more with this.

Option 4: Install Node via NodeSource **** WENT WITH THIS OPTION ****

• Honestly, I'm not too familiar with NodeSource right now... but it seems like a great thing to leverage to get Node!!
• https://github.com/nodesource/distributions#rpm
• curl -sL https://rpm.nodesource.com/setup_10.x | bash -
• sudo yum install -y nodejs
  • This seems like the way to go! If you already tried to install node from another option, you will see something like this below:
    • Your system appears to already have Node.js installed from an alternative source.
    • Run sudo yum remove -y nodejs npm to remove these first.

MongoDB

• https://www.digitalocean.com/community/tutorials/how-to-install-mongodb-on-centos-7
• https://docs.mongodb.com/manual/tutorial/install-mongodb-on-red-hat/#configure-the-package-management-system-yum
• Create a /etc/yum.repos.d/mongodb-org-4.0.repo file so that you can install MongoDB directly using yum:
• Paste this into the vi file

[mongodb-org-4.0]
name=MongoDB Repository
baseurl=https://repo.mongodb.org/yum/redhat/$releasever/mongodb-org/4.0/x86_64/
gpgcheck=1
enabled=1
gpgkey=https://www.mongodb.org/static/pgp/server-4.0.asc

• You can specify any available version of MongoDB. However yum upgrades the packages when a newer version becomes available. To prevent unintended upgrades, pin the package. To pin a package, add the following exclude directive to your /etc/yum.conf file: exclude=mongodb-org,mongodb-org-server,mongodb-org-shell,mongodb-org-mongos,mongodb-org-tools

ForeverJS (Potentially will help development of NodeJS projects)

• https://github.com/foreverjs/forever
• A simple CLI tool for ensuring that a given script runs continuously (i.e. forever)
• Install with
  • sudo npm install forever -g
• Start with:
  • forever start index.js
• Stop with:
  • forever stop index.js
• Absolute paths are also supported
  • forever start /home/myuser/app/forever/development.json
• UPDATE (10/10/2018) not sure we need this

Remote VS Code Functionality -- Allows you to SSH from within VSCODE and edit remote files

• https://github.com/rafaelmaiolla/remote-vscode
  • This is the VSCODE extension ^ Download this from within VSCODE by searching the plugins
• https://github.com/aurora/rmate
  • This is textmate for bash. Allows the use of the extension. See more info in readme.
  • sudo wget -O /usr/local/bin/rmate https://raw.githubusercontent.com/aurora/rmate/master/rmate
  • sudo chmod a+x /usr/local/bin/rmate

YARN

• To install the Yarn package manager, run:
  • curl -sL https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo
  • sudo yum install yarn

Development Tools

• You may also need development tools to build native addons:
  • sudo yum install gcc-c++ make

List of Actions:

• Installed wget (9/25/2018)
• Installed git 1.8.3.1 (9/25/2018)
• Installed node v6.14.3 (9/25/2018) using yum
• Installed npm v3.10.10 (9/25/2018)
• Ran yum update... Admittedely this was a bit accidental. (Tried to see if this would help install latest node with yum)
• Installing node/npm using instructions for centos7 server from NodeSource repo Readme https://github.com/nodesource/distributions#rpm
• curl -sL https://rpm.nodesource.com/setup_10.x | bash -
  • Using this curl command allowed the following to install the latest of node.
• sudo yum install -y nodejs
  • to install Node.js 10.x and npm.
  • v10.11.0 (NODE)
  • 6.4.1 (NPM)
• sudo yum install gcc-c++ make
• curl -sL https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo
• sudo yum install yarn
• sudo yum install -y mongodb-org (9/27/2018)
• Downloaded dummy data for mongodb to play around with
• Installed rmate
  • sudo wget -O /usr/local/bin/rmate https://raw.githubusercontent.com/aurora/rmate/master/rmate
  • sudo chmod a+x /usr/local/bin/rmate
• vi /etc/aliases
  • add personal email in comma deliniated format to receive email of logs from /var/logs/
• installing vim

Next Steps

• Install ForeverJS (check if installed already)
• Install Express (check if it is insalled already)
• Develop sample app using create react app with express backend/mongodb

Need to create backend with Model/Controller/Routes and Front

• https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/

• need to install babel cli

  • npm install -g babel-cli

• https://stedolan.github.io/jq/download/

  • brew install jq (For MacOS)
  • jq formats json curl commands for readability

• npm i -g create-react-app

  • Make sure create-react-app is installed globally
  • react-scripts may be needed
    • npm i react-scripts
    • https://www.npmjs.com/package/react-scripts

• So, the Rub: we need to (1) launch both the Webpack dev server and the API server in order to run the app locally. And then (2) we need to get the Webpack dev server to proxy requests intended for our API server.

  • For the first challenge, we could use two terminal windows: boot each server in its own window. But we could get a bit fancier.
    • Use Concurrently
    • Concurrently is a utility for running multiple processes. We'll see how it works by implementing it.
    • Make sure you're in the top-level directory and install it with npm:
      • npm i --save-dev concurrently
    • We want concurrently to execute two commands, one to boot the API server and one to boot the Webpack development server. You boot multiple commands by passing them to concurrently in quotes like this:
      • concurrently "command1" "command2"
      • If you were writing your app to just work on Mac or Unix machines, you could do something like this:
        • concurrently "npm run server" "cd client && npm start"
      • Note the second command for booting the client first changes into the client directory and then runs npm start.
      • However, the && operator is not cross-platform (doesn't work on Windows). As such, you need to make a start-client.js script with the project. This script will boot the client from the top-level directory in a manner that is cross-platform.
      • Ultimately, we'll want to boot concurrently like this: concurrently "npm run server" "npm run client"

• This will be our start command. Let's add the start and client commands to our package.json:

"scripts": {
    "start": "concurrently \"npm run server\" \"npm run client\"",
    "server": "node server.js",
    "client": "node start-client.js"
  },

• For start, we execute both commands, escaping the quotes because we're in a JSON file. For client, we execute the start-client.js script with node.

• Now we can boot both servers by running npm start

• To have the Webpack development server proxy our API requests to our API server, we just need to add the following line to client/package.json:

  // Inside client/package.json
  "proxy": "http://localhost:3001/",

• Our React app is ready and in place in client/. We have concurrently setup to boot both our Webpack dev server and our API server together. And we've specified the route that Webpack should proxy API traffic to.

  • npm start

Taking it further

Deployment

• When using Webpack/create-react-app, you have a few options for deployment.

• create-react-app comes with a build command that you can use to create a static bundle of the React app:

  • cd client
  • npm run build
    • This produces a build/ folder which you can serve with any static asset host. It contains all your app's HTML, JavaScript, and CSS files.

You can upload this folder to a host like S3 and deploy your app to AWS. Or, you can have the API server also serve your static assets. The GitHub repo of this app contains an example of the app prepared for deployment. Check out the Heroku section of the README.

Check out pm2, looks like it's more reliable than foreverJS