Virendra Oswal
Virendra Oswal's Blog

Virendra Oswal's Blog

Host VueJS application using Netlify

Host VueJS application using Netlify

Make VueJS application LIVE and ready for public use in under 5 minutes with Netlify.

Virendra Oswal's photo
Virendra Oswal
·Feb 13, 2022·

4 min read

Subscribe to my newsletter and never miss my upcoming articles

Play this article

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-cli

  • Verify if CLI installed properly, by firing the below command (Globally installed, so can access from anywhere)
    vue --version 1-vue-version.JPG

  • 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 2-localhost-running.JPG

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 3-add-new-site.JPG

  • Select Git provider of your choice, we are using GitHub in this case. If it asks for authorization please provide permission for the same. 4-import-existing-repo.JPG

  • Once authorized it will show all repositories against your GitHub account, select repository containing your VueJS application, we will select vuejs-netlify. 6-pick-repo.JPG 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 5-missing-repo.JPG

  • Now select the branch you want to deploy. We are selecting main in 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. 7-overiew-deploy.JPG

  • Once done it will take you to the New Site dashboard, by default it generates a random name for the site as below: 8-random-site-generated.JPG Also, the immediate build is triggered as below 9-build-triggered.JPG

  • If no errors or issues during the build, the build will be published and the Site will be LIVE. 10-build-published.JPG

  • You can visit the application by clicking on the below link 11-link-to-website.JPG

Now you and anyone can access your application. Your application is LIVE in Production with less fuss :) 12-netlify-deployed.JPG

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!

I would love to connect with you at Twitter | LinkedIn.

 
Share this