Gold Medal Olympics Project to Live Site

https://www.codecademy.com/paths/web-development/tracks/sql-for-web-development/modules/project-gold-medal-metrics/informationals/bapi-p5-gold-medal-metrics

So I’m trying to learn how to deploy a website and it seems I didn’t learn this in the Web Development course. I’m using Apache and a RaspberryPi. I used Gold Medal Metrics as an example to structure my app, and just like Gold Medal Metrics… it worked when developing it on my laptop, but doesn’t work when I tried to make it a live site.

I point the server the the index page and all that works. But it seems the fetch() requests are only working on the hosting desktop (pi) and any external laptop or phone doesn’t successfully make the request. I setup a simple react app with a server.js to simulate a more complex project like this. I think I’m missing something about the server.js file. I’m missing a concept there.

I get an error: Requests.js:7 GET http://localhost:3001/testing net::ERR_CONNECTION_REFUSES

Here are the details on my smaller test:
Here is an example link: http://uptoptest.hopto.org/

Here is the code for the example link: GitHub - monochromaticmau/testingLiveWebsite: Testing to Learn how to set servers and live web

Requests.js

const Data = {};
const baseUrl = 'http://localhost:3001'

Data.getTest = () => {
  let url  = `${baseUrl}/testing`;
  return fetch(url).then(response => {
    if (!response.ok) {
      return new Promise(resolve => resolve([]));
    }
    return response.json().then(jsonResponse => {
      return jsonResponse.test
    });
  });
};

server.js

const express = require('express')
const app = express()
const cors = require('cors')


const PORT = process.env.PORT || 3001

app.use(express.static('public')); //'public' folder contains js, css, images

app.use(cors());
app.use(express.json());

app.use((req,res,next)=>{
    console.log(`Request!!`)
    console.log(req.originalUrl)
    console.log(req.path)
    
    //res.setHeader('Access-Control-Allow-Origin', '*')
    next();
})

app.get('/testing', (req,res,next)=>{
    console.log('TEST REQUEST')
    res.send({test: "Data blah blah"})
})




app.listen(PORT, ()=>{
    console.log(`Listening on Port ${PORT}`)
})

//Used for Testing Server
module.exports = app;

How does a project like Gold Medal Metrics actually successfully get deployed? Where is that lesson?

I don’t know whether the deployment is covered in the codecademy course or not. But we should be able to help you successfully deploy your project.

We have to cover a few concepts here.

Let’s start with the client-server architecture. It seems that you already know that your application consists of two parts - your visible page (http://uptoptest.hopto.org/) and a node.js application that will process requests made from that page. These two parts can be deployed separately - static/client part with Apache or any static server and backend/server part (node.js application) using a node server.

And those two parts will communicate with each other using some sort of API in form of the HTTP requests.

Let’s investigate what happens when we open http://uptoptest.hopto.org/ and click on the Testing FetCH button. Tab Network in developer tools ( Command+Option+J or Control+Shift+J in Chrome) will be very helpful.

I clicked on the button and I see that the request was sent. It finishes with status (failed) net::ERR_CONNECTION_REFUSED. Ok, so something went wrong. At this point, you should check if the URL of the request is correct. The request was sent to address “http://localhost:3001/testing” and that’s the problem.

Localhost means “this, local machine”. When I clicked on the button your site tried to fetch data from my own computer at port 3001. This will only work when you click this button on the computer that is serving the Node.js application at port 3001 - your Raspberry PI, that’s why it works there.

Even though you used Apache to host the static files every part of the frontend/client code will be executed on the client-side (thus the name) - in case of websites - in the web browser of the user.


You have used a domain name (uptoptest.hopto.org) to allow users to view the site. You need to do basically the same thing for the server part of your application. You need to send requests to the domain name of your server-side application or to the public IP address of the server that serves the application.


Here are a few tips to get you through this process:

  1. You can use the same domain name for the client and server-side parts; serve your website on default HTTP port 80 and the server-side on port 3001; your domain name is probably pointing to your localhost so you can run the server (node server.js) and open in your browser URL “http://uptoptest.hopto.org:3001/testing” to check if that works.
  2. You will probably notice that as soon as you close the terminal window that is running the node.js application it stops working, that’s normal; to make it work all the time you can take a look at process manager for Node.js, for example, pm2.
  3. If you have no idea how to approach this let me know and try to answer the question “what part of your application is client-side and what part is a server-side?”.
2 Likes

Hi, Thanks. So this is what I did to fix it:

I updated my Requests.js to :

const baseUrl = 'http://uptoptest.hopto.org:3001/testing'

and opened up port number 3001 on my router. That fixed it! I don’t think I realized that s domain name is a nickname for my Pi IP address. So In the Express Server it knows it’s at that IP address and so opening up 3001 fixed it.

Now I’m trying to set this up on some hosting site, so I’ll be posting a similar question but when using a 3rd party. I did this Heroku lesson: https://www.codecademy.com/courses/deploying-with-netlify-and-heroku/articles/deploying-a-back-end-with-heroku

, but it was still a simpler example and the loading of the page was the request instead of something like Gold Medal Olympics where it first loads a page then makes the requests. The next article had a full-stack link https://www.codecademy.com/articles/deploying-a-fullstack-app-with-heroku but this link seems not to be working.

Anyways I appreciate it! IF you could lookout for my question on implementing this type of app in heroku.