How to deploy your machine learning web application using Heroku(Vue.js and Python POC)

In this tutorial, we deploy a web application for users to interact with our machine learning model. This tutorial assumes you already have a backend hosting a machine learning prediction REST endpoint as well as a frontend web app. To try out the frontend implementation for yourself, you may go to hdbpricer.com

This is part 4 of a 4-part tutorial
1. Building a good prediction model
2. Hosting the model prediction as an API endpoint on Flask
3. Building a simple VueJS frontend for a users to price their HDBs
4. Deploying the entire full stack application to the internet

The Git repository for the implementation can be found here
My hdbpricer app

This is a Proof-of-concept (POC) Deployment and is not suitable for production workloads.

If you would like to deploy a production ready web application, you should add an nginx reverse proxy and and WSGI server for the backend. This is not covered in this tutorial.

BACKGROUND

Most Machine learning engineers / Data scientists would likely start off their work with jupyter notebooks and will not be building full stack applications. Therefore, I believe this tutorial will be helpful for the Machine learning engineers to create a quick intuitive application deployed on the internet to showcase the value they are delivering.

Getting started

As a person starting out, you would likely choose the lowest cost option before thinking of how to scale. For this, I recommend Heroku. With Heroku, it provides buildpacks that allow you to ignore the infrastructure, and deploy your packaged code in the quickest way possible.

Sign up for a Heroku account

Literally sign up for an account for free. There’s nothing you need to do at this step.

Configure your application

As mentioned previously, Heroku utilises buildpacks. Here’s what you have to do for your front end and back end respectively

Vue.js front end

You will need to use a node.js server to serve your Vue.js application. Here’s the server file.

const express = require('express'); const serveStatic = require('serve-static'); const path = require('path'); app = express(); app.use(serveStatic(path.join(__dirname, 'dist'))); app.use('/robots.txt', express.static(path.join(__dirname, 'dist/public/robots.txt'))); app.use('/sitemap.xml', express.static(path.join(__dirname, 'dist/public/sitemap.xml'))); const port = process.env.PORT || 80; app.listen(port);

You will then need a Procfile to help Heroku understand what you want it to do when it sees your repository. Essentially when Heroku sees this, it knows that it will need to use the node buildpack to run this application.

web: node server.js

Flask backend

As mentioned previously, this is not a production build and is only a POC. Hence, I will use the python buildpack to run Flask directly.

web: python app.py

Push your application to Github repository

Push your front end into one repository, and backend into another.

Example

My repository as shared in this tutorial is not what I deployed to hdbpricer.com , hence it is not structured in that way.

Create the apps on Heroku

Just like the Github repos, do create two different apps on Heroku as well.

Connect your Heroku app to your Github

Deploy

You many manually deploy

You can check the logs via the website in the Activity tab. Else, you may also do this on the Heroku CLI if that’s what you prefer

Setup auto deployment (Optional)

In a production scenario, you might want to build a proper CICD pipeline. I feel Azure devops does a pretty awesome job for that.

Set up cronjobs (Optional)

Well, your free Heroku app sleeps. You can set up a cronjob here for free

This sends a GET request to your URL at a frequency you prefer. This however, will make you use up your free dynos (runtime) available on Heroku. If this is a POC, you don’t have to do this

Monitor dynos (Optional)

Got to your account settings > Billing to see how much dynos you have used. To enable more dynos, you can link your credit card. To understand more about dynos, go here

Add a domain name from Namecheap (Optional)

I chose to buy my domain names from namecheap due to the low costs.

Here’s how to link your namecheap domain to heroku

You can then link it to Heroku like this

Heroku

Namecheap

Conclusion

That’s how you will be able to quickly deploy your application POC to Heroku. Doesn’t it feel great when the value of your application can now be accessed by anyone on the internet?

I understand that some of you might run into specific use cases or bugs when following my tutorial. Feel free to reach out to me and I will gladly help.

All the best! Thanks for reading 🙂

Originally published at http://royleekiat.com on November 27, 2020.