How to deploy a Vue.js App on Patr

Once you’re all done with the development of your application, the next step is to make it live — in other words, deploy it on a platform. Even though it’s not a big deal, you might feel a tad bit overwhelmed in this process, due to the tons of options available out there. But fret not, we’ve got your back.

In this blog, we will guide you through the process of deploying your Vue.js Application in the easiest way possible. We will pick one of the easiest platforms to work with — Patr. So, let’s get started!

The first step is to create a production build of the application. A build is nothing but a bundle of all the code you have written for your app which is optimized, compressed and production-ready. To create a production build, on your terminal, enter the following command:

npm run build

This will take a couple of minutes and once it’s done you can see a dist folder in the root level of your project.

Now log on to your Patr account and head on to the Static Sites section from the Sidebar. In case you don’t have an account already, you can head onto app.patr.cloud and create one in a couple of minutes!

Once you log in, navigate through Home -> Infrastructure -> Static Sites. From the dashboard that appears, click on the ADD STATIC SITE button.

Enter your Site name and upload the dist folder that was created previously, with a click on the UPLOAD button. Patr also supports uploading zip files. So, you could choose between uploading the dist folder as is or uploading a compressed zip file of the same.

Now that you have uploaded the site, the final step is to confirm the deployment of your Vue app. Click on the CREATE button and confirm the creation from the Modal that appears.

And that’s it, your app is now live! Click on the iframe to view the deployed App.

For more content on getting started with deployments & everything DevOps, check out the Patr-onus blog.