Deploy Node JS on Heroku, Mongo DB, and Vue JS

15. Deploy Node JS, Mongo DB, and Vue JS

In this article, we will deploy our Node JS API on Heroku, database on Mongo DB, and Vue JS app on our own hosting. It could be any hosting service of your choice.

Don’t worry, this is not the final chapter of this book. We will be adding more features to our chat app in upcoming chapters. Since we added the basic functionality required in a chat app, so you might be wondering: “How can I make this app live ?”, “Is it only for localhost ?”, “How can I show it to the world ?”.

No, this is not just for localhost. In this chapter, we will teach you how you can deploy your app on any web hosting of your choice.

For server-side deployment, we have options like Heroku, DigitalOcean, Amazon’s AWS, or Microsoft’s Azure. We will go with Heroku because it is simple. You can scale it easily, but you can also try the free version as well.

For databases, we will be using Mongo DB from their official site https://www.mongodb.com.

Mongo DB

First, you need to create an account and log in. Then you need to create a new database, please refer to the screenshot below.

mongodb create database
MongoDB create database

You need to select the shared database version because that is free.

mongodb shared
MongoDB shared

After that, create a shared cluster because shared clusters are free. They provide basic functionality, but that will be enough for starting. Screenshot on next page.

mongodb create cluster
MongoDB create cluster

Then create the cluster. After that, it will ask for a username and password. It is recommended to set a secure password.

mongodb create user
MongoDB create user

It will also ask for adding an IP address. You can add your current IP address.

mongodb add ip address
MongoDB adds the IP address

Finally, click on “Finish & Continue” and thus your cluster has been created. Now we need to connect with the cluster.

Connect with cluster

Simply click on the “Connect” button on your created cluster.

mongdb connect with cluster
MongoDB connects with cluster

Then a new page will open where you need to select a connection method. Select “Connect your application”.

mongodb connect cluster to application
MongoDB connects the cluster to the application

Then in the final step, it will show you the URL that you will need to connect with the database.

mongodb url
MongoDB URL

You need to copy this URL and paste it into your server.js Mongo DB connection. So your Mongo DB connection will look like this:

// connect with database
MongoClient.connect("mongodb+srv://<username>:<password>@cluster0.dd1oy.mongodb.net", function (error, client) {

You can see that I have removed the query string. It is because we do not need it. Make sure to change the username and password. So your Mongo DB has been deployed. Before deploying the Node JS app, we should first check the database. If you have changed the Mongo DB connection string, you can test the app.

Simply register a new user. Then in your Mongo DB cluster, click on “Monitoring”. Then you need to select the “Collection” tab.

mongodb deployment collection
MongoDB deployment collection

You will see your registered user in your live database. Congratulations! Your database is live, and it is Mongo DB. Now is the time to deploy your Node JS app.

If you prefer a video tutorial on how to deploy your Mongo DB, you can visit this link.

Heroku

First, you need to create an account at https://www.heroku.com/ or you can simply sign in (if you already have an account). After that, create a new app in your Heroku account.

Then, you need to download and install Heroku CLI in your system. You can download Heroku CLI from here: https://devcenter.heroku.com/articles/heroku-cli. Downloads are available for all platforms (Windows, Mac & Linux). After downloading, you need to install Heroku CLI.

After installation is done, you will be able to use the command heroku in your terminal. Make sure the server.js file has the path to the live Mongo DB connection. Also, make sure you added your website URL in socket IO CORS origin.

You can add it in api/server.js in the following object:

// sockets are used for realtime communication
const socketIO = require("socket.io")(http, {
    cors: {
        origin: ["http://localhost:8080", "http://vuejs.adnan-tech.com"]
    }
});

Then open the terminal in your web folder and run the following commands one by one:

heroku login

// Initialize a Git repository
git init

// Point remote address towards your Heroku app
heroku git:remote -a your-app-name

// Add all files in Git
git add .


// Commit all files
git commit -m "Initial commit"

// Deploy all files on Heroku
git push heroku master

Replace the your-app-name with your actual Heroku app name. You can easily access your Heroku dashboard, it should be something like: https://chat-station.herokuapp.com/

The error you might face

When you access your API URL in the browser, you might encounter an error. You can check the errors by running the following command in your terminal:

> heroku logs --tail

This might tell you the error is in bcrypt module. To fix this, to need to un-install bcrypt module, and install bcryptjs module.

> npm uninstall bcrypt
> npm install bcryptjs

Then in your api/server.js, you need to include it like this:

const bcrypt = require("bcryptjs");

And also, you need to replace the following code:

bcrypt.compare(password, user.password, async function (error, isVerify) {
    if (isVerify) {

With this:

bcrypt.compare(password, user.password, async function(err, res) {
    if (res === true) {
        ...

Another change you need to do is to replace:

bcrypt.hash(password, 10, async function (error, hash) {
	...

With this:

bcrypt.genSalt(10, function(err, salt) {
    bcrypt.hash(password, salt, async function(err, hash) {
        ...

For more details to deploy your Node JS app on Heroku, kindly visit this link.

So our Node JS API and Mongo DB have been deployed. Now comes the final step, that is, the deployment of the Vue JS app.

Vue JS

First, you need to buy hosting. Some of the best hosting providers are:

  • a2Hosting
  • BlueHost
  • Siteground
  • Hostgator

But you can pick any other of your choice if you want. Then we need to set the API and website path in the main.js file in our Vue JS app.

app.config.globalProperties.$mainURL = "http://vuejs.adnan-tech.com"
app.config.globalProperties.$apiURL = "https://chat-station.herokuapp.com"

As we will be deploying the Vue app on a sub-domain I created. And our API URL will be the path of our Heroku app. Another thing you need to keep in mind is the .htaccess file. You will face a routing problem if you do not have an “htaccess” file on your server.

So, create a new file named .htaccess (notice the dot) at the root of your website and write the following code in it:

<IfModule mod_rewrite.c>
	RewriteEngine On
	RewriteBase /
	RewriteRule ^index\.html$ - [L]
	RewriteCond %{REQUEST_FILENAME} !-f
	RewriteCond %{REQUEST_FILENAME} !-d
	RewriteRule . /index.html [L]
</IfModule>

This will solve all the routing problems you might face on the live site. Now to create a “build” of the Vue JS app, you need to run the following command in the terminal opened in the “web” folder.

> npm run build

It will create a “dist” folder at the root of your Vue project. You can zip that folder and paste it into your website’s file manager and unzip the file. Then access your website with your domain name. You will see that your full-stack app is now live. Congratulations! (again)

So you have learned how to deploy your full-stack app, Node JS on Heroku, Mongo DB on mongodb.com, and Vue JS on your own hosting server.

If you face any problems in the deployment of any of the platforms, please feel free to contact us.





Please disable your adblocker or whitelist this site!