How to serve generated Vue app from Laravel route?

I have not a default setup vue + laravel, vue completely separately from laravel.
In my case laravel only as API. I finished doing a vue app and did a build command for production.

build

I got the generated resources in this form:

I was thinking about how to upload to the hosting such an application and came to the conclusion that i need to send vue files through my laravel server.

I wrote route in routes/web.php:

Route::get('uri', function ($uri = '/')
$sourceByUri = public_path('_frontend/' . $uri);

if (is_file($sourceByUri))
return file_get_contents($sourceByUri);


$indexSpa = public_path('/_frontend/index.html');

return file_get_contents($indexSpa);
)->where('uri', '.*');


My api works as it should, but the files from the folder _frontend are not sent correctly(css not applicable). Screenshot

Should be like this: Screenshot

It turned out that all responses from the server are worth Content-Type: text/html

Content-Type: text/html

How do I properly open my application through a server?

Content-Type: text/html

Content-Type

text/css

text/css

mime_content_type($sourceByUri)

text/plain

2 Answers
2

You should serve your front-end app directly through Nginx and configure a reverse proxy to access the API through Laravel:

First, configure your laravel app so that Nginx can serve it (I made Nginx listen on a random port for this configuration):

server
listen 1222;

root /var/www/html/your-app/public;
index index.php;

location /
try_files $uri $uri/ /index.php?$query_string;


# Insert PHP configs here etc...



Then, serve your webapp and make calls that are going to the /api endpoint go to your laravel app instead of your front-end app. Make it listen on port 80 if you want to serve through http or 443 if you want it to be served through https:

/api

server
listen 80;
server_name your-app.com;

root /var/www/your-app/public/_frontend;

location /api
# Backend server to forward requests to/from
proxy_pass http://localhost:1222;
proxy_http_version 1.1;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
client_max_body_size 500M;


location /
try_files $uri /index.html;




.env

From this example, i understood how to combine Vue CLI with Laravel.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.