2

I have made a full-stack app that has a frontend made from React and a server.js written in nodejs(Express) and I am using Postgres as my database. I have done this before once and host my site on Heroku.

The difference is that on Heroku I had my frontend and backend on separate Urls so that in my react app I could do 

fetch('http://localhost:3005/url',{
    method: 'get',
    headers: {'Content-Type': 'application/json'},
})
.then(response => response.json())

The above code is while I am running my react and node on my laptop through npm start.

My server.js would be

app.get('/url', (req, res) => {
    db.insert({
       page_url: req.body.urlInfo,
       user_visit_id: req.body.visitID,
    })
    .into('pageurl')
    .then((id) => {
        res.json(id);
    }).catch(err => res.status(400).json('unable to write'))
})

In Heroku, I would just change the frontend React line to :

fetch('http://**Ther  URL where my server.js is**/url',{
    method: 'get',
    headers: {'Content-Type': 'application/json'},
})
.then(response => response.json())

And this would run absolutely fine. The issue comes now that I have to deploy the app to the school server. The server has nginx running and I have been given a domain for this project.

The front end is hosted on the nginx and whenever I vist my domain the frontend showsup but how do I connect it to my server.js endpoints given that I have to have the server.js in the same server as the react app which is hosted by the nginx. I am completely new to nginx and don't have a concrete idea about solving the problem. I have my node server.js running on the server using pm2.

But this is right now of little use, as my frontend fetch does the localhost:3005/url which looks for the url point in port 3005 of the device that visits the domain rather than the actual server that is hosting the frontend and the node server.js.

I also tried replacing the localhost:3005/url from the server.js to using the server's ip but that address only seems to be visitable if I am on the school's wifi connection.

If I change enter that ip address from my phone with a data connection, the address can't be reached. So, I assumed that "ipaddress:3005/url" is also not the correct way to do it. I am lost at this point and any sugesstions would be a great help!!! Ideally I would like to run host my frontend on nginx on the server and have pm2 running the server.js.

I just need a way to connect the endpoints of the frontend and the backend. I need the

URL where my server.js is part in

fetch('http://Ther URL where my server.js is/url',{ method: 'get', headers: {'Content-Type': 'application/json'}, }) .then(response => response.json())

My nginx config file right now looks like this:

server {
    listen 80;
    listen [::]:80;

    root /var/www/example.com/html/build;
    index index.html index.php index.htm index.nginx-debian.html;
    server_name example.com www.example.com;

    location ~ \.php$ {
       include snippets/fastcgi-php.conf;
       # With php-fpm (or other unix sockets):
       fastcgi_pass unix:/var/run/php/php7.2-fpm.sock;
       # With php-cgi (or other tcp sockets):
       # fastcgi_pass 127.0.0.1:9000;
    }


    location / {
    try_files $uri /index.html;
    #try_files $uri $uri/ =404;
    }
}

This nginx configuration only serves the frontend at the moment. Also, the real domain.com is replaced by example.com in the above code.

Thanks!

Improve this question
1
  • Also, I only have access to the school server through ssh. Commented Oct 16, 2019 at 4:36

1 Answer 1

Reset to default
3

What i would do is setup a virtual host in nginx on a different port, which proxies all requests to your nodejs app, like:

server {
    listen 8080;
    server_name example.com;
    location / {
        proxy_pass http://127.0.0.1:3005;
        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;
     }
}

In this example, the following assumptions have been made:

  1. example.com is the domain that the school assigned to your project
  2. port 8080 is the port that you will open and set in your front-pages: fetch('http://example.com:8080', {})
  3. your nodejs app runs on port 3005
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

I have added my current nginx config file in the post above. My question is whether the server block you included goes in the same config file as the one I have posted below? So, I will have a file with two server blocks? And also I would use port 80, instead of port 8080 for both,right?
you will have 2 server blocks. The one on port 80 still remains, as that is your public facing app that you point your browser too. The second one, is your API kind of, where your public page makes the requests.
is there a way to use the same port 80 for both the frontend and the backend? And if yes does it have any drawbacks?
No drawbacks, you could use it. The only difference is you will have to set the location to a "folder" like, so fetch('http://example.com/api/getSomething', {}) for example. Your location will change a bit: location ~ ^/api/(.*)$ { proxy_pass http://127.0.0.1:3005/$1; }
location ~ ^/api/(.*)$ would be the location ~^/the_folder_where_my_server.js_lives/(.*)$ ? fetch('http://example.com/api/getSomething', {}) my fetch would also be similar with api replacing the folder path of server.js and getSomething is the endpoint that I have in server.js? Thanks!
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.