Building a React App on Laravel

The first time I built a React app on Laravel, 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 for 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

So, now that I’m a little more familiar with these concepts, I re-purposed one of my own projects and released it as an example To Do app that includes the following:

You can find the project on GitHub. Use it as a 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.

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'm a WordPress developer based in Austin, Texas. I run a little theme shop called DevPress and work for a startup called Nano. Find me on twitter @devinsays.

Leave a Reply