deploying to heroku · heroku another popular hosting provider lets us host and run node apps (and...

of 31 /31
Deploying to Heroku tinyurl.com/heroku100

Upload: others

Post on 19-Aug-2020

9 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Deploying to Heroku · Heroku Another popular hosting provider Lets us host and run node apps (and apps written in other languages too!) Lets us run commands (e.g., install dependencies)

Deploying to Herokutinyurl.com/heroku100

Page 2: Deploying to Heroku · Heroku Another popular hosting provider Lets us host and run node apps (and apps written in other languages too!) Lets us run commands (e.g., install dependencies)

GitHub Pages● Lets us host static websites (including static ReactJS apps)● Does not let us run node applications (e.g., server code in app.js)● Does not let us run commands (e.g. to install dependencies)● Does not provide database hosting

Page 3: Deploying to Heroku · Heroku Another popular hosting provider Lets us host and run node apps (and apps written in other languages too!) Lets us run commands (e.g., install dependencies)

Heroku● Another popular hosting provider● Lets us host and run node apps (and apps written in other languages too!)● Lets us run commands (e.g., install dependencies)● Lets us host databases● ...

Page 4: Deploying to Heroku · Heroku Another popular hosting provider Lets us host and run node apps (and apps written in other languages too!) Lets us run commands (e.g., install dependencies)

Other Services● Amazon Web Services● Google Cloud Engine● Microsoft Azure● DigitalOcean● ...

Page 5: Deploying to Heroku · Heroku Another popular hosting provider Lets us host and run node apps (and apps written in other languages too!) Lets us run commands (e.g., install dependencies)

Getting Started1. Create a Heroku account at signup.heroku.com2. Install Heroku CLI devcenter.heroku.com/articles/heroku-cli3. Install create-react-app github.com/facebook/create-react-app4. Create a new GitHub repository

Page 6: Deploying to Heroku · Heroku Another popular hosting provider Lets us host and run node apps (and apps written in other languages too!) Lets us run commands (e.g., install dependencies)

Folder Structure● app.js contains backend code (runs on the server)● client/ folder contains client-side code and assets (uses ReactJS)● package.json contains dependencies and other metadata● You might see other conventions too

Page 7: Deploying to Heroku · Heroku Another popular hosting provider Lets us host and run node apps (and apps written in other languages too!) Lets us run commands (e.g., install dependencies)

Dev Environment● Install dependencies by running npm install (or npm i for short)● Start server by running node app.js● Start a static server

○ Configured to be restarted automatically on save○ cd into client/○ Run npm start

Page 8: Deploying to Heroku · Heroku Another popular hosting provider Lets us host and run node apps (and apps written in other languages too!) Lets us run commands (e.g., install dependencies)

{

...

“scripts”: {

“dev”: “node app.js & && cd client && npm start”

},

...

}

package.json

Page 9: Deploying to Heroku · Heroku Another popular hosting provider Lets us host and run node apps (and apps written in other languages too!) Lets us run commands (e.g., install dependencies)

{

...

“proxy”: “http://localhost:4000”,

...

}

package.json

Page 10: Deploying to Heroku · Heroku Another popular hosting provider Lets us host and run node apps (and apps written in other languages too!) Lets us run commands (e.g., install dependencies)

Demo

Page 11: Deploying to Heroku · Heroku Another popular hosting provider Lets us host and run node apps (and apps written in other languages too!) Lets us run commands (e.g., install dependencies)

app.js

Page 12: Deploying to Heroku · Heroku Another popular hosting provider Lets us host and run node apps (and apps written in other languages too!) Lets us run commands (e.g., install dependencies)

client/

Page 13: Deploying to Heroku · Heroku Another popular hosting provider Lets us host and run node apps (and apps written in other languages too!) Lets us run commands (e.g., install dependencies)

client/

$ mkdir client $ cd client$ npx create-react-app . # Create boilerplate ReactJS app$ npm start # Start static server

Page 14: Deploying to Heroku · Heroku Another popular hosting provider Lets us host and run node apps (and apps written in other languages too!) Lets us run commands (e.g., install dependencies)

proxy

Page 15: Deploying to Heroku · Heroku Another popular hosting provider Lets us host and run node apps (and apps written in other languages too!) Lets us run commands (e.g., install dependencies)

React Router DOM

Page 16: Deploying to Heroku · Heroku Another popular hosting provider Lets us host and run node apps (and apps written in other languages too!) Lets us run commands (e.g., install dependencies)

Production Environment● Install dependencies by running npm install (or npm i for short)● Build ReactJS app● Start server by running node app.js

○ Expose API○ Serve static files (include ReactJS app)

Page 17: Deploying to Heroku · Heroku Another popular hosting provider Lets us host and run node apps (and apps written in other languages too!) Lets us run commands (e.g., install dependencies)

scripts

Page 18: Deploying to Heroku · Heroku Another popular hosting provider Lets us host and run node apps (and apps written in other languages too!) Lets us run commands (e.g., install dependencies)

Heroku App

Page 19: Deploying to Heroku · Heroku Another popular hosting provider Lets us host and run node apps (and apps written in other languages too!) Lets us run commands (e.g., install dependencies)

Heroku App$ heroku login

Page 20: Deploying to Heroku · Heroku Another popular hosting provider Lets us host and run node apps (and apps written in other languages too!) Lets us run commands (e.g., install dependencies)

Heroku App$ heroku login$ heroku apps:create

Page 21: Deploying to Heroku · Heroku Another popular hosting provider Lets us host and run node apps (and apps written in other languages too!) Lets us run commands (e.g., install dependencies)

Heroku App$ heroku login$ heroku apps:create

$ git push heroku master # Heroku creates separate remote

Page 22: Deploying to Heroku · Heroku Another popular hosting provider Lets us host and run node apps (and apps written in other languages too!) Lets us run commands (e.g., install dependencies)

Heroku App$ heroku login$ heroku apps:create

$ git push heroku master # Heroku creates separate remote$ heroku open

Page 23: Deploying to Heroku · Heroku Another popular hosting provider Lets us host and run node apps (and apps written in other languages too!) Lets us run commands (e.g., install dependencies)

Heroku App$ heroku config:set VARNAME=VALUE

Page 24: Deploying to Heroku · Heroku Another popular hosting provider Lets us host and run node apps (and apps written in other languages too!) Lets us run commands (e.g., install dependencies)

Heroku App$ heroku config:set VARNAME=VALUE

$ heroku --help$ heroku COMMAND --help

Page 25: Deploying to Heroku · Heroku Another popular hosting provider Lets us host and run node apps (and apps written in other languages too!) Lets us run commands (e.g., install dependencies)

Continuous Deployment

Page 26: Deploying to Heroku · Heroku Another popular hosting provider Lets us host and run node apps (and apps written in other languages too!) Lets us run commands (e.g., install dependencies)

Databases

Page 27: Deploying to Heroku · Heroku Another popular hosting provider Lets us host and run node apps (and apps written in other languages too!) Lets us run commands (e.g., install dependencies)

Databases● MySQL: elements.heroku.com/addons/cleardb● PostgreSQL: elements.heroku.com/addons/heroku-postgresql● elements.heroku.com/addons

Page 28: Deploying to Heroku · Heroku Another popular hosting provider Lets us host and run node apps (and apps written in other languages too!) Lets us run commands (e.g., install dependencies)

Databases● MySQL: dev.mysql.com/doc/mysql-installation-excerpt/5.7/en/● PostgreSQL: www.postgresql.org/download/

Page 29: Deploying to Heroku · Heroku Another popular hosting provider Lets us host and run node apps (and apps written in other languages too!) Lets us run commands (e.g., install dependencies)

Express Database Integrations● MySQL: expressjs.com/en/guide/database-integration.html#mysql● PostgreSQL: expressjs.com/en/guide/database-integration.html#postgresql● expressjs.com/en/guide/database-integration.html

Page 30: Deploying to Heroku · Heroku Another popular hosting provider Lets us host and run node apps (and apps written in other languages too!) Lets us run commands (e.g., install dependencies)

Heroku Docsdevcenter.heroku.com/categories/reference

Page 31: Deploying to Heroku · Heroku Another popular hosting provider Lets us host and run node apps (and apps written in other languages too!) Lets us run commands (e.g., install dependencies)

Deploying to Herokutinyurl.com/heroku100