Section 9: Application Deployment – Server-side Development

61. Joining Heroku and GitHub

Create a GitHub account if you don’t have one.

Navigate to heroku.com and sign up for Free if you don’t have an account. After you’ve created an account log into heroku.com.

Next we want to install Heroku’s CLI, so open up a browser tab and navigate to https://devcenter.heroku.com/articles/heroku-cli. Download and install the appropriate version of the CLI.

We can verify that the Heroku CLI is installed by opening up a terminal application and viewing the version of the CLI by typing the following command.

$ heroku -v

Next, log in to heroku by typing the following in the terminal.

$ heroku login

Press any key and a browser screen should open with a button. Press the button to log in. Once logged in you can close the browser tab. In the terminal, you should see a message stating your Heroku username.

62. Version Control With Git

Navigating to git-scm.com and download Git if it is not already on your laptop. For Windows users, check the option in the installer to install GitBash.

Ensure you have git installed by typing the following command in the terminal. You should see a version number if successful.

$ git --version

63. Exploring Git

Discussion about untracked files, unstaged changes, staged changes, and commits.

64. Integrating Git

Let’s create a git repository for our weather app. In the terminal, change the working directory to the root directory of the web-server app.

Then initialize a git repository by issuing the following command in the terminal.

$ git init

We don’t want git to track the files in the node_modules directory. To prevent git from tracking these files we create a new file named .gitignore in the project’s root directory.

Inside .gitignore add the following line so that the node modules are not copied to the repo.

node_modules/

We can verify that this directory is not tracked by running the following command and noticing that node_modules/ is not listed.

$ git status

We can now add all of the tracked files and directories to the git staging area using the following command.

$ git add .

Next we want to commit the changes to the staged files using the command below.

$ git commit -m "initial commit"

65. Setting Up SSH Keys

The following commands must be run from terminal (on MacOS) or gitbash (on Windows).

To create SSH key pairs is

$ ssh-keygen -t rsa -b 4096 -C "eric@n0code.net"

Press enter, to use the default, when it asks you where to store the key pair . Press enter, for no passphrase, when it asks for a passphrase, and press enter to accept the empty passphrase.

You can ensure that your SSH key pair files were created by viewing the id_rsa and id_rsa.pub files.

$ ls -al ~/.ssh

Next, let’s start the ssh agent if it is not already running by running the following command.

On MacOS, run

$ eval "$(ssh-agent -s)"

On Windows, run

$ eval $(ssh-agent -s)

Next, add the private key file to the ssh agent.

On MacOS, run

$ ssh-add -K ~/.ssh/id_rsa

On Windows, run

$ ssh-add ~/.ssh/id_rsa

66. Pushing Code to GitHub

Log onto GitHub.com.

Click on the icon in the upper right corner and scroll down to Settings. In Settings, choose SSH and GPG keys in the left hand pane. Press the New SSH key button. Enter a name for the key (e.g. My Laptop), and copy the contents of your id_rsa.pub file into the key field.

To verify that you can use ssh with GitHub, issue the following command. You should see a message including your name.

$ ssh -T git@github.com

Now on GitHub, create a new repository by clicking the + in the upper right corner of the webpage. Name the repository and leave all the defaults.

After you’ve created a repository, you should see a box on the webpage that reads Quick setup — if you’ve done this kind of thing before. In that box press, press the SSH button. This changes the commands need to push code using your SSH key.

Next, scroll down on the webpage to see some commands listed under …or push an existing repository from the command line. These are commands we’ll be issuing to push our code from our laptops to GitHub.

Open the terminal in WebStorm and change the working directory to your weather app’s root directory. Then issue the following commands to push your code to GitHub.

$ git remote add origin git@github.com:erimcg/weather_app.git
$ git branch -M main
$ git push -u origin main

67. Deploying Node.js to Heroku

We first need to give heroku our public ssh key. We can do this from the command line. To do so, in your terminal, change your working directory to your app’s root directory and issue the following command.

$ heroku keys:add

If you have multiple public ssh keys you will see a list to choose from, or if you have only one, you will the public key’s path displayed and a prompt asking if you want to send it to heroku. Enter Y and press enter. If you see it was copied and done, then it was successful.

Next, we need to push our code to heroku. This can be done using the heroku create command followed by a name for our application. The name of the application will be used as part of the URL to access the application on heroku.com so it has to be a unique app name that heroku has not already created.

$ heroku create n0code-weather-app

If successful, you will see two links. The first is a link to the live URL that our app will run at. If you navigate to the link in a browser you’ll see a banner stating “Heroku | Welcome to your new app!”. The second is a git repository hosted on heroku.com.

We next need to tell heroku how to run our app. Since we run our app using node src/app.js, we need to tell heroku to do this by adding a key-value pair to the “scripts” object in the package.json file. Note: you can remove the current “test” key-value pair in the “scripts” object as I have done.

...
"scripts": {
  "start": "node src/app.js"
},
...

Not only can heroku start our app using this script, but we can too by using the following command.

$ npm run start

Now, on our localhost we’re using port 3000. Heroku will run our app on a different port and will be specified in an environmental variable named PORT. So in our src/app.js file, let’s add a constant under the app constant that specifies the port number to use. The constant will be set to the environmental variable named PORT (if it exists) or will be set to 3000 if not.

const app = express(). // previously defined
const port = process.env.PORT || 3000

Now, down at the bottom of src/app.js we need to change which port the app should listen on from 3000 (which is hard coded) to the value of the port constant.

app.listen(port, () => {
    console.log('server is up on port ' + port)
})

Now, we need to commit our changes and push our code to Heroku.

First, run git status to see the changes that have been made since our last commit. We see that 3 files were modified, so let’s commit the changes and push the change to GitHub.

$ git add .
$ git commit -m "Setup code for Heroku"
$ git push

Now, when we set up Heroku, it created a git remote to that we can push to. To see it, we can run the following command.

$ git remote

Now to push our code to the Heroku remote we run the following command.

$ git push heroku main

After the code is pushed to heroku we see from the terminal messages that heroku also installed our app and started the application. If we navigate to the link provided in the terminal, we can our app is truly running on the heroku server.

https://n0code-weather-app.herokuapp.com

68. New Feature Deployment Workflow

Startup local development server
Make changes
Test on the development server
Push change to GitHub
Push changes to Heroku
Verify on Heroku server

69. Avoiding Global Modules

First, we add a new script in package.json to start our development server.

"scripts": {
    "start": "node src/app.js",
    "dev": "nodemon src/app.js -e js,hbs"
},

We can start the server in the terminal using the following command.

$ npm run dev

Nodemon is a global module. If we share the app’s source code with another dev, they won’t know that they need to install nodemon. The solution is to uninstall nodemon globally and install it as a local dependency.

$ npm uninstall -g nodemon
$ npm install nodemon@1.2.0 --save-dev

The –save-dev flag will add the following key-value pair to package.json which will only install nodemon on a development enviroment, not a production environment like heroku.

"devDependencies": {
    "nodemon": "^1.2.0"
}

We can’t run nodemon from the terminal any longer since it is not globally installed, but the “dev” script can find nodemon so we can start our server using the following command.

$ npm run dev

Post Views: 102