{ "componentChunkName": "component---src-pages-markdown-remark-fields-slug-js", "path": "/full-stack-development/week-2/day-1/labs/heroku-deployment/", "result": {"data":{"markdownRemark":{"html":"

Heroku Deployment

\n
\n
\n
\n

Lesson Objectives

\n
    \n
  1. Make sure you completed the MongoDB Atlas Set Up
    2. \n
  2. Make a new github repository
    3. \n
  3. Create a basic express app
    4. \n
  4. set up environmental variables
    5. \n
  5. Remove node_modules
    6. \n
  6. Get started with Heroku
    7. \n
  7. Create app on heroku
    8. \n
  8. Attach mongolab addon
    9. \n
  9. Update code for heroku & mongolab
    10. \n
  10. Push git to heroku
    11. \n
\n
\n
\n
\n

Client Server Flow Review

\n
\n
\n
\n

New Github Repository

\n

This is going to be a porfolio piece so you'll want it hosted on regular github.

\n

Make a new repo! Click the + on the upper right navigation bar

\n

\"new

\n
\n

Choose

\n\n

Press the Create Repository button when you're ready!

\n
\n
\n
\n

Clone Your New Repository to Your Computer

\n

In Terminal

\n\n
\n
\n
\n

On Github

\n\n

\"clone

\n
\n
\n
\n

In Terminal\ntype git clone and then paste the URL that you copied from github

\n

Should look something like this

\n

\"clone

\n\n
\n
\n
\n

Basic Express App

\n

Let's build a basic express app

\n\n

Check out package.json make sure everything looks as expected

\n

\"package.json\"

\n
\n
\n
\n

Set Environmental Variables

\n

We have to set specific to our local computer environment AND our heroku environment. Our variables should NOT be tracked by git and should NOT be on github.\nThis can keep things like passwords and api keys safer from hacking*. There are a few ways to accomplish this. We're going to store our variables in our .env file which is a file that should NEVER end up on github (because we will ignore it in our .gitignore file) and we can easily export our variables and have access to them on our app.

\n\n

We'll need to use an npm package dotenv to manage this file within our project for us

\n\n

Add the following:

\n

IMPORTANT\nThis file is NOT JavaScript, so the syntax is different

\n\n
\n
\n
\n:@ga-sei-u8fme.mongodb.net/test?retryWrites=true&w=majority\n\n# Port for localhost\nPORT=3000`, `3040278537676100000`)\"\n >\n \n \n \n \n
# GA project 2 MongoDB Atlas connection String\nMONGODB_URI=mongodb+srv://<your_username>:<password>@ga-sei-u8fme.mongodb.net/test?retryWrites=true&w=majority\n\n# Port for localhost\nPORT=3000
\n
\n
\n
\n

Replace the MONGODB_URI with the one provided to you from YOUR MongoDB Atlas, be sure to swap out <password> (be sure to remove the <>s as well your password should just be password1234 not <password1234>) with the password you created for your user through Atlas.

\n

Load your changes

\n

in server.js

\n console.log(err.message + ' is mongod not running?'));\ndb.on('connected', () => console.log('mongod connected: ', MONGODB_URI));\ndb.on('disconnected', () => console.log('mongod disconnected'));\n\n//___________________\n//Middleware\n//___________________\n\n//use public folder for static assets\napp.use(express.static('public'));\n\n// populates req.body with parsed info from forms - if no data from forms will return an empty object {}\napp.use(express.urlencoded({ extended: false }));// extended: false - does not allow nested objects in query strings\napp.use(express.json());// returns middleware that only parses JSON - may or may not need it depending on your project\n\n//use method override\napp.use(methodOverride('_method'));// allow POST, PUT and DELETE from a form\n\n\n//___________________\n// Routes\n//___________________\n//localhost:3000\napp.get('/' , (req, res) => {\n res.send('Hello World!');\n});\n\n//___________________\n//Listener\n//___________________\napp.listen(PORT, () => console.log('express is listening on:', PORT));\n`, `68426547680339710000`)\"\n >\n \n \n \n \n
require('dotenv').config()\n\n//___________________\n//Dependencies\n//___________________\nconst express = require('express');\nconst methodOverride = require('method-override');\nconst mongoose = require ('mongoose');\nconst app = express();\nconst db = mongoose.connection;\n//___________________\n//Port\n//___________________\n// Allow use of Heroku's port or your own local port, depending on the environment\nconst PORT = process.env.PORT || 3000;\n\n//___________________\n//Database\n//___________________\n// How to connect to the database either via heroku or locally\nconst MONGODB_URI = process.env.MONGODB_URI;\n\n// Connect to Mongo &\n// Fix Depreciation Warnings from Mongoose\n// May or may not need these depending on your Mongoose version\nmongoose.connect(MONGODB_URI , { useNewUrlParser: true, useUnifiedTopology: true }\n);\n\n// Error / success\ndb.on('error', (err) => console.log(err.message + ' is mongod not running?'));\ndb.on('connected', () => console.log('mongod connected: ', MONGODB_URI));\ndb.on('disconnected', () => console.log('mongod disconnected'));\n\n//___________________\n//Middleware\n//___________________\n\n//use public folder for static assets\napp.use(express.static('public'));\n\n// populates req.body with parsed info from forms - if no data from forms will return an empty object {}\napp.use(express.urlencoded({ extended: false }));// extended: false - does not allow nested objects in query strings\napp.use(express.json());// returns middleware that only parses JSON - may or may not need it depending on your project\n\n//use method override\napp.use(methodOverride('_method'));// allow POST, PUT and DELETE from a form\n\n\n//___________________\n// Routes\n//___________________\n//localhost:3000\napp.get('/' , (req, res) => {\n  res.send('Hello World!');\n});\n\n//___________________\n//Listener\n//___________________\napp.listen(PORT, () => console.log('express is listening on:', PORT));\n
\n
\n
\n
\n

Test your app

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

git add/git commit

\n
    \n
  • git add .
    • \n
  • git commit -m 'first commit'
    • \n
  • git push origin master
    • \n
\n

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!

\n
\n
\n
\n

If You Need to Remove node_modules

\n

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

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

Get started with Heroku

\n
    \n
  • Sign up for Heroku\n
      \n
    • You may need a CC at some point although you will not be charged
      • \n
    \n
    • \n
  • Install Heroku CLI Tools\n
      \n
    • Verify by typing heroku login anywhere in your terminal
      • \n
    • Follow prompts to sync up your heroku credentials, DO NOT HEROKU CREATE yet.
      • \n
    \n
    • \n
\n
\n
\n
\n

Create an app on heroku

\n
    \n
  • Once you have Heroku CLI, you can access terminal commands to heroku.
    • \n
  • 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)\n
      \n
    • heroku create [unique name] from your project's root directory where you first initialized git.
      • \n
    \nThis will check heroku to see if the app name exists, if so you'll get an error message and have to try again.\n
      \n
    • 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 either.
      • \n
    • 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.
      • \n
    • 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.
      • \n
    \n
    • \n
\n
\n
\n
\n

Add Database from MongoDB Atlas

\n

Go to heroku - make sure you are logged in and go to your app

\n

Go to the settings tab

\n

\"\"

\n

push the reveal config vars button

\n

in there add:

\n

\"\"

\n
    \n
  • make sure MONGODB_URI key matches perfectly what you have in your server.js file for connecting with mongoose.
    • \n
  • make the property your connection string from Atlas with YOUR username password filled in
    • \n
\n
\n
\n
\n

Push Git

\n
    \n
  • First update your remote repo so you're code is up to date.\n
      \n
    • git add -A
      • \n
    • git commit -m \"updating code for heroku\"
      • \n
    • git push origin master
      • \n
    \n
    • \n
  • Now also push to heroku\n
      \n
    • git push heroku master
      • \n
    \n
    • \n
\n

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

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

Troubleshooting

\n

You only need to follow this section if you're having any of the following weird errors!

\n
\n
\n
\n

Heroku Can't Figure Out Your Language

\n
    \n
  • the hidden folder .git and package.json MUST be on the same level in your directory (the root)
    • \n
  • if it is a Rails app, .git and GemFile MUST be on the same level in your directory (the root)
    • \n
  • move your files up to .git accordingly
    • \n
\n
\n
\n
\n

Check that your have ignored node modules

\n

Your node modules should NOT appear on github

\n

\"no

\n

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

\n
\n
\n
\n

Heroku recommends setting the proper node version

\n

scroll down for an example

\n
\n
\n
\n

Check that your config variables match

\n

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

\n

\"reveal

\n

In the above example -

\n

In your own app, make sure you have your mongo uri equal to process.env and then .MONGODB_URI

\n

const mongoURI = process.env.MONGODB_URI

\n

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.

\n

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

\n
\n
\n
\n

You Need to Add More Config Variables

\n

Using the NPM package dotenv? If you've added new variables, like SECRET, be sure to add those custum config variables

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

Otherwise you might be looking at a Internal server error

\n

\"reveal

\n

You must make the variable names match.

\n
\n
\n
\n

You changed your heroku URL

\n

If you changed your app name, you'll have to update the git remote url. Get the right url from heroku (see towards the bottom

\n

\"right

\n

In terminal, in your repo

\n
    \n
  • git remote -v (should have origin and heroku)
    • \n
  • git remote remove heroku
    • \n
  • git remote add heroku whateverURLherokuListed
    • \n
\n
\n
\n
\n

You changed your github project name

\n

\"changed

\n

Go back to the main code view and grab the url from the clone or download button

\n

\"git

\n
    \n
  • git remote -v (should have origin and heroku)
    • \n
  • git remote remove origin
    • \n
  • git remote add origin whateverURLgithubListed
    • \n
\n
\n
\n
\n

Cannot read filetype MIME re: CSS file

\n
    \n
  • your CSS file is not linked properly/cannot be found/named incorrectly (working locally? see next issue)
    • \n
  • you have a mismatch in opening/closing HTML tags
    • \n
\n
\n
\n
\n

Cannot find a file but it is there??? You think you might have changed it?

\n

There is weirdness. If you had named your file Index.html and then changed it to index.html git, by default, will ignore this change.

\n

Locally, you'll see index.html (your updated name). But if you go to github, you'll see it's still Index.html. This will 'confuse' heroku as well.

\n

First try to use git to change the name:

\n\n \n \n \n \n
git mv -f Index.html index.html
\n

Success?

\n

\"changed

\n

go ahead and git add . git commit -m 'file name changed'

\n

If that fails,

\n
    \n
  • touch tempfile,
    • \n
  • copy paste your code from the offending file in there
    • \n
  • rm the offending file
    • \n
  • git add . git commit -m 'removed Index.html
    • \n
  • touch index.html
    • \n
  • git add . git commit -m 'added index.html
    • \n
","frontmatter":{"title":"Heroku Deployment"}}},"pageContext":{"id":"5277bb97-83fd-5839-8fdd-325c15cfb5ba","fields__slug":"/full-stack-development/week-2/day-1/labs/heroku-deployment/","__params":{"fields__slug":"full-stack-development"}}}, "staticQueryHashes": ["1636016182","3810076356"]}