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.
$ 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.
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.
5) Apply the needed build settings for the Vue app. Netlify recognises the Vue stack and applies appropriate build settings which are
npm run build and the static assets are located on the
/dist directory on the app's root.
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.