Skip to content
youhoc
  • Pages
    • Home
    • Modern App Guidelines
    • Linux
      • Day 1: Linux Distributions & Navigation
      • Day 2: User Management
      • Day 3: File Permission & Ownership
      • Day 4: Package Management
      • Day 5: Services Management
    • Javascript
      • JS The Weird Part
        • Execution Context
        • Types & Operators
        • Objects & Functions
        • Error Handling & Strict Mode
        • Typescript, ES6, Tra
      • Modern JS
        • JS in the Browser
        • Data Storage JSON
        • Modern JS
        • Advanced Objects & Methods
        • Webpack & Babel
        • Async
      • jQuery
        • In-depth Analysis of jQuery
      • React-ready JS
        • Arrow Function
        • Template Literals
        • Logical AND, OR, Ternary, Nullish Operators
        • Destructuring & Rest Operator
        • Array Method
        • Immutability and Spread Operator
        • Promises, Async/Await, Callback
    • PHP
      • gruntJS
      • composer
      • MySQL
    • Docker
      • Container Basics
      • Container Networking
      • Container Image
      • Container Volume & Persistent Data
      • Dockerfile
      • Docker Compose
      • Docker Registry
    • Node.js
      • 1. Installing & Exploring
      • 2. Core Modules
      • 3. Get User Input
      • File System & Input Arguments
      • 5. Express Web Server
      • icon picker
        6. Deploy to Heroku & Github
      • Authentication
      • 7. Databases
      • 8. Rest API
    • ReactJS
      • React from Andrew
        • Summary from Next
        • 1. Basics
        • 2. React Components
        • 3. Webpack
        • 4. Styling with SCSS
        • 5. React Router
        • 6. React Hook
      • Modern React From The Beginning
        • Intro to JSX
        • Vite Build Tools
        • Basic Component Creation
        • Component State
        • Props & Component Composition
        • useState with Inputs & Form Submission
        • useEffect, useRef & Local Storage
        • Async / Await and Http Request in React
        • React Router: Declarative Mode
        • ContextAPI
        • React Router: Framework Mode
          • File-routing & HTML Layouts
          • Server-side Data Query
          • Links & Navigation
          • Loaders
    • Typescript
      • Type User vs UserProp
    • Payload CMS
youhoc
/
/
6. Deploy to Heroku & Github

6. Deploy to Heroku & Github

Install Heroku CLI
⁠
The Heroku CLI | Heroku Dev Center
How to download, install, and start using the Heroku CLI. The Heroku CLI used to be part of the Heroku Toolbelt.
devcenter.heroku.com
⁠
⁠
Login with browser
heroku login

Deploy to Github

Status of git
untracked files
need to use git add to add to staged changes
unstaged changes
tracked files but with unstaged changes
need to use git add
staged changes
git add — add untracked files to staged changes
commit
commit to server

Create a git for current project
Create a git ignore file
Check git status again to see node_modules are not included in untracked files
Add files or folder to commit:
To remove files from staged changes:
To add staged files to commit:
This code is still not pushed to GitHub. Don’t check!!! =))))
Create a SSH Key:
This will create a ssh folder under user folder, with an id_rsa key file:
Make sure that our SSH agent is running
Register SSH Key
Now we can push our code to Git Hub.
Create a repo on Github
Link existing local source code as origin
Add SSH Key to Github
name: our source origin (laptop or server)
key: ~/.ssh/id_rsa.pub

Check SSH connection to GitHub
This mean Github allow our origin to connect to GitHub via SSH and public key above

Really push code to Github Repo
Done on the Github part.

Deploy to Heroku

Add SSH Key
Create a new app
In order to run the app, we need to specify
which file to run
change listening port in express
change all absolute path to relative paths

We need to modify package.json to change starting script
Then locally we can use npm run start to run node app.js
We need to modify port in express
We need to change to local fetch to relative paths
Then push changes to Github again:
Check connection between git and heroku
Push main to heroku server
Prepare a build script only for local and for other developers
In this case, nodemon is a global module. We need to convert it to developer module.
Uninstall global module
Install dev module
Heroku will never use nodemon
locally save-dev module can only run within script define in package.json
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.