Deploying a Vuejs Web App with Netlify

Deploying a Vuejs Web App with Netlify

·

0 min read

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. 1.png

2.png

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. 3.png

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

Since it's your first time, you have to configure Netlify on GitHub, so click the button to do so and confirm your password. 2019-08-23 (4).png

2019-08-23 (5).png

2019-08-23 (6).png

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

2019-08-23 (7).png

2019-08-23 (8).png

2019-08-23 (9).png

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.

2019-08-23 (10).png

2019-08-23 (11).png

The Build command for Vue is npm run build

2019-08-23 (12).png

And the publish directory should be dist

2019-08-23 (21).png

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

2019-08-23 (17).png

You can set up a custom domain if you have one

2019-08-23 (18).png

Or edit the one given to you by netlify

2019-08-23 (19).png

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