Deploy laravel + vuejs to shared hosting

Question

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.

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_
– rob_, Commented May 7, 2019 at 13:30
Thank you so much! So I need not worry about node_modules, only to build and upload to server — Benedictgeek
– Benedictgeek, Commented May 7, 2019 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 - 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 and something like: github.com/niiknow/anx-api-proxy#production-deployment — Noogen
– Noogen, Commented May 7, 2019 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
– Benedictgeek, Commented May 7, 2019 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: github.com/niiknow/anx-api-proxy/blob/master/composer.json#L67 — Noogen
– Noogen, Commented May 7, 2019 at 23:20

Willower · Accepted Answer · 2020-03-03 02:53:09Z

6

Go into the laravel-vue project and build the production version of the app.
Make sure that hidden files are visible then compress everything but the node_modules
Go to your cpanel, create a folder for your new app in the root (not public_html)
Upload and extract the compressed file into the new folder you just created
Move the content of the public folder except .htaccess into the root of the new folder you just made
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>

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';
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.

answered Mar 3, 2020 at 2:53

Willower

1,2721 gold badge10 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Faridul Khan Over a year ago

Exception The Mix manifest does not exist. i found this error @willower

Kaperskyguru · Accepted Answer · 2020-10-09 14:58:57Z

1

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>

answered Oct 9, 2020 at 14:58

Kaperskyguru

933 silver badges8 bronze badges

Collectives™ on Stack Overflow

Deploy laravel + vuejs to shared hosting

2 Answers 2

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

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

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

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related