1

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.

I got the generated resources in this form:

enter image description here

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

How do I properly open my application through a server?

Improve this question
4
  • Your css and js files would need to be accessible from the same path. I assume you aren't prefixing _frontend when referencing them in index.html. Commented Aug 27, 2018 at 14:00
  • All files come with a code 200, and the scripts work, the problem is that everywhere Content-Type: text/html, I tried changing Content-Type to text/css and it all worked, but at the same time all responses with text/css(html, css, other files). Screenshot Commented Aug 27, 2018 at 14:07
  • I tried to get a mime type: mime_content_type($sourceByUri) but for css and js it returns text/plain Commented Aug 27, 2018 at 14:22
  • 1
    Ah, i just noticed your code attempts to serve all files, not just index.html. That's probably a bad idea, it'd be much slower to serve files through php/laravel versus a web server. Commented Aug 27, 2018 at 14:33

2 Answers 2

Reset to default
3

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:

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;
    }
}
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Thank you very much, I will deal with this. I googled a lot and could not find a solution to my problem, It looks like this rare approach. Thanks again, I thought no one would help me.
No problem. I think however that the best is to divide completely the two projects. They are not meant to live in the same git repository for example. You could have different .env files for your projects etc... Dividing completely helps to think how to deal with those problems. You have two applications, one server side application and one client side application
Do I understand correctly that if I divide so, do I have to pay for both hosting at the same time? I know that there are free static hosting for vue, but there is a limit on the number of sites.
mmm I don't know, I use VPS so you can configure unlimited websites on it
ok, I'm just a beginner programmer, not yet experience with vps. I had an idea how to solve my problem, see my answer to this question.
0

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.