DEV Community

loading...

host vue js build app

arabelhousseyn profile image elhousseyn arab ・1 min read

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 ?

Discussion (9)

Collapse
christiankozalla profile image
Christian Kozalla

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

With the surge CLI installed globally

npm install -g surge

  1. npm run build
  2. cd dist
  3. 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. 😊

Collapse
arabelhousseyn profile image
elhousseyn arab Author • 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

Collapse
rahulshaw_dev profile image
Rahul Shaw

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

Collapse
arabelhousseyn profile image
elhousseyn arab Author • 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]

Collapse
fr0tt profile image
fr0tt

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,... ?

Collapse
arabelhousseyn profile image
elhousseyn arab Author

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/

Collapse
fr0tt profile image
fr0tt

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.

Collapse
jasonf profile image
Jason F

Can you please elaborate on the steps you are taking, where you're trying to host, and any other relevant information?

Collapse
arabelhousseyn profile image
elhousseyn arab Author

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/

Forem Open with the Forem app