• Deploy Vue CLI Apps on Netlify

    Deploy Vue CLI Apps on Netlify

    Dec 27, 2020Updated on Apr 3, 2021

    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.

    1. Add new site from git. Add new site from git

    2. Select git client. Selecting a git client

    3. Log in to git client and give Netlify the permission to access repositories. Giving Netlify permissions on git client

    4. Select the git repo to deploy, in this case the vue-cli-app-netlify repository. Selecting the git client to be deployed

    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. Provinding build settings

    6. Deploy site and wait. Deploying site

    7. When the site has completed building, open the site link (in green color) to view the deployed site. Netlify's site overview page

    8. Optional: To update site domain to a less random one, go to Site Settings > Site details > Change site name and update it. Site updating form

    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.

    A vue-cli app deployed on netlify