Hi Dear,
So today, I will walk you through on how to Deploy your awesome Vue or Quasar App on netlify with either of the two methods
Table Of Contents
Deploy a Built Directory 😊
Since Netlify (as at the time of writing this blogs), hosts our static files; html, css etc. You could manually run your Cli build command, to generate the static files, which would be stored in a dist/ directory. (depends on output path though).
// For Vue Cli
npm run build
OR
yarn build
// For Quasar Cli
quasar build
Once this is done, a dist
folder is generated for you. So all you need do, is just to visit app.netlify.com/drop
Open your Explorer ( where you project dist directory is found on your machine ) side by side as with you browser, Drag the dist folder and Drop on the space provided by Netlify. Trust me, it's that simple.
NB: If you choose to Deploy this way, then each time you make a change, you will have to Drag and Drop all over again to update.
Deploy From Version Control System 👽
Lets say you don't Like stress that much. A version control system, could be your Github, Bitbucket, GitLab. Once you open the Netlify deploy section, you will see 'New Site from Git':
- Click on the button
- Link your preferred version control system
- Authenticate
- Choose on the Repo you wish you publish
- Enter the Build command (as stated earlier)
- Enter your Output directory
Congratulations
You have automatically merged your Repo to Netlify, so each time you make
a push to master. Netlify builds your app and updates it for you.
Thanks.
Top comments (2)
What is your build script for your vue/quasar app ?
I can't find a way to exit quasar build process, therefore the build in Netlify never stops...
Thanks for sharing this,it just saved me