8

I am having problems deploying my laravel + vuejs application to shared hosting account, I am aware of other efficient ways such as cloudways but I just want to test my site out.

I have tried with some free hosting but always wrong, do I need to upload all my node_modules through ftp for the vue components to work? it is large and takes plenty of time.

I have checked alot of tutorials on this but none has deployed laravel with vuejs to server, any guide to to this will be much appreciated.

Benedictgeek
  • 167
  • 1
  • 2
  • 9
  • 1
    You should build the vuejs application, usually by using the command npm run build. This will create a folder dist in your vuejs application folder which contains all the necessary files for the application to be put in production.Copy the contents of the dist folder in the public directory of the laravel application and each request should serve the index.html which has references to the vuejs application. The entire vuejs application folder is not needed in production. – rob_ May 07 '19 at 13:30
  • Thank you so much! So I need not worry about node_modules, only to build and upload to server – Benedictgeek May 07 '19 at 15:34
  • You need to build both Laravel (composer) and Vue (webpack mix) in order to deploy to Production. Have something like this in your composer.json - https://github.com/niiknow/anx-api-proxy/blob/master/composer.json#L65 - then run `composer app:package` to build the dist.tar.gz to upload. Extract this file on the shared hosting and upload your `.env` file. Or you can use [laravel-installer](https://github.com/rashidlaasri/LaravelInstaller) and something like: https://github.com/niiknow/anx-api-proxy#production-deployment – Noogen May 07 '19 at 17:31
  • I got to ask @Noogen, running the composer app:package will build laravel only right? How do I then handle the vue build with it if to go by rob_'s answer – Benedictgeek May 07 '19 at 22:29
  • Take a look at my project and the composer file. `composer app:package` is actually building both npm (vuejs) and laravel. It is a series of commands form line 67 to 71: https://github.com/niiknow/anx-api-proxy/blob/master/composer.json#L67 – Noogen May 07 '19 at 23:20
  • Hi @Noogen, I ran into error at first with "mkdir -p ./storage/build", but after I removed it it started building then the last command "COPYFILE_DISABLE=1 tar -X './.packageignore' -zcvf ./storage/build/dist.tar.gz ./" throws this error 'COPYFILE_DISABLE' is not recognized as an internal or external command'. what could be wrong? – Benedictgeek May 22 '19 at 01:35
  • It's not a command, COPYFILE_DISABLE is simply setting environment variable on my macOS to say I don't want shadow files so you can ignore/remove it. I've updated my doc with screenshots: https://github.com/niiknow/anx-api-proxy#shared-hosting-deployment Shared hosting is the issue. Basically, if you can ssh into your hosting (not shared hosting), then Laravel deployment is simply: ```composer app:clear && chmod -R 775 bootstrap/ && chmod -R 775 storage/ && composer install --no-dev --optimize-autoloader && php artisan key:generate php artisan migrate:fresh --seed ``` – Noogen May 22 '19 at 04:24
  • i got " 'deployStash' is not recognized as an internal or external command, operable program or batch file. " error. i'm on windows. – romal tandel Jul 04 '19 at 12:04
  • Hey romal, are you deploying only laravel or laravel + vue? – Benedictgeek Jul 05 '19 at 18:56
  • @Benedictgeek I am deploying laravel + vue . Would you help me please .. this is the question link - https://stackoverflow.com/questions/57991720/deploy-laravelvuejs-application – Rashed Hasan Sep 19 '19 at 09:45

2 Answers2

4

  1. Go into the laravel-vue project and build the production version of the app.

  2. Make sure that hidden files are visible then compress everything but the node_modules

  3. Go to your cpanel, create a folder for your new app in the root (not public_html)

  4. Upload and extract the compressed file into the new folder you just created

  5. Move the content of the public folder except .htaccess into the root of the new folder you just made

  6. Create a new .htaccess file in the root of this same folder and add these:
<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews
    </IfModule>

    RewriteEngine On

    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)/$ /$1 [L,R=301]

    # Handle Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]

    # Handle Authorization Header
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]


</IfModule>

  1. Edit the index.php file in this same folder by changing:

    • require __DIR__.'/../vendor/autoload.php'; to require __DIR__.'/vendor/autoload.php';
    • require_once __DIR__.'/../bootstrap/app.php'; to require_once __DIR__.'/bootstrap/app.php';

  2. Create a subdomain for this app and set the document root to the folder we created and placed all the laravel files into

Visit the subdomain.your-domain.your-tld and the app should work.

Willower
  • 1,099
  • 8
  • 22
0

Just creating a new .htaccess file inside your root (public_html) or any subdirectory (if you're using subdomain) and pasting the following lines will solve your problem.

<IfModule mod_rewrite.c>
    RewriteEngine on
    RewriteRule ^$ public/ [L]
    RewriteRule (.*) public/$1 [L]
</IfModule>
Kaperskyguru
  • 73
  • 3
  • 8