How to deploy your Vue app with Netlify

How to deploy your Vue app with Netlify
You're just done with building that awesome Vuejs App and wondering how you can deploy it? I'll show you how to do it with Netlify. Netlify is a cloud computing company that offers hosting and serverless backend services for static websites.

It offers continuous integration and a whole lot of awesome features and hosts your site directly from your git repository.

I believe your project should be on GitHub or the likes already so let's create a Netlify account. You can sign up with your GitHub or Gitlab accounts.

After Signing up it would bring you to your dashboard, mine is showing some sites I have on netlify already. Click the New site from git button to add a new site.

You will be given options to add from GitHub, GitLab or BitBucket, choose wherever your repository is. I'm going to choose GitHub.

Since it's your first time, you have to configure Netlify on GitHub, so click the button to do so and confirm your password.

You can choose to select all repositories or just the ones you want to deploy. Select the favourable option to you and save.

This should bring you back to netlify with some options to fill. In the branch to deploy field, type in your deploy branch which should most likely be master.

The Build command for Vue is npm run build

And the publish directory should be dist

Click on Deploy Site and your site is live on netlify!!

You can set up a custom domain if you have one

Or edit the one given to you by netlify

I hope this article has helped you to deploy your Vuejs App, if you encounter any issues you can leave a comment and I'll be sure to respond or connect with me on Twitter

I look forward to hearing from you, KEEP BUILDING!!

Recommended Reading


Top 10 Tips For New Vue.js Developers

MEVN Stack Tutorial With Example From Scratch

Using Renderless Components in Vue.js

Accessing the virtual DOM using render functions in Vue JS

An API Gateway Example Bringing Together Vue.js, Express, and Postgres

Building Micro Frontends with React, Vue, and Single-spa

How to implement client-side pagination in Vue.js

Accessing the virtual DOM using render functions in Vue.js

Template in Vue.js

Suggest:

Here are 380 Ivy League courses you can take online right now for free

Most Popular JavaScript Frameworks 2019 - I'm Programmer

Building a Video Blog with Gatsby and Markdown (MDX)

How to check if Checkbox is Checked or not using Plain JavaScript

A Beginner Guide To Node.js (Basic Introduction To Node.js)

How to create Restful CRUD API with Node.js MongoDB and Express.js