loading...
Cover image for Deploying Vue | Quasar App on Netlify

Deploying Vue | Quasar App on Netlify

mrbrowny profile image Ikwegbu George ・2 min read

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':

  1. Click on the button
  2. Link your preferred version control system
  3. Authenticate
  4. Choose on the Repo you wish you publish
  5. Enter the Build command (as stated earlier)
  6. 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.

mrbrowny image

Posted on by:

mrbrowny profile

Ikwegbu George

@mrbrowny

The Last of my Parents | Lover of Tech | FrontEnd Dev

Discussion

markdown guide