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:
- An auth API, using tymon/jwt-auth to manage the JSON Web Tokens.
- Routing with react-router (private, public and split routes).
- Feature tests.
- Database seeding.
- A base ApiController to help return standardized responses.
- Bootstrap for styling.
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.
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.
This project was heavily inspired by react-laravel-with-jwt-auth, which I learned a lot from.