Deploying More than Text Content using Your DigitalOcean Droplet

The following article got me to the point where I could display text content, but that’s where it stopped. How To Set Up a Node.js Application for Production on Ubuntu 16.04 I will continue from that point. note: I could not format this post. It contains formatting I did not want and it removed my formatting. This interface is very buggy. I use the current versions of: Ubuntu, Nginx (server), pm2, Node, NPM, express. My Node app (that I’m deploying) uses React and Bootstrap 4, … but this post is also relative, if you’re only deploying HTML with CSS. … DigitalOcean >etc >nginx >sites-available >default (file): Important settings not previously discussed:

location ~* \.(css|gif|html|ico|jepg|jpg|js|jsx|pdf|php|png|scss|svg|txt|zip) {
             add_header        Cache-Control public;
             add_header        Cache-Control must-revalidate;
          }
          location /imgs/ {}

The above file types are blocked unless you include their extensions (as I did). Below, is how I open a port and create a “pretty URL”. Meaning, http://your-domain-name/your-whatever-directoty-name/ is the URL to “that” sub-directory.

location /your-whatever-subdirectoty-name {
rewrite ^/your-whatever-subdirectoty-name(.*) $1 break;
proxy_pass "http://localhost:3002";
}

… DigitalOcean >home >your-account-name >: index.html This is my Nginx server/domain splash page. My Node apps are in sub-directories on this directory level with Nginx using reverse proxy (localhost). This is where the article I mentioned, left off. I will show you my version of the server.js file. I create a subdirectory for my app (or whatever), then (for example) I name it react-bootstrap. DigitalOcean >home >your-account-name >react-bootstrap I create a file and name it: r-bs-server.js (r-bs- stands for react-bootstrap). Give your server.js unique names, so it is unique inside pm2. Every localhost port you use will have its own server.js file, so in pm2 you want to have a unique server.js file name so you can turn that port on and off. Now, assign the react-bootstrap directory (folder) to port 3002, as mentioned in my above section … sites-available >default (file) … proxy_pass “http://localhost:3002”; r-bs-server.js:

var express = require("express");
var app = express();
var path = require("path");
app.get('/',(req,res) => { res.sendFile(path.resolve(__dirname+'/index.html')); });
app.use(express.static(__dirname + '/static'));
app.use(express.static(__dirname + '/imgs'));
app.listen(3002);
console.log("Running at Port 3002");```
Above: 

… __dirname + ‘/static’ is a folder I need for React. … __dirname + ‘/imgs’ is my images folder.``` … Then, I put my app content (including an index.html file) inside the react-bootstrap directory. Make sure you (also) did everything the original article mentioned + what I mentioned. Now (hopefully), the webpage will display the contents related to the (above) index.html file … of the react-bootstrap directory. … For people using React: If your app is in a sub-directory, here’s a few instructions. #1) In your package.json file, add: “homepage”: “http://your-domain-name/your-app-name”, Now, when you: npm run build your-app-name/ is prefixed to your app’s href and src values, … so your server can properly connect to the relevant files. #2) In your project’s index.js file (or whatever): import {HashRouter, Route, NavLink} from ‘react-router-dom’; Use HashRouter not BrowserRouter. This should help with reloading, 404, … problems. MLR