在同一台服务器上创建-react-app + Laravel

Question

• I have developed a RESTful API supported by Laravel .
• And I want to consume it by a ReactJS application created with create-react-app UI kit.

Two different technologies for frontend and backend, so far so good.

The problem (which is, in turn, the most common situation) is that both frontend and backend have to be served from the same domain (or server/file structure).

What is the best approach to make the two projects coexist in the same server?

EDIT : The main problem here is that neither Laravel Mix nor any Laravel frontend capabilities can be used because of the create-react-app stack. The rules it imposes make very difficult the integration without first ejecting the app, which is not recommendable from the maintenance point of view.

Answer 1

If you are using Apache HTTPd, you have two options.

Lets say you have copied your front-end and back-end directories as follows:

Back-end (assumed Laravel 5.x) under /var/www/yourappname/api/

Front-end under /var/www/yourappname/frontend/

You can access your app using app.yourdomain.com . (I normally prefer www.yourdomain.com to be a separate server / Apache instance for security and performance reasons).

1. Two sub-domains

Have two sub-domains pointing to same IP address, say app.yourdomain.com for front-end, and api.yourdomain.com for Laravel back-end. Create two virtual hosts in your Apache configuration and document root as follows

For api.yourdomain.com

/var/www/yourappname/api/public

For app.yourdomain.com

/var/www/yourappname/frontend/

Your back-end base URL to be included in front-end app will be api.yourdomain.com/

Advantage: if you wish to split your front-end and back-end on two different Apache instances or separate servers in future, you can do it easily. Also, front-end is static content and hence could be served using other low cost options like S3 based sites.

Caveat: You will have to take care of CORS ( https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS ) issue. Also, you will need two SSL certificates or multi-domain certificate or wild-card SSL certificate.

I prefer this option and I have used this in one of my setup considering future load.

2. Single Domain and Alias

Set Document Root as

/var/www/yourappname/frontend

Add Alias as follows ( http://httpd.apache.org/docs/2.4/mod/mod_alias.html#alias )

Alias "/api/" "/var/www/yourappname/api/public/

Your back-end base URL to be included in front-end app will be app.yourdomain.com/api/

(I have not yet verified this on my setup)

Advantage: You have single domain, and need single SSL certificate.

Caveat: All hits will be on same Apache service and hence difficult to segregate load of compute intensive API requests and static content.

Note: In either case, I have pointed to "public" directory of Laravel framework, to avoid exposing configuration and other directories of Laravel to outside world.

Answer 2

I have had to spend considerable time on fixing the issues I faced while deploying my project with React front-end and Laravel as the API. Hope this helps someone who is trying to deploy similar stack to production.

To summarize, I had separate configs for react and laravel projects, each with different listen ports, and different location .

Since I was using Laravel as my API, I used /api as the location config for laravel and / as location config for react.

Please find the nginx configs I used for reference

React:

server {
    listen     80;
    server_name <server_ip or hostname>;
    charset utf-8;
    root /var/www/html/react;
    index index.html index.htm;
    # Always serve index.html for any request
    location / {
        root /var/www/html/react;
        try_files $uri /index.html;
    }
    error_log /var/log/nginx/react-app-error.log;
    access_log /var/log/nginx/react-app-access.log;

}

Laravel:

server {
    listen     90;
    server_name <server ip or hostname>;
    charset utf-8;
    root /var/www/html/laravel/public;
    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";

    index index.php index.html index.htm;
    # Always serve index.html for any request
    location /api {
        try_files $uri $uri/ /index.php?$query_string;
    }
    
    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt { access_log off; log_not_found off; }

    error_page 404 /index.php;

    location ~ \.php$ {
        fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include fastcgi_params;
    }

    location ~ /\.(?!well-known).* {
        deny all;
    }

    error_log /var/log/nginx/laravel-app-error.log;
    access_log /var/log/nginx/laravel-app-access.log;

}

Answer 3

I know it's a question from some time ago, but in case someone stumbles upon this in search for answers, it is now possible to use Create React App in Laravel (without ejecting): https://github.com/mjsarfatti/create-react-app-laravel/

create-react-app-laravel is essentially a fork of Create React App that runs in your Laravel project.

You can see https://github.com/mjsarfatti/create-react-app-laravel/wiki/ for the installation guide, and https://dev.to/mjsarfatti/introducing-cral-create-react-app-laravel-4n90 for the announcement.