node.js - Deplyong on DigitalOcean with NodeJs diffculty

Question

Hello I was recently using heroku but decidedto change to digital ocean as the price is better.

I deployed the on digital ocean making sure to set the environment to production.

Everything seems fine But when I go to the live app it is just a blank screen instead of my website.

Is there any one that can point me in the right direction?

if(process.env.NODE_ENV === 'production'){
  console.log('Production Enviroment')
  app.use(express.static(path.join(__dirname, 'build')))

 

  }

  app.get('*', (req,res) =>{
    res.sendFile(path.join(__dirname+'/build/index.html'));
});
const port = process.env.NODE_ENV === 'production' ? process.env.PORT : 4000;
app.listen(port, () => {
    console.log('Server listening on port ' + port);
});

Answer 1

You need to look at NGINX or some way for your application on PORT / 4000 to show up on port 80 for http or 433 for https. Port 80 / 443 is what your web browser is actually going to be able to see when you hit your IP address. A lot of people, including myself, use NGINX for port forwarding, proxying and load balancing. It's a small learning curve, but I recommend it 100x more than Heroku.

First you need to install NGINX inside your Ubuntu server (assuming you used a Ubuntu machine to host your site at Digital Ocean)

sudo apt-get update
sudo apt-get install nginx

Once that is done, you should be able to navigate to your IP in the browser and you'll see something about NGINX.

Now you can update the NGINX config file to your liking. You can use something like nano or wget to edit the config file. There's a ton of crud and comments in it, and I usually delete it all.

sudo nano /etc/nginx/sites-available/default

Your config can be simple for now. This is a boilerplate I picked up. Change the proxy_pass to your correct port.

server {
  listen       80;
  server_name  localhost;

  location / {
    proxy_pass http://localhost:4000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
  }
}

Save that config file and you should be able to restart NGINX with the following command and cross fingers see your application by hitting your IP address in the browser:

sudo service nginx restart

As I was writing this answer, I found an article on this whole process here: https://www.sitepoint.com/configuring-nginx-ssl-node-js/