Headless Dynamic Static Websites Using Laravel 8, ReactJS and WordPress

Did you know you can create headless dynamic static websites using Laravel 8, ReactJS and WordPress?

Headless dynamic static might sound like a mouthful of jibberish, but it's actually really cool and can help to simplify the workflow of developing a website by minimizing team interdependencies.

Here’s the gis of it:

  • Laravel 8 Back-end
  • Laravel 8 + ReactJS Front-end
  • WordPress content management (headless)

The website is headless because the content lives somewhere else - outside of the public-facing website. It's static because the templates are pre-compiled and not being completely rebuilt for every page navigation. And, it's dynamic because the content will still update when you make changes in the headless WordPress CMS thanks to the ability to fetch REST APIs and JSON data from the source. You could call it a triple threat.

A major benefit of this setup for both clients and the developers is decoupling content, back-end development, and front-end theme development. Being decoupled means the software engineers, the front-end web developers, and the average client desiring the ability to manage their own content can all work simultaneously and independently. More people can do more work more often, be more collaborative, and produce meaningful output faster and more efficiently than ever before.

As proof of concept, I created a sample project.

In my case, the journey began on Windows 8.1 using WAMP and ended on GoDaddy’s Deluxe cPanel hosting.

The content is hosted on a separate subdomain using a headless WordPress install. There is no duplicate content or a shadow-website, as there is no front-end to this WordPress (i.e. it's headless). The content is editable in a WordPress dashboard per expected when working with WordPress, though. Anyone who's used WordPress in the past will feel at home and comfortable adding, editing, and managing the content. The super bonus is having zero code for clients to look at or think about.

The core of the site is built using Laravel 8. It is used as a PHP scaffolding framework - with views, models, controllers, and routes.

ReactJS was pulled into the Laravel 8 project and used to populate the views on the front end.

Altogether, everything places really nicely. The content comes from WordPress, the back-end and shared templating is Laravel 8, and the components populating in the views are ReactJS. There's a few other fancy bells and whistles including node modules for sass, linting, and the like - but, the result is a fast and functional website on a working standardized codebase that's easier to maintain and has the potential to be handed off to any other developer or team with knowledge of the basic tech-stack.

This was my first experiencing using Laravel 8, as well as ReactJS. The future is bright.