Deploying More than Text Content using Your DigitalOcean Droplet

Posted July 4, 2017 3.8k views
NginxNode.jsDigitalOceanDigitalOcean ArticlesUbuntu 16.04

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”;

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'));
console.log("Running at Port 3002");```

… _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.

edited by asb

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

Submit an Answer
2 answers

I just came across this post, thanks for sharing it! By the way the formatting seems fine as well.

Hi @iskamwebsite, You’re welcome. I requested the Q&A managers fix my formatting. MLR