Bonus Refactors

• Refactors

Heroku Deployment

Roadmap

1. Make a new github repository
2. set up environmental variables
3. Remove node_modules
4. Get started with Heroku
5. Create app on heroku
6. Attach MongoDB Atlas
7. Update code for heroku
8. Push git to heroku

New Github Repository But verify you have a valid .gitignore file

Choose

• a repository name
• public (let your instructors help you if you get stuck, you can always change this later)
• don't initialize with a README
• don't Add .gitignore
• dont add license - optional

Press the Create Repository button when you're ready!

In Terminal type git remote add origin and then paste the URL that you copied from github

Set the Node Engine

You should always specify a Node.js version that matches the runtime you're developing and testing with. Without setting this, Heroku will 'guess' a version Node.js for you. One big gotcha is that some newer/updated npm packages just won't run on an older version of Node.js and vice versa.

So let's set the correct version:

In Terminal

node --version

The line returned is the version, currently, I have v14.17.0, but you should set it to whatever your version is.

In package.json, you can add engines anywhere, just make sure you don't break the JSON format. In this example we are putting it between the auto-generated version and description fields. Don't forget double quotes and a ,

  "version": "1.0.0",
  "engines": {
    "node": "14.17.0"
  },
  "description": "",

Test your app

• If your express app doesn't run locally it definitely won't run on Heroku!
• test it out and fix any bugs

git add/git commit

• git add .
• git commit -m 'Some Message'
• git branch -M main <- only do this the first time you push to github
• git push -u origin main <--- only add -u the first time you push to github

Check this step carefully! Make sure node_modules are NOT on github!! If they made it to github, that means they are not being ignored by .gitignore. If you don't properly ignore them now you'll have massive headaches with heroku later!

If You Need to Remove node_modules

In order for heroku to work, you can't have node_modules in your repo. Instead, heroku will add this dir itself!

1. go to local repo dir
2. rm -rf node_modules
3. use git to: add, then commit, push
4. touch .gitignore
5. code .gitignore
6. add a line that says just node_modules to .gitignore
7. save .gitignore
8. git: add, commit, push
9. to get it working locally again: npm install

Create an app on heroku

• Once you have Heroku CLI, you can access terminal commands to heroku.

• Let's start by creating an app on heroku. If you don't yet have a name for your app it's ok, you can change it later (just make sure you update your git remotes too)

  • heroku create [unique name] from your project's root directory where you first initialized git. This will check heroku to see if the app name exists, if so you'll get an error message and have to try again.
  • If you don't specify a name, heroku will generate a unique name for you. There names are pretty cool and somewhat thematic so feel free to do heroku create without a name if you want a random name like repl.it does.
  • You can also do this step off their website if you want but since you'll be working in terminal anyway, might as well just do it through terminal.
  • Notice that if you successfully created a heroku app, you can see that the heroku remote was automatically added to your project's repo. Confirm this by typing git remote -v, you should see origin as well as heroku.

Verify you Attached MongoDB Atlas

Just use your connection string as your DATABSE_URL.

Make sure you added .env and a .gitignore to exclude your .env file from your git repository.

Heroku Dashboard

• Arthur will demonstrate you have to go to your dashboard, and enter your DATABSE_URL in a section labeled CONFIG VARS
• Config Vars stands for configuration variables
• You will not add one for your PORT Heroku will set one themselves

In your server.js

// in your code
const PORT = process.env.PORT || 8000

// at the bottom
app.listen(PORT, () => {
  console.log('We in the building', PORT)
})

Push Git

• First update your remote repo so you're code is up to date.

  • git add -A
  • git commit -m "updating code for heroku"
  • git push origin main

• Now also push to heroku

  • git push heroku main

Wait 1 minute then type heroku open. You should have your deployed app open up in your browser.

• If thing's don't work out, relax and try to find out the error.
• heroku logs --tail

Troubleshooting

Having weird errors?

Heroku Can't Figure Out Your Language

• the hidden folder .git and package.json MUST be on the same level in your directory (the root)

Check that your have ignored node modules

Your node modules should NOT appear on github

If you have not ignored your node modules, follow the steps listed above to remove and ignore them

Heroku recommends setting the proper node version

scroll down for an example

Check that your config variables match

In heroku, under your app and its settings, Reveal Config Vars

In the above example -

In your own app, make sure you have your databse url equal to process.env and then .DATABSE_URL

and in your .env fileDATABASE_URL=thecorrectmongostring

It won't work if you make it a different variable name (lowercase, no underscore) - do not change it in heroku! If you cange it in heroku you'll have to hunt how to update more things. Just set it in your own app.

Note: your the variable for the port is not listed, but it must be PORT all caps. It is accessed by process.env.PORT