Deploy Vue CLI Apps on Netlify
Tags: webdev, vue, netlify
Published: 2020-12-27 00:52:29

---
title: Deploy Vue CLI Apps on Netlify
published: true
description: A beginner level tutorial into deploying Vue CLI apps on Netlify.
tags: webdev, beginner, vue, netlify
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/sqdelfqd3cyfabfriw9s.jpg
series: Vue CLI Apps and Netlify
canonical_url: https://jamesinkala.com/blog/deploy-vue-cli-apps-on-netlify/
---

*This tutorial assumes a basic knowledge of [git](https://git-scm.com).*

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](https://www.netlify.com/blog/2020/08/03/celebrating-1-million-developers-whats-next-for-netlify-and-the-jamstack/)) 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](https://nodejs.org/en/) and the [Vue CLI](https://cli.vuejs.org) if you have not done so.
```sh
$ npm i @vue/cli
```

On completion, switch into your projects directory and create a new Vue app.
```sh
$ 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.
```sh
# 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](https://www.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.

 1) Add new site from git.
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9w7e7nno02su62y0ukbe.png)  

 2) Select git client.
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/o6w4orppgl3fi0e6kyyy.png)  

 3) Log in to git client and give Netlify the permission to access repositories.
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/050d50ipnb5z9ta9tsrx.png)  

 4) Select the git repo to deploy, in this case the `vue-cli-app-netlify` repository.
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rwfyzjbbtoc7xul4d9nl.png)  

 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.
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/17g73izkyhpu7lbbcwqg.png)  

 6) Deploy site and wait.
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hc7ooznr0lmxr0layfld.png)  

 7) When the site has completed building, open the site link (in green color) to view the deployed site.
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2nnpha6qtsrf22mv2ed6.png)  

 8) Optional: To update site domain to a less random one, go to `Site Settings` > `Site details` > `Change site name`  and update it.
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/91dbdpkfk9o05cfplfhj.gif)  

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.  
{% github 104-Keys/vue-cli-app-netlify %}