How to deploy Vue js on shared hosting?

If you are a passionate person that likes building stuff in your free time, you might have a shared hosting plan which you use for deploying your side projects. Shared hosting is convenient in many cases (unless you are a developer, that works with programming language other than PHP). However, if you have a blog or content site, I believe you use shared hosting. The reason for choosing shared hosting is often subjective but practical. Many people want to host more than one website with the hosting plan they have – and shared hosting eligibles it to happen easily. So, you built something with Vue js and you want to deploy Vue js on shared hosting, in this way maximizing the resources you have. Let’s see if that will work.

A lot of shared hosting providers do not let running the JavaScript code on the backend (Node js, Typescript, or whatever). Like it or not, PHP still being one of the most widely used web development languages, stays the focus language of the majority shared hosting providers. And there is a reason for this – in many cases, users that buy shared hosting want to have WordPress, OpenCart, phpBB, or any other application that is written with PHP. And WordPress alone is responsible for powering over 33% of the internet.

As you might already know, Node.js and npm are used to install Vue CLI. It might look like a limitation and the end of the story of Vue app deployment in our case.

As from my personal experience, I could say that it is not possible to deploy Node.js application on shared hosting. Every hosting provider gives you different options like VPS or dedicated server where you can run almost anything you want. However, shared hosting comes with limitations.

Is it possible to deploy Vue js on shared hosting?

Great news for Vue fans – YES, Vue js be run on shared hosting. Even though at first it might seem like Node js and npm are necessary (well, you need them to have Vue CLI), however, they are not crucial. It helps during the whole cycle of development, but that doesn’t mean it is a prerequisite to have Node running on your machine. Npm is needed for installing packages and tools, like Vue CLI. However, Vue CLI ≠ Vue. CLI is just a tool that increases the pace of your development (if you know how to use it). So, if you built a SPA application, you can deploy Vue js on shared hosting, but you will not be able to install CLI, which is quite handy during the development.

And as the JavaScript can be run on shared hosting in the front-end, let’s not forget the fact that the most straightforward way to use Vue is by including it with a script tag – which can be done in any HTML document.

But…

If you need to run server-side Javascript code for your project, you want to do server-side rendering or use Nuxt.js, there will be a problem with shared hosting. Of course, it depends on the provider, but from my personal experience, most of them do not support anything other than PHP.  I can’t say for every hosting provider, but I am using a shared hosting plan of Hostinger, and I can say for sure that they provide many great features for a cheap price, but JavaScript bases technologies can’t be run on the back-end.

Another drawback is that the Vue app must be prerendered, so every time we made some changes, we must prerender our app and upload it again. Even though if you know how to build Vue js, it won’t take you much time, but making changes to your application frequently it might be a headache. It will demand extra work to keep your app updated.

Static pages can be hosted on basically anything

So, you have a Vue app that, let’s say, displays the weather forecast. You don’t want to run anything on the back-end and you get the data from some external API. In this case, as it is a single page application, you can host it even on a rock. Well, not really. However, any hosting provider lets JavaScript in the front-end. And what does Vue consists of? Vanilla JavaScript. So, there is no problem to run it on any hosting platform.

Let’s host the Vue app on shared hosting!

As I already mentioned in this article, the easiest way is to include Vue as a script, however, it would be easier in the development perspective to develop an app and then build it. It saves a lot of time. So here is the workflow of how we can deploy the application:

1 step – building. So for example we have a barebone Vue app – the one you get after creating an app with vue create. All we need to do is to execute npm run build command in the project folder. The command will then generate a dist directory that will consist of the files of our application. Then we will have to upload the whole folder to the hosting.

This is how to build Vue js application – use npm run build

2 step – archive your files. I am sure I don’t need to explain this step :). Archive files of the dist directory to a .zip or .tar format archive as your hosting provider will support any of the most popular formats.

3 step – upload the archive to the public_html folder and extract it. Use an FTP client or GUI file manager to upload the files. That depends on the service provider, but usually, you can find File manager on the hosting Cpanel. Upload the archive to the public_html folder of your domain, after that, unarchive it.

4 step – make sure it works. If everything worked out, enter your domain name and check if the page looks like this:

This is how your public_html folder should look like:

Summary

As you see, it is not even possible, but also quite easy to deploy Vue js on shared hosting. Shared hosting is not the only option, and even might not be the best one – it depends on your needs. Every time you will make a minor change, you will have to build, upload, and then extract the files, which might or might not be a problem for you. It depends on how often you want to update your app. If you have a SPA (single page application), there are free and more convenient hosting alternatives.