how to deploy vue app in the shared hosting environment?

Question

I would like to deploy my vue application on shared hosting server. How should I do it? Its a bit confusing as of now. Will I need express js for it or I can directly upload it like the normal html site?

Answer 1

I just did this and I had to check out several resources so I'm gonna put it all here, to save someone else.The following worked for me:

1. Run "npm run build"

2. Your assets should be in a "static" folder

3. Upload your index.html and all files in the /dist and /static folder to the directory (public_html or the directory of your sub domain, if its one)

4. Done!!

P.S You most likely would run into 404 errors when you reload pages of the deployed app, not to worry, just include a .htaccess file which has this configuration:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

AND THEN YOU'RE GOOD!! I hope this helps.

Answer 2

There isn't typically anything particularly special about deploying a vue application to a shared hosting environment. Often the best first step is to "deploy" the website to your local development box running similar web server software as your shared hosting environment.

Once you can make the vue app run there outside of your coding environment, then you know exactly which files you need to deploy to your shared hosting environment to have it run at the hosting company. You shouldn't typically need to deploy any additional files to the hosting company that you are not using when "hosting" the site on your own dev box outside of your coding environment.