Building a React App on Laravel

The first time I built a Laravel React app, most of my time was spent simply building out the infrastructure related to authentication (login, registration, password reset, etc).

With a server rendered app, Laravel generates the authentication boilerplate for you. But with a 100% React frontend, all these pieces need to be built custom: an auth API (with JSON web tokens), routing, forms and form validation, persistent storage, and tests. There’s also aren’t many tutorials or example projects that show how it all works together.

Example To-Do App

Now that I’m more familiar with these concepts, I’ve released an example boilerplate for others to look at. You can view a demo of the Laravel React To Do App here. Source code and installation instructions are available on GitHub.

It includes:

You can find the project on GitHub. Use it as a starting base for quick prototypes or to learn from. Suggestions, recommendations, and pull requests welcome!

How it Works

Here’s a video showing how to install the app and the basics of how it works. You can also read the installation documentation on GitHub.

Choices

JSON Web Tokens

Laravel Passport was another option for managing the JSON Web Tokens. I decided to use tymon/jwt-auth because I just wanted basic email and password authentication and jwt-auth seemed like the simplest library for that. But I would love to do an implementation of Passport at some point to understand how it works better.

Decoupled Front-end

If you prefer to scaffold your React apps with create-react-app and have the front-end completely decoupled from Laravel, you’ll just need to migrate the javascript (from resources/js) and package.json dependencies. The API will work with any client.

Bootstrap vs Other Frameworks

I used Bootstrap mainly because it was the Laravel default and most people are pretty familiar with it. However, at work I’ve been using Material UI for most projects and really enjoy it. If I was starting fresh, I would probably use that.

Credits

This project was heavily inspired by react-laravel-with-jwt-auth, which I learned a lot from.

About Devin

I am a developer based in Austin, Texas. I run a little theme shop called DevPress and help manage a WooCommerce shop with Universal Yums. Find me on twitter @devinsays.

4 Responses

  1. Aleksandr Asanov

    Hi, Devin!
    It is simple but very good.
    I have one issue.
    When I remove token and user data in localStorage, How can I redirect to login page automatically.
    Any good idea?
    Thanks.

  2. Eddie

    Thanks for providing such a complete biolerplate. Helped me alot with learning from this tutorial and materail. The only thing I could not understand clearly was the React router.

Leave a Reply to sanjay mokariya Cancel reply