How to Deploy your Vue.js App to Netlify
Photo by Bill Jelen on Unsplash
Introduction
Vuejs is a Progressive Javascript framework for building reactive and easily scalable websites
Netlify is a fast static web hosting platform that automatically redeploys your website when you push your to git repository
Prerequisites
Make sure you have the following:
- NPM
- Vue CLI
- GitHub account
- Netlify account
- GitHub CLI (Optional)
Let’s deploy!
Create a new Vue project using Vue CLI and change to its directory
vue create vuejs-netlify
cd vuejs-netlifyCreate a remote repo using GitHub CLI
gh repo create — public vuejs-netlifyAlternatively, you can create it on the GitHub website by going to https://github.com/new
Git push to the remote repo
git push -u origin masterClick on New site from Git
Connect to the Git Provider. In this case, GitHub
Pick the vuejs-netlify repository
The master branch is the default branch to deploy from. However, you can deploy from any other branch
Add yarn build or npm run build as the build command. Running either of the commands will generate a dist folder where all the code is compiled
Therefore, add dist as the publish directory
Deploy the website by clicking Deploy site
Wait for the website to be deployed. This shouldn’t take too long as Netlify is a fast static web hosting platform
Open the website URL automatically generated
You’ve done it! You’ve deployed your Vuejs App! 🎊🎊🎊
Found a typo? Want to contribute? Here’s the Source Code
Follow me on Twitter for Blog updates and Great web development content
