14

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?

RonC
  • 31,330
  • 19
  • 94
  • 139
Chirag Chaudhari
  • 1,617
  • 3
  • 14
  • 20

5 Answers5

21

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.

Airah
  • 359
  • 2
  • 11
  • @kairah I'm trying to deploy a vuetify app from local to my godaddy server and came across this post. After creating my build, I'm only seeing a `/dist` folder and no `/static` folder. Am I fine to only upload `/dist`? – Joseph Sjoblom Oct 18 '19 at 14:23
  • @JosephSjoblom the `/static` folder isn't created after running build, it's the folder that contains all static assets (images, css). So you upload both `/dist` and `/static` folders. **However**, this approach worked for me before I started using Vue CLI 3 to create Vue projects. Now, everything is so much easier! – Airah Nov 11 '19 at 17:16
  • @JosephSjoblom could you please share your vuetify folder structure which uploaded to the server? – Rakaziwi Oct 19 '20 at 01:44
5

Here's how I deployed mine.

  1. Goto to your project folder -> config -> index.js file ensure that the assetsPublicPath: is pointed to the public_html path of your shared hosting account.

  2. Run the "npm run build" command.

  3. Go to your project folder copy the contents of the dist folder paste them in the public_HTML folder of your cpanel.

Now I am sure there are better ways to do this, please anybody with a better way should let us know.

Umar745
  • 336
  • 1
  • 4
  • 18
3

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.

RonC
  • 31,330
  • 19
  • 94
  • 139
1

Simply copy your index.html file and static folder and paste them on the root folder of your server e.g public_html, if you intend changing the name of your directory i.e maybe the app lives in a sub directory of your public directory, then you have to change your config/index.js file

// change this line 
assetsPublicPath: '/',
// e.g
assetsPublicPath: '/dist',
assetsPublicPath: '/myapp',

Then run npm run build it will work perfectly

elraphty
  • 630
  • 6
  • 13
0

I did it doing these steps in my shared Hostgator host:

  1. npm run build
  2. copy dist folder to one hostgator folder
  3. create a subdomain pointing it to folder/dist

that solves my problem

Rodrigo Klim
  • 96
  • 1
  • 3