Question

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


Submit an answer


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Sign In or Sign Up to Answer

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.

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

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel