Day 16: Open Workshop Day

Reminders for Tony

1. Put on mic
2. Open Zoom chat
3. Record! Anyone else?

Topics Covered

• How to host a RESTful Node.js server with MongoDB Atlas database on Heroku
• Express Tutorial Part 7: Deploying to production

Goal for the day

Last day of class! By the end of the day, you should have your Travel Experts website fully deployed to Heroku/Atlas.

If we have time, we’ll build a POST endpoint for handle form data.

Topic 1: Final assignment

New Assignment Breakdown

Activity objectives: Deploying your app to Heroku/Atlas

Heroku

1. $ npm install heroku

2. Add start script - Heroku needs to know what command to fun to start your server (i.e. node app.js or similar). This is added to your package.json file.

    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "start": "node app.js"
    }, 
   

3. Push your repo to a public GH repository
4. Heroku: New -> Create New App
5. Deployment method -> Connect to Github and select your source repository and Connect.
6. Heroku: Dashboard > Select your server App > Settings > Reveal Config Vars”
   • add Atlas connection string
7. Deploy branch
8. Done!

If you see and “Application Error” for your depolyed site, check the logs: heroku logs --tail -a [container-name].

Frontend

1. Change fetch() URL from http://locahost:3000/api/desinations to http://[container-name].herokuapp.com/api/desinations.

2. Optional? npm install cors - Heroku needs to add CORS header (based on our code):

    // cors origin URL - Allow inbound traffic from origin
    corsOptions = {
      origin: "https://dashboard.heroku.com",
      optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204
    };
    app.use(cors(corsOptions));
   

This step may be optional for some unknown reason but keep it in your back pocket just in case.

Topic 2: POST endpoints? - Justice for jellyfish

Mid-day Huddle

• who needs help?
• any pivots?
• any show-and-tell?

[lunch]

Activity objectives:

Summary

• any trophies?
• prep for tomorrow?
• applause