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

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

Image for post
Image for post
Figure 1. React logo

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
Image for post
Image for post
Figure 2. Meerkat’s home page

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…

Written by

Hi there! How are you today? I blog about technology, the Internet, SEO, programming tips, PHP and more. programarivm.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store