Professional Documents
Culture Documents
Deploy To Heroku
Deploy To Heroku
Dashboard
Outside Resources
Homework
Exercises
Pre-Course
Angular
Bootstrap
CSS
Javascript
HTML
jQuery
Mongo
Node
Tools
Warmups
Career
MEAN Stack
Authentication
Intro
Class Instruction
SUBSCRIBE
MENU
Deploying your
MERN project with
Heroku
19 NOVEMBER 2015 on Deployment, Level 3, Lesson
Heroku is an excellent service that specializes in
making deployment of your web application quick
and painless. Fortunately for us, it also has a free tier
that will be perfect for our needs. There will only be a
little bit of setup needed to get your web app up and
running online. Let's get started.
$ heroku login
Enter your Heroku credentials.
Email: [email protected]
Password (typing will be hidden):
Logged in as [email protected]
3. Ensure you have (or create) a
git repo for this project
For the deployment to work, you'll need to make sure
the project you're deploying is in its own git repo.
(It shouldn't be inside your V
School assignments folder. If it is, open finder and
drag it outside to be a sibling of
the assignments folder.)
$ cd path/to/your/project
$ ls -al
If the root folder of your project has a .git folder
show up after the ls -al command, that means this
project has its own git repo and you should be set to
move forward.
We'll use the Heroku CLI to create a new app for us.
One thing that's nice about using the CLI to create the
app is that it will also set up a new git remote for you
and save you a step in the future.
// ...
// Right before your app.listen(), add
this:
app.get("*", (req, res) => {
res.sendFile(path.join(__dirname,
"client", "build", "index.html"));
});
app.listen(...)
express.static is in charge of sending static files
requests to the client. So when the browser
requests logo.png from your site, it knows to look in
the build folder for that.
"proxy": "http://localhost:8000"
So your whole package.json should look something
like this:
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.17.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-scripts": "1.0.17"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --
env=jsdom",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:8000"
}
Now when you make a request to "/api/todos" (or
whatever other endpoint), React will notice that the
request wouldn't work if it made it to "http://
localhost:3000/api/todos", so it'll instead
use "http://localhost:8000" as the proxy URL
and make API requests to that endpoint instead. Note
that this only happens in a development environment
from your local machine. When deployed, we'll access
both the site and the API from the same host URL.
• Port numbers
• JWT Secrets
• Database connection strings that include
username and password
• Base URLs (if you're serving your client and
server completely separately)
In fact, if you currently have your port hardcoded to a number
right now, you should go change it to an environment variable.
Say you had it originally like this:
app.listen(5000)
You should create a variable near the top of your file like this:
const port = process.env.PORT || 5000;
Set up MongoLab
Heroku has an easy-to-use addon you can include in
your project very easily that spins up a database, gives
you a user and password, and creates an environment
variable all in one command for you. While you could
create your own account and set up your own
database, we'll just use this addon to do everything for
us.
mongoose.connect(process.env.MONGODB_URI
|| "mongodb://localhost/todos")
// Or wherever you specify your database
string
Again, this means it will try to find that environment
variable and use it (in the Heroku deployment) or if it
can't (locally it's undefined) it'll use the local
connection string.
.DS_Store
node_modules/
.env
*.orig
.idea/
.vscode/
Most of those probably won't be necessary for you,
but it doesn't hurt to add them now anyway.
"scripts": {
"heroku-postbuild": "cd client &&
npm install --only=dev && npm install &&
npm run build"
}
Another thing we want Heroku to be able to do is run
our server file with node once it's built. Heroku will
look for a Heroku-specific file called a Procfile to
tell it how to do that. If no Procfile is found, it will
just run npm start. So we need to add
the start script to our scripts as well. The whole
scripts section should now look like this:
"scripts": {
"start": "node server.js",
"heroku-postbuild": "cd client &&
npm install --only=dev && npm install &&
npm run build"
}
One last thing that sometimes will cause issues has to
do with your version of node.js. We'll also teach
Heroku which version of node to use for the project.
"engines": {
"node": “8.9.4”
}
After all this, your server's package.json should
look something like this:
{
"name": "mern-to-heroku",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"body-parser": "^1.18.2",
"express": "^4.16.2",
"mongoose": "^4.13.6",
"morgan": "^1.9.0"
},
"scripts": {
"start": "node server.js",
"heroku-postbuild": "cd client
&& npm install --only=dev && npm install
&& npm run build"
},
"engines": {
"node": "8.9.2"
}
}
You should now be all set up to deploy your site
through Heroku!
Deploy!
Once you've got everything above completed, your
deployment and updating of your site should go
through seamlessly. You'll use git to create a new
commit and push to the heroku remote:
$ git status
$ git add -A
$ git commit -m "Add a commit message
here. Probably 'initial commit' would be
fine for the first time"
$ git push heroku master
Pushing to Heroku takes a little longer than pushing
code to GitHub, so give it a few extra seconds. If
everything went correctly, it should show a success
message and tell you where your app is deployed,
which is at https://<your-app-
name>.herokuapp.com/
Updating your
Heroku app
Any time you make changes to your application, all
you have to do to update the live site is run your
usual git add -A and git commit -m "message",
but instead of pushing to your GitHub account, you'll
just run git push heroku masterinstead. This will
push your new code to your running Heroku instance
and relaunch the site with your changes.
Custom Domains
If you have purchased a domain name for your site
then here is how to make your custom domain
accessible via Heroku!
Export/Import
Database
Most projects will be fine without this step, but if you
really want all your data that you have while you've
been developing, you can export your local database,
and import it to MongoLab.
mongoDB://localhost/<db name>
(2. Export
(3. Import
Go to heroku.
In her
overview
mlab mongoDV (installed addon)
will open stuff mLab
When you added the addon, it did everything for you.
(uname and pword)
mongodb://:@