host vue js build app

#vue #webdev

Hello i've a problem when i try to host my vue js build app into shared hosting it show me a blank page any solution for this ?

Top comments (9)

Christian Kozalla • May 1 '21

Here are the steps how I usually deploy a Vue app to surge

With the surge CLI installed globally

npm install -g surge

npm run build
cd dist
surge

Command 3. tells surge to deploy the contents of the current folder (dist)
Then you'll be asked to choose a subdomain. For example yourproject.surge.sh

Your Vue app will be deployed to that domain. 😊

elhousseyn arab • May 1 '21 • Edited

it's like heroku but i want to publish it on my own shared hosting cpanel when i deploy it it show me a blank page

Rahul Shaw • May 1 '21

I will suggest you to do the following steps:
1) install serve package globally with npm ( npm install -g serve )
2) Go to your project directory and create the dist file using npm run build
3) Then in the command line write serve -s dist ( The dist folder you need to upload )
4) It will open in localhost:5000 and check whether the website is showing properly or not

elhousseyn arab • May 1 '21 • Edited

i just solve the problem so the problem it was in the routing i was deploying my vue js app on folder on the server and that is not correct for single page app because the default route / it needs to be in the main directory on the server so the solution is to create subdomain and put your vue app so your vue app it's in main directory of the subdomain that's the following subdomain smvpark.it-smv.com/
but there is another problem when i try to access to expect route example : smvpark.it-smv.com/test
it show me a 404 error but if use router.push it takes me to this route and show me the components but if i refresh the page it show me the 404 error
the vue app it relies on vue route push not for browser caching solution for this is to add this htaccess for index.html

RewriteEngine On
RewriteBase /
RewriteRule ^index.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

fr0tt • May 1 '21

That's a little bit vague. How empty is the page, like do you see some html markup in the source code, do you see any errors in the console,... ?

elhousseyn arab • May 1 '21

i was run in the terminal npm run build so it generated a dist folder contain some css and js folder with index.html file so i was deploy this dist file into server when i run the link it shows me an blank page
here's the link
it-smv.com/park/sk/park/dist/

fr0tt • May 1 '21

Well Error 404 isn't exactly the same as an empty page :)
It most likely has something to do with your webserver configuration.
Have a look at your webserver's logs. If that doesn't help you try to ask your hoster or in a forum where other clients of your hoster could help you, if one exists.