My websites shows a black screen when the Domain name is entered but works off the IP address

April 12, 2019 340 views
Node.js DNS Ubuntu 18.04 JavaScript Deployment

Hello everyone, I’ve followed through an article(Link at the bottom) to deploy my ReactJs app on Digital Ocean. I was able to configure everything and follow through to the end and see my web app up and running when I would punch in the IP address (http://68.183.189.81). I then went on to configure my DNS records with my domain provider(SiteGround), once the wait for the DNS records had been done I went on to my website www.rajalkumar.com and I get a black screen. The errors I get in the inspector tools is a 403(forbidden). This is my first time using something like NGINX and I’m a bit stumbled here. I’ve gone on to read through a few different articles and have tried editing my sites-available and sites-enabled files a few times accordingly to each of the articles or docs I followed and I am yet to get past the black screen.

This is what my current sites-enabled/available file looks like:

server {
listen 80;
server_name www.rajalkumar.com rajalkumar.com;

root /react-portfolio/;
if ($http_host != "www.rajalkumar.com") {
    rewrite ^ http://www.rajalkumar.com$request_uri permanent;
}
# Server static files
location /static/ {
alias /root/react-portfolio/build/;
expires 365d;
}

location / {
    proxy_pass http://localhost:8080;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
}

}

Article I had followed:
https://medium.freecodecamp.org/i-built-this-now-what-how-to-deploy-a-react-app-on-a-digitalocean-droplet-662de0fe3f48

1 Answer

Hi @rajalkumar,

You can try something like

server {
        listen 80;
        server_name example.com www.example.com;
        root /var/www/html;

        # Add index.php to the list if you are using PHP
        index index.html index.htm index.nginx-debian.html;

        server_name example.com;

        location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                try_files $uri $uri/ =404; 
                proxy_pass http://localhost:8080;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For 
                $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto $scheme;
        }
}

Additionally, I can see you are passing the request to 8080. Can you let me know what is actually listening on that port? It’s possible the problem is coming from there.

Kind regards,
Kalin

Have another answer? Share your knowledge.