Home

Create React App Laravel

Requirements

A Laravel 6 project, preferably pristine.

Getting Started

1. In your Laravel folder:

npx [email protected] . --scripts-version [email protected] --template laravel

2. Register the route that will serve the React app by appending to routes/web.php:

Route::get('/app{any?}', function () {
    return view('app');
})->where('any', '.*')->name('app');

3. Build the app a first time to generate the necessary blade file:

yarn build

4. Happy hacking!

⚠️ PLEASE NOTE ⚠️

Running npm run build or yarn build works exactly the same as in the original Create React App, with the only difference that the build folder is set to be Laravel’s public folder.

A consequence of this is that every time you build the React app the public folder is completely wiped out and rebuilt sourcing the contents from resources/react-app/public. If you want files to persist (eg. your custom .htaccess configuration) that’s where you should place them.

For your convenience you will already find .htaccess and index.php in resources/react-app/public.

Developing

Eventually, you will probably want to serve the front-end React app from the same host as the backend Laravel implementation. For example, a production setup might look like this after the app is deployed:

/             - static server returns index.html with React app
/todos        - static server returns index.html with React app
/api/todos    - server handles any /api/* requests using the backend implementation

In your local environment you may already have a virtual host set up to serve your Laravel app, such as my-project.test, with your API reachable at http://my-project.test/api.
By serving the React app from that same virtual host you would get two benefits:

1. Cookies are shared (it can be useful for example if your React app is only reachable after logging in, and you manage authentication using Laravel sessions)
2. You can write API requests just as if you were in production: fetch('/api/todos')

Here's how to set this up in your local environment:

1. Run yarn add http-proxy-middleware --dev
2. Modify your package.json > scripts > start as follows:

"start": "HOST=my-project.test react-scripts start",

3. Create the file resources/react-app/src/setupProxy.js with the following content:

const proxy = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    proxy({
      target: 'http://my-project.test',
      changeOrigin: true
    })
  );
};

From now on when you run yarn start the webpack development server will be started on http://my-project.test:3000. Any fetch('/api/*') request will be transparently redirected to your Laravel installation.

Please note: the webpack development server serves a static HTML file as found in resources/react-app/public/index.html. It does NOT run requests through Laravel (this is the reason why, for example, the <title> reads literally {{ config('app.name', 'Laravel') }}.

FAQ

Why are you specifying a semver with a Release Candidate mark? Is it not safe to use in production? Yes, it is safe. But we make use of a feature (--template) that will be released with [email protected], hence the rc.x mark.

Can I add a React app in an existing Laravel project?
Yes you can. But know this:

1. create-react-app-laravel lives in the resources/react-app folder, so if you already have such folder make sure you rename it to something else. It will also generate a resources/views/app.blade.php file, so make sure you are not using such a file already.
2. Every time you yarn build the app the entire content Laravel's public folder will be wiped out, and rebuilt sourcing the contents of resources/react-app/src/public. So make sure you back up any file in public you want to preserve, and after installing Create React App Laravel you move those files to resources/react-app/src/public.

Does it work with Laravel 5.x? I don't know, but I would be forever grateful if you could give it a spin and tell me! 🙏