Deploy Vue CLI Apps on Netlify
This tutorial assumes a basic knowledge of git.
In a sea of options for deployment of static serverless apps, Netlify is one the most popular (Used by more than 1 million developers and businesses as of Aug 3) and user-friendly Jamstack deployment services out there. Having an extensive free tier and incorporating a multitude of features such as build on git push, build on webhook call, LAMBDA Functions support (Netlify Functions), branch deployment, free automatic HTTPS and so on, Netlify offers one of the simplest approaches to Vue CLI apps deployment. In this tutorial we are going to demonstrate how we can deploy a Vue CLI app on Netlify.
Install and create Vue CLI App
Install Node.js and the Vue CLI if you have not done so.
$ npm i @vue/cli
On completion, switch into your projects directory and create a new Vue app.
$ vue create vue-cli-app-netlify
Select features needed for the app from the Vue CLI tool prompt and after it's done creating the project and installing the dependencies, switch to the app directory and serve your Vue app locally to see if everything is working.
# cd into app directory
$ cd vue-cli-app-netlify
# serve app locally
$ npm run serve
If everything works, create a git repository and push your code to it. Note: As of writting, Netlify supports only three git clients - Github, Bitbucket and GitLab.
Deploying Site On Netlify
To use Netlify, you need to head to netlify.com and sign up for an account. On completion, you will be redirected back to the Netlify dashboard where the following steps will guide you through deploying the app we created and pushed to the git repository above.
Add new site from git.
Select git client.
Log in to git client and give Netlify the permission to access repositories.
Select the git repo to deploy, in this case the
vue-cli-app-netlifyrepository.
Apply the needed build settings for the Vue app. Netlify recognises the Vue stack and applies appropriate build settings which are
npm run buildand the static assets are located on the/distdirectory on the app's root.
Deploy site and wait.
When the site has completed building, open the site link (in green color) to view the deployed site.
Optional: To update site domain to a less random one, go to
Site Settings>Site details>Change site nameand update it.
By now we have a live deployed Vue CLI app accessible by visiting the given ($site_name).netlify.app link. This is the first step into deploying a Vue CLI app on Netlify, the next parts of this series will be a deep dive and in depth look into more features supported by Netlify.
The source code for this tutorial is available in the following repo.