Part 4: Deploying to mLab and Heroku
Everything from deploying our application’s database to mLab and then Heroku.
In our last article, we successfully developed the CRUD operations for our application. We also hosted our database locally and tested the API endpoints using Postman. In this article, we will be deploying our database to mLab and the application to Heroku. Don’t worry, this is pretty easy and should be fun. So, let’s get started.
Deploying to mLab
Open up mLab and create an account if you don’t have one, else login.
Click on the create new button and work your way through the sandbox option. Note that the sandbox offers a free 0.5GB storage which is perfect for development. Next, you’d be required to fill a name for your database. I used projectsupport when creating this tutorial and that’s it. Click submit to finish. mLab will create your database and respond with a MongoDB URI which you’ll need to connect to the database remotely.
Next, you will create a database user and an enabling password. Click on the Add database user to get this done, and that’s it for mLab. With this sorted out, let’s integrate mLab to our application. Oh yeah, we will need to install a node module, dotenv to load environment variables from .env file to process.env. So, let’s get started.
First, npm install dotenv to save to dependencies. Next, import and set up dotenv as shown in line 6 and line 14. Replace the local MongoDB in line 17 with process.env.MONGODB. Then, create an .env file in the root directory and that’s it. Here’s the code if the image above doesn’t load.
...
// import dependencies
import dotenv from 'dotenv';
...// set up dotenv
require('dotenv').config();
...// connect to mongoose
mongoose.connect(process.env.MONGODB)
...
Next, create an .env file and assign the MongoDB URI we got from mLab to MONGODB. In the image above, notice I replaced the <dbuser> with the database user I created and did same for password. Heads up, you might encountered issues if your password contains@ .
That’s it everyone. We have successfully connected to the mLab database and can test this using postman. With this done, it’s time we push our codes to GitHub and merge with the develop branch. You know the drill right?
// add to repository
git add .// commit to repository
git commit -m 'connected to mlab'// push to GitHub
git push origin ft-CRUD// checkout to develop
git checkout develop// merge with ft-CRUD
git merge ft-CRUD
With this, we have successfully merged our codes with the develop branch. However, I will rather we host from our master branch and not develop branch. With this said, let’s merge to master branch.
// checkout to master
git checkout master// merge with develop
git merge develop
Next, we will be deploying to Heroku, but we will need to sort a few things first. Note: you should be in the master branch now. In your package.json, replace 'start:dev scripts with 'start' Next, create a new file to house your home route. This is completely a personal preference.
If the above images doesn’t load, here’s what I did. For the first image, I moved the home route to a new file. Create a new file, index.js in the route directory and add the code below. The code is pretty straightforward.
// Home route
const homeRoute = (app) => {
app.get('/', (req, res) => {
res.redirect('/api');
}); app.get('/api', (req, res) => {
res.status(200).json({
message: 'Welcome to Project Support',
});
});
};export default homeRoute;
For the application entry point…
// import dependencies
...
import homeRoute from './server/routes/index';
...// set up route
homeRoute(app);
...// set up a wildcard route to catch related endpoints and outputs a response.
app.get('*', (req, res) => {
res.status(400).json({
message: 'This is Project Support. Please see documentation for the proper routes.',
});
});
...export default app;
If you can see the image above, you’d notice I took off the console.log from the master branch. It’s not best practice pushing that production. There are several ways of doing this, but this will suffice for now. Finally, push this to GitHub and that’s that. You should know the drill by now. First, add all codes to repository, commit, and then push.
Deploying to Heroku
Open up Heroku and create an account if you don’t have one, else login.
Click on New to create a new app. You will be required to fill the name of the application. I used projectsupport for this tutorial and then submit.
You can use Heroku CLI to deploy if you prefer this, but I prefer to connect with GitHub.
Remember we’re deploying our master branch, so yeah, click deploy masterbranch.
Voila. Our application is live on Heroku.
In our next article, we should add some view using any server template such as pug, hbs and the likes. Also, did you notice that the application’s URL redirected from '/' to '/api' Now, isn’t that awesome.
P.S: While deploying this application, I encountered some issues and the only way I know around it was to change the port number. If you’ve followed this series, you’d noticed we used 5035 in the ft-CRUD branch and then 7066 in this branch. Don’t worry, besides this, you shouldn’t have any difficulty.
The next article in this series will be for user authentication.
Thank you for reading this far. Did you enjoy this article, kindly let me know. Also let me know if you encountered any issues implementing this. And finally, don’t fotrget to clap a lot. Thanks in advance.
