DEV Community

loading...
Cover image for Deploy Vue CLI Apps on Netlify

Deploy Vue CLI Apps on Netlify

xinnks profile image James Sinkala ・3 min read

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
Enter fullscreen mode Exit fullscreen mode

On completion, switch into your projects directory and create a new Vue app.

$ vue create vue-cli-app-netlify
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

1) Add new site from git.
Alt Text

2) Select git client.
Alt Text

3) Log in to git client and give Netlify the permission to access repositories.
Alt Text

4) Select the git repo to deploy, in this case the vue-cli-app-netlify repository.
Alt Text

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

6) Deploy site and wait.
Alt Text

7) When the site has completed building, open the site link (in green color) to view the deployed site.
Alt Text

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

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 logo 104-Keys / vue-cli-app-netlify

A vue-cli app deployed on netlify

vue-cli-app-netlify

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Customize configuration

See Configuration Reference.

Discussion (0)

Forem Open with the Forem app