Host VueJS application using Netlify
Make VueJS application LIVE and ready for public use in under 5 minutes with Netlify.
In this blog post, we will look at how we can deploy the VueJS application within 5 minutes to the Netlify platform and make the application Production-Ready and LIVE to be accessible globally.
What is Netlify?
As per official documentation Netlify discovers and installs your project dependencies and allows you to write powerful plugins that hook into any stage of the build process.
By unifying the elements of the modern decoupled web, from local development to advanced edge logic, Netlify enables a 10x faster path to much more performant, secure, and scalable websites and apps.
Pre-requisites
- Working VueJS application. (We will scaffold a quick one in this blog post.)
- Github Account. (Sign UP)
- Netlify Account. (Sign UP, No credit card is required during sign-up process. )
Netlify provides good Continuous deployment, hence we will use Github so every push to master or main branch triggers deployment on Netlify. Gitlabs and Bitbucket are other alternative for github.
Minimal Sample VueJS Application (Optional - For blog purpose)
We use the below command to scaffold the basic VueJS application, we will use Vue CLI for the same :
VueJS CLI Installation
npm install -g vue-cliVerify if CLI installed properly, by firing the below command (Globally installed, so can access from anywhere)
vue --version
VueJS scaffolding SPA Command
vue init webpack vuejs-netlify
During init, it will ask a few questions related to using of Vue Router, ESLint if yes what presets, NPM or YARN, Setup Tests? You can keep the default or modify as per your need
- We will now, just run the application locally to see if all is good. We aren't changing anything, anywhere.
cd vuejs-netlify && npm run dev
If all is good, with no errors we can access our VueJS SPA locally on port 8080 by default
We will just push code to our github repository hosted against main branch. github.com/cycorax12/vuejs-netlify
Deploy Site/Application to Netlify
- Login to Netlify. We are using the Free tier where there are limitations that can be upgraded, for basic open-source or demo purposes you can use without issue. It has a decent number of resources for the Free tier which resets every month.
On login, It will show the dashboard as below, we will click on Add New Site and then Import from Existing Repository
Select Git provider of your choice, we are using GitHub in this case. If it asks for authorization please provide permission for the same.
Once authorized it will show all repositories against your GitHub account, select repository containing your VueJS application, we will select vuejs-netlify.
Sometimes, it may not show all repositories, due to permission issues, in that case, you can manually click below and pull in the required repository
Now select the branch you want to deploy. We are selecting
mainin this case. If you want to configure a few build settings you can do it, we will keep default as is and Click Deploy Site.
Once done it will take you to the New Site dashboard, by default it generates a random name for the site as below:
Also, the immediate build is triggered as below
If no errors or issues during the build, the build will be published and the Site will be LIVE.
You can visit the application by clicking on the below link
Now you and anyone can access your application. Your application is LIVE in Production with less fuss :)
You can set up a custom domain easily too, with an SSL certificate taken care of. Apart from this, Netlify offers more features like FaaS, Analytics, Auto Scale Cluster, CDN Configuration, Security, HA, and lots more, etc.
You can upgrade your plan if you want to scale or utilize more features.
Useful Resources
Thank you for reading, If you have reached it so far, please like the article, It will encourage me to write more such articles. Do share your valuable suggestions, I appreciate your honest feedback and suggestions!