Introducing CRAL: Create React App Laravel

mjsarfatti

Manuele J Sarfatti

Posted on October 29, 2019

Introducing CRAL: Create React App Laravel

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!

💖 💪 🙅 🚩
mjsarfatti
Manuele J Sarfatti

Posted on October 29, 2019

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related