Once you are done developing your App, the next step is to make it live or in other words, deploy it somewhere. Even though it's not a big deal, you might feel lost and get overwhelmed in this process because there seem to be a lot of different tools out there. If you are in this situation, No worries, I got your back.
In this blog I will guide you through the process of deploying your Vue.js Application in the easiest way possible. We will be deploying your app on 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 and compressed and production ready. To create a production build, on your terminal, enter the following command.
<pre><code>npm run build
</code></pre>
This will take a couple of minutes and once it's done you can see a dist folder on the root level of your project.
Now log on to your Patr account and head on to the Static Sites section from the Sidebar.
<img src="/static/images/blogs/blogs/common-images/login.webp" alt="">
Home -> Infrastructure -> Static Sites. From the the dashboard that appears, click on the ADD STATIC SITE button.
<img src="/static/images/blogs/blogs/how-to-deploy-a-vue-js-application/create-static-site.webp" alt="">
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 it is or uploading a compressed zip of the same.
<img src="/static/images/blogs/blogs/how-to-deploy-a-vue-js-application/fill-static-site-details.webp" alt="">
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.
<img src="/static/images/blogs/blogs/how-to-deploy-a-vue-js-application/confirm-modal.webp" alt="">
Thats it! your app is now live. Click on the iframe to view the deployed App.
<img src="/static/images/blogs/blogs/how-to-deploy-a-vue-js-application/static-site-dashboard.webp" alt="">

How to Deploy a Vue.js Application

Patr takes care of everything,
so you can focus on what really matters.

How to Deploy a Vue.js Application

Patr takes care of everything, so you can focus on what really matters.

Patr takes care of everything,
so you can focus on what really matters.