HEROKU

How to deploy static site in Heroku

I would like to thank Stephen Chavez from my Grow with Google Nanodegree program for walking me through this. When I was researching how to deploy this static site to Heroku I got alot of complicated results, and all of them that I could find were published from students from the MWS track. Had me questioning wether I even learned anything while creating this project. Stephen walked me through his process, and that’s when we both realized that we had different versions of the project. FEND students’ objective was to make this as responsive to different displays and make it screen reader ready as well as enabling the service worker functionality. Whereas MWS students objective was focused on making it functional with the database backend, on top of what making it fancy and enabling service worker functionality as well.

After tinkling around, we came up with this:

  1. Create a package.json on the root directory that has npm support. Make sure it has 
    "start": "node server.js"
  2. Create a server.js
  3. Deploy/Update your project onto github
  4. Create an Heroku account
  5. Create a new server and connect your GitHub repository in it.

If you get an error

  1. run the cmd node server.js in the same folder server.js is in by typing: 
    node server.js
  2. run npm i express
  3. do node server.js again
  4. run npm i cors
  5. run node server.js
  6. I got a working on 80
  7. push it

I got some visuals, but for some reason the venues were not displaying. Remember server. js just serves the files to somebody
the browswer runs the code and the code makes a request at that address at port 8080, but there isnt anything at localhost.
When inspecting it in on the console I was getting localhost:8000/data/restaurants.json:1 Failed to load resource: net::ERR_CONNECTION_REFUSED
I would create a new branch to deploy on github , so that I can refer back to the master branch on my local machine if I need to make edits in the future.

  1. So open up DBHelper.js
    1. Look for this line 
      static get DATABASE_URL() {
const port = 8000 // Change this to your server port
return `http://localhost:${port}/data/restaurants.json`;
}
    2. Replace it with 
      static get DATABASE_URL() {
let dataURL = "";
if (location.protocol.indexOf("https") !== -1) {
dataURL = `https://[your server url].herokuapp.com/data/restaurants.json`;
} else {
dataURL = `http://[your server url].herokuapp.com/data/restaurants.json`;
}
return dataURL;
}

Make sure your service worker cache is cleared to  make sure you can see your changes on your site. It’s a frustrating process that cannot be omitted.

Related Posts