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.
Go to netlify.com
Import site from git
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 ismy-awesome-project
module.exports = { publicPath: "/my-awesome-project/", };
Commit and push the changes to master
Add
deploy.sh
toscripts
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)