In the first part of this tutorial, we’ve learnt how to build a single-page-application from scratch with Vue, the progressive JavaScript frontend framework, and Node, the server-side variant of JavaScript. The architectural paradigm REST (Representational State Transfer) was used for connecting the frontend to the backend.

In this second part of the tutorial, we will describe how to deploy our app to the cloud within not more than 10 minutes. Both our Vue frontend as well as the Node backend will be available online accordingly. Luckily, the services we use are all free of charge, so let’s start!

Heroku and Netlify

We decided to use two well-known cloud providers which provide good usability at no costs, at least for personal projects. Netlify is a web developer platform that claims to enable a 10 times faster path to more performant, secure and scalable websites and apps. Heroku is a cloud platform which allows developers to build, deliver, monitor and scale apps without the need to provide own infrastructure in the web. Heroku offers a wider range of services coming with a slightly deeper complexity using it.

Backend at Heroku

There are two ways to deploy our REST backend at Heroku. In the first variant, a command-line-interface is installed locally which allows you to push your code changes directly to Heroku. The code will be deployed automatically to the company’s web server and your app will be started subsequently. In the second variant, code changes needs to be pushed to a standard GitHub repository. By a so-called „deploy hook“ Heroku will then be informed about any changes. Subsequently, your code will be deployed automatically to the company’s web server.

In the following, we make use of the second variant:

  • Make sure you’ve successfully installed NPM, Node and Git
  • Modify the package.json file of your app so that the currently used version of Node is specified as follows:
    „engines“: {
    „node“: „14.x“
    }
    Replace „14.x“ by your installed version number. You can find out which version you’re using by typing node –version
  • Create a file .gitignore to prevent files being pushed on Git which are not meant to be under version control. The file should contain the following:
    /node_modules
    npm-debug.log
    .DS_Store
    /*.env
  • Change your server.js in such a way that the web server port is being taken from the environment variable of your cloud service. If using the server locally, it should be set in a static way:
    const port = process.env.PORT || 5000;
    app.listen(port, () => console.log(„Server listening on port ${port}!“));
  • Register at GitHub if not done so far. Create a new repository and set the visibility to public or private
  • Changet to the folder of your Node application and execute the following commands to deploy your backend on GitHub:
    git init
    git add .
    git remote add origin https://github.com/my-user/my-backend-repo.git
    git commit –m „initial commit“
    git push -u origin master
  • Finally register at Heroku. In the configuration panel, create a new app and choose „GitHub“ as „Deployment method“ in the „Deploy“ section. Connect to GitHub and allow access to your repositories. Activate „Enable Automatic Deploys“ and push your last changes to your GitHub repository. This change will then be visible on Heroku at „Latest activity“ and the build of your app will be started. Subsequently, your backend should be available on Heroku.

Further information concerning the Heroku deployment you may find at:
https://devcenter.heroku.com/articles/deploying-nodejs https://devcenter.heroku.com/articles/getting-started-with-nodejs

Frontend at Netlify

Now, it’s time to deploy your Vue frontend at Netlify. Again, we achieve this by a „deploy hook“ in which the deployment automatically takes place when code changes appear at your GitHub repository.
To do so, take the following steps:

  • Modify your frontend code so that your new backend URL will be used. Run a test locally.
    Hint: Far better than a static code change would be the use of environment variables for saving the backend URL. However, this requires a more extensive configuration, as shown in https://community.netlify.com/t/how-to-access-netlify-continuous-deployment-pre-defined-env-variables-in-client-side-js/2704/13
  • Create a new GitHub repository and set the visibility to public or private. It is not required to create a new README file since there exists already one within the Vue project.
  • Change to your Vue folder locally and execute the following commands:
    git init
    git add .
    git remote add origin https://github.com/my-user/my-frontend-repo.git
    git commit –m „initial commit“
    git push -u origin master
  • Register at Netlify and create a new site by connecting to your GitHub account. Use „npm run build“ as your build command and „dist“ as your publish-directory.
    Your frontend should now be built and appear online. If you notice unexpected application behavior, check in your browser console whether the connection to your cloud backend works.

Further information regarding the deployment of a Vue application at Netlify you may find at:
https://www.netlify.com/blog/2019/11/30/how-to-deploy-a-vue-site/

Congratulations! Within apparently no more than 10 minutes you achieved publishing your own single-page-application to the world wide web! It was never easier to benefit from smart cloud services as today 🙂