Deploying Vuejs apps

I have been building apps in Vuejs for some time now and totally love the framework! I would encourage you to try building something.

Once you are ready with your apps, you definitely would like to show it to the world. In this post, I will be explaining how to deploy your beautiful Vuejs apps on Github pages and Netlify.

Netlify

This is pretty straightforward.

  1. Go to netlify.com

  2. Import site from git

  3. Add the following commands in deploy settings

/** Build command **/
npm run build   

/** Publish directory **/ 
dist 

Tada! Your site should be live on a generated URL. If you want to add a custom domain for your website (which is quite likely), follow the instructions here


Github Pages

  • Add vue.config.js to your project with the name of your repo. Eg. Suppose the name of your repo is my-awesome-project

module.exports = {   publicPath: "/my-awesome-project/", }; 
  • Commit and push the changes to master

  • Add deploy.sh to scripts folder in your project root. (Create the folder if it doesn’t exist)

  • Add the following code to deploy.sh

#!/bin/bash

# Exit on error
set -e

# Checkout gh-pages branch
git checkout --orphan gh-pages

# Build command
npm run build

# Add, Commit and Push
git add dist
git commit -m "Deploying app to gh-pages"
git push origin HEAD:gh-pages --force

# delete the dist folder
rm -r dist

# Back to master
git checkout master --force

# Delete the gh-pages branch from local
git checkout -D gh-pages 
  • Run deploy.sh when you want to deploy ✔️


I have deployed either on Netlify or GitHub pages, there are other ways as well. You can explore official Vue CLI deploy documentation. (Link in resources)

Resources