A Real-World React App (with Flux) for PHP Full-Stack Developers

Jordi Bassagañas

Nov 1, 2019·3 min read

Hey everybody, Jordi here, and today I am sharing some thoughts on my first real-world — as opposed to “Hello world” — React app.

It seems there aren’t too many tutorials out there on how to build complex React applications with Flux. Well, the RealWorld example apps can help — even though I wasn’t able to find any Flux implementation example.

So I decided to write an SPA application called Meerkat, this funny mammal resembling a small dog, much like Timon in the Lion King.

The repo is available on GitHub, and basically the app allows users to review and rate restaurants. The backend uses Laravel.

Meerkat Features

• ACL
• JWT authentication
• CRUD implementation
• REST API
• Flux: actions, dispatchers and stores
• Data-driven tests
• Docker setup

At this moment I am still tweaking this single page application; contributions are more than welcome! Also if you are a full stack developer it’ll be great to know your thoughts about it, please leave your comments below.

How to Run the App (with Docker)

In a nutshell, create an .env file as per the README.md instructions.

cp .env.example .env

And then bootstrap the development environment:

bash/dev/start.sh

That’s it!

Finally don’t forget to add the following entry to your /etc/hosts file:

172.21.0.1      meerkat.local

In this example the Gateway IP of my NGINX container turns out to be 172.21.0.1

To find out the IP of your meerkat_nginx container:

echo $(docker inspect -f '{{range .NetworkSettings.Networks}}{{.Gateway}}{{end}}' meerkat_nginx)

Well done. The app can now run on your favourite web browser by just typing https://meerkat.local into the address bar.

It’s a Kind of Magic

Since we are using Docker the magic lies in the bash/dev/start.sh file.

As you can see this bash script is responsible for a number of things:

• Create a self-signed SSL certificate for development purposes
• Build the Docker containers
• Update the app’s .env file according to the the Docker containers’ IPs
• Install the composer and npm dependencies
• Set up file permissions
• Build and seed the database
• Set up the access control list (ACL)
• Refresh the JWT secret
• Compile the React app

Could You Run the App Easily?

I hope so! In upcoming articles I will be discussing a few software development ideas as well as some conventions taking place.

Thanks for reading. I hope you liked today’s post on my first real-worldish Flux app along with Laravel.

You May Also Be Interested in…

• Learn Basics of React.js in 11 Minutes by Madhu Pathy
• React and Flux for Beginners by Tommy Bernaciak
• React JS for Beginners — The Basics by Cem Eygi
• Docker Introduction — What You Need To Know To Start Creating Containers by Kelvin Salton do Prado