vue components doesn't update on shared hosting server

1
votes

I'm facing a problem that is when i deployed my laravel 5.5/vuejs application i can't update the vue components. in the development mode i didn't encounter this problem because i run "npm run watch". but on real server (000webhost.com just for testing) how can i perform this command. what i'm doing right now is editing the components in my local server, run "npm run watch" and then uploading these two files (/public/css/app.css) and (/public/js/app.js) to the server. and it works but after cleaning browser cache which is another problem unfortunately.

"I'm using Vuejs which is built-in with laravel"

Is shared hosting appropriate to host apps that contain vue components or nodejs apps in general ? Or is this kind of applications require a hosting with powerful capabilities like forge and Digitalocean ?

If there is a ways or tips to fix these issues please help me.

1
laraveldeploymentvue.jslaravel-5.5laravel-mix
Have you run npm run production on your server? Running the watch command on your local machine will not do anything for the server. – parker_codes
I cannot run npm commands on the server because i'm just on shared hosting and no SSH access. What i mean by runnig npm on my local machine is that after i run "npm run prod" on local machine i upload the compiled css and js files to the server. – walid
You would still need the package dependencies installed, not just compiling. So npm install. If there's no way to do that, you may need to remove your node packages from your .gitignore file so you can push that up. It's not recommended, but that may be your only way. – parker_codes

1 Answers

0
votes

I had this exact problem

The way to solve this is to rename the app.js file located in public/js folder and also make sure to edit the mix-manifest.json file in public folder with the same name.

Eg: If we rename the app.js as app1.js in the public/js folder In mix-manifest.json it should be edited as follows before uploading to the shared server

{
"/js/app.js": "/js/app1.js",
"/css/app.css": "/css/app.css"
}