Integrate ReactJS to a CakePHP 2.x Application from Scratch
This is a basic integration of ReactJS into a CakePHP 2.x application.
Before we start, make sure you already have a running CakePHP 2.x application.
If you don’t have a running CakePHP app, you may clone this basic CakePHP 2.x application running on Docker: https://github.com/onoya/dockerized-cakephp-app.(This is an application from my blog post about Creating CakePHP 2.x Application with Docker from Scratch).
You may download the final result of this setup in GitHub.
- Node.js (I recommend installing the latest stable version)
- Yarn or NPM (In this post, I’m going to use Yarn)
Make sure to have all the prerequisites above installed.
I recommend using NVM for installing and managing node versions. Here is a great article on how to install NVM to your machine: The Best Way to Install Node.js.
Once you have all the prerequisites, go to the project repo, and generate the package.json file with yarn::
After running the command above, a
package.json file will be generated.
Before we start installing some dependencies, if you are using Git to manage this project, you’ll have to update the
.gitignore file and append the following lines below. If not, you may proceed to the next step.
Webpack and Babel
The first dependency we’re going to install is going to be webpack.
Next we’re going to configure Babel to use the presets that we have installed by creating
.babelrc file inside the project root directory.
Now we’re going to write a basic webpack configuration. Create the configuration file
As you can see from the configuration above,
app/src/index.js will be the entry point.
It will compile it, and output a
bundle.js file inside
So we have to create the
app/src directory and create
Now let’s add a build script inside
We have added 2 scripts: build and build-dev. We use build to bundle our React app for production, and build-dev for development.
We’re done with Webpack and Babel setup.You may try building the development version of
bundle.js by running the command below:
If you want to build the production version of it, you just have to run
yarn build instead.
It’s time to integrate React. Let’s install them by running the command below:
Before we move on to creating our first component and rendering them, let’s create a basic directory structure for our components. We’re going to create a
components directory inside
app/src/. This is where we are going to put our react components.
Let’s now create our first React component.
After creating the component, we’ll have to edit
app/src/index.js to render the component to the DOM.
Now let’s try to see if it’s working by replacing the content of
app/View/Layouts/default.ctp with below:
Our react component will be rendered in
Try to open up your browser and visit the site. You should see a page with a text
Configure CakePHP routing for Single Page App
Our react application is working fine and rendered correctly.But there’s one problem with our current setup right now. Try to append the url with any text like:
Now try to open the error log. It’s located at
app/tmp/logs/error.log. You may see some MissingControllerException. This is due to our current routing configuration. CakePHP will try to find for the controller. To stop that, we have to update our routes file.
Open app/Config/routes.php and replace the content with the code below:
And lastly, open app/Controller/PagesController.php and replace the content of display() method.
Now you won’t get those Missing Controller Exceptions anymore.
Additional Webpack Configuration
Styled components are gaining popularity nowadays. Some of the popular styling libraries such as Aphrodite and JSS will need transpilers for styling and etc. To begin with, we’ll have to install the following dependencies.
Now let us update
And that’s it!