Hosting Nuxt.js App on VPS(Apache Server) via Cpanel

If you lot are a passionate person that likes building stuff in your gratuitous time, you might have a shared hosting plan which you use for deploying your side projects. Shared hosting is user-friendly in many cases (unless you are a developer, that works with programming linguistic communication other than PHP). All the same, if y’all have a web log or content site, I believe you use shared hosting. The reason for choosing shared hosting is ofttimes subjective but practical. Many people desire to host more than than one website with the hosting plan they take – 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 y’all have. Let’due south see if that volition work.

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

Most popular applications that tin can be hosted on Hostinger hosting

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

Every bit from my personal experience, I could say that
it is non possible
to
deploy Node.js application on shared hosting. Every hosting provider gives you unlike options like VPS or defended server where yous can run almost anything you lot want. Nevertheless, shared hosting comes with limitations.

Popular:   Marqeta Announces Visa Veteran Mike Milotich as New CFO, Raises Expectations for Fourth Quarter 2021 Financial Results|||

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 similar Node js and npm are necessary (well, you lot need them to have Vue CLI), however, they are not crucial. It helps during the whole cycle of evolution, simply that doesn’t mean it is a prerequisite to accept Node running on your machine. Npm is needed for installing packages and tools, similar Vue CLI. Withal, Vue CLI ≠ Vue. CLI is but a tool that increases the pace of your development (if you know how to utilise it). Then, if you built a SPA application, yous can deploy Vue js on shared hosting, just you will non exist able to install CLI, which is quite handy during the development.

And as the JavaScript can exist run on shared hosting in the forepart-terminate, allow’s not forget the fact that the most straightforward style to apply Vue is past including it with a script tag – which tin be done in any HTML document.

But…

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

Popular:   The Host Chat Official Community Server

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 once more. Fifty-fifty though if you know how to build Vue js, it won’t have you much time, but making changes to your application frequently it might be a headache. It volition demand extra piece of work to keep your app updated.

Static pages can exist hosted on basically anything

And then, y’all have a Vue app that, permit’s say, displays the weather forecast. You don’t want to run anything on the back-cease and y’all get the data from some external API. In this case, equally it is a single page application, you tin host it even on a rock. Well, not really. Even so, whatsoever hosting provider lets JavaScript in the front-end. And what does Vue consists of? Vanilla JavaScript. So, in that location is no problem to run it on whatsoever hosting platform.

Let’south host the Vue app on shared hosting!

Every bit I already mentioned in this article, the easiest way is to include Vue every bit a script, however, it would be easier in the development perspective to develop an app and and then build information technology. It saves a lot of time. And so hither is the workflow of how we can deploy the application:

Vue js deployment on shared hosting flow

1 footstep – building.
Then for case nosotros have a barebone Vue app – the ane you go afterward creating an app with
vue create. All we demand to do is to execute
npm run build
command in the project binder. The command will and then generate a dist directory that will consist of the files of our application. So we volition have to upload the whole folder to the hosting.

Popular:   HOW TO GET A FREE 24/7 MINECRAFT SERVER | TOP 3 FREE SERVER HOSTING

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

Successfull build of the Vue application after executed npm run build command
Successfull build of the Vue application after executed npm run build command

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

3 pace – upload the annal to the public_html folder and extract information technology. Use an FTP client or GUI file manager to upload the files. That depends on the service provider, only usually, yous tin discover File director on the hosting Cpanel. Upload the annal to the
public_html
folder of your domain, later on that, unarchive information technology.

iv pace – brand certain it works.
If everything worked out, enter your domain name and check if the folio looks like this:

Default Vue page

This is how your
public_html
folder should expect like:

This is how public_html folder looks after you deployved Vue js to shared hosting

Summary

As yous meet, it is not even possible, but as well quite piece of cake to deploy Vue js on shared hosting. Shared hosting is not the simply choice, and even might not be the best 1 – it depends on your needs. Every time yous will make a minor alter, you will have to build, upload, and then extract the files, which might or might not exist a problem for you. It depends on how ofttimes y’all want to update your app. If you have a SPA (unmarried page application), there are free and more convenient hosting alternatives.




Hosting Nuxt.js App on VPS(Apache Server) via Cpanel

Source: https://vue-view.com/how-to-deploy-vue-js-on-shared-hosting/