MLR
By:
MLR

Deploying More than Text Content using Your DigitalOcean Droplet

July 4, 2017 399 views
DigitalOcean Nginx DigitalOcean Articles Node.js Ubuntu 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) ... proxypass "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

Be the first one to answer this question.