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