loading...
Cover image for Introducing CRAL: Create React App Laravel

Introducing CRAL: Create React App Laravel

mjsarfatti profile image Manuele J Sarfatti ・2 min read

All the goodies of Laravel, with all the convenience of Create React App

Repository: https://github.com/mjsarfatti/create-react-app-laravel/

While microservice architecture, front/back-end decoupling and serverless are all incredibly useful paradigm for medium-to-large applications, the web is also made of a galaxy of smaller apps that simply need to be robust and fast to produce, while serving a limited userbase. Enter Create React App Laravel.

Why Laravel and Create React App?

Laravel allows you to scaffold a simple CRUD app in just a few hours, and being a PHP/MySQL application it is easy to deploy to pretty much any provider out there.

Create React App is the de-facto standard for React SPAs (Single Page Applications), especially when SEO is not a concern. It provides a whole lot of optimizations out of the box, including hot reload.

When is this useful?

Taken directly from CRA's documentation:

People often serve the front-end React app from the same host and port as their backend 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

If this looks like what you are building, keep on reading!

Create React App Laravel

Or, CRAL.

You may think that all you need to do is running npx create-react-app in your Laravel project, but it's not that simple. In fact, it will plain not work, for two reasons:

  1. Create React App generates a index.html file, but what you need is a Laravel blade view;
  2. it's not (currently) possible to customize input and output directory.

CRAL does all that for you, and more. All while keeping Create React App intact at its core, so that you loose none of the advantages:

  1. It makes your source files play nice with Laravel by placing them in resources/react-app;
  2. it builds your entry HTML file into a blade view file;
  3. it places the generated assets in Laravel's public folder.

I'm finding it very useful for a project I'm working on right now (going to production in a few weeks). If CRAL is something that appeals to you too, please head to the documentation to find detailed installation instructions and an explanation of how it works and what to expect.

Happy hacking!

Posted on by:

mjsarfatti profile

Manuele J Sarfatti

@mjsarfatti

EU 🇪🇺 | Art, Tech & Good Vibrations 🤳 | Founder of ᴛᴏᴍᴏʀʀᴏᴡ 🌞 hellotomorrow.agency • Just started working on a new endeavour 👉 usepoe.app • Follow me on Twitter!

Discussion

pic
Editor guide
 

Are there any versions compatible with prior Laravel versions? I have Laravel 5.5. Been going nuts on how to integrate my React app made with create-react-app to my Laravel without pulling it out of its repository.

 

Hey, it should work with 5.5, since the folder structure is pretty much the same as 6.6. I haven't tested it though. If you want to give it a try, maybe copy your project and install CRAL there.

Remember that the /public folder is wiped out and recreated on every build, you can refer to the docs for a detailed explanation on what happens.