Create-react-app + Laravel in the same server

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;

}

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.

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.