How to deploy your Vue app with Netlify in less than 2 min!
Netlify is a platform to deploy modern static websites that will help you to easily deploy your Vue app and I will show you how to do it.
Prerequisites
A Vue App
You have your Vue app (If you don’t know how to setup one quickly, check this tutorial!), and now you want to deploy it to show it to other people or the entire world.
A git repository
In order to follow this tutorial, your code must be in a git repository, let’s use GitHub (but you can also use Gitlab or Bitbucket).
Netlify comes into action now. First, head to Netlify and create an account, it’s free!
Create a new site with Netlify
All the further steps can be done thanks to Netlify’s interface.
After having created your account, click on New site from Git.
You’ll be transferred to a 3 steps wizard. In the first step, all you have to do is to choose your Git provider between three options: GitHub, GitLab, and Bitbucket.
Then you’ll be able to pick a repository among what belongs to you.
After that, it’s time to tell Netlify how to build our Vue app.
In the third and last step, we need to fill the build command and publish directory, do as follow, it’s the most important part:
- for Build command: yarn run build
- for Publish directory: dist
Then press the Deploy site button, wait that the build finishes and voila, your app is online.
Your site is now live!
What is great is that each time you will push in your selected branch, you will see the result in your URL after it has been build by Netlify. You don’t need to do anything else manually to deploy your app.
You can also choose to have as many URL as branches in your Git repository. That’s really nice when you have many features each sitting on a different branch!
Your site is live with a Netlify URL but if you want, you can also configure a custom URL.
I’m building a Vue ebook with lot of tips! Subscribe here!
