How To Integrate CakePHP with React

CakePHP’s View is weak compared to it’s Model and Control framework. Because of this, people often use React as a supplement or replacement to the frontend. This guide will provide information on how you can use React alongside CakePHP.

Embed React Components inside Cake’s View Templates

Store all of your React components inside a separate folder. In my case, they will live inside /src/React/components. Each embeddable React component will attach itself to the DOM.

//𝙸𝚗𝚜𝚒𝚍𝚎 𝚜𝚛𝚌/𝚁𝚎𝚊𝚌𝚝/𝚌𝚘𝚖𝚙𝚘𝚗𝚎𝚗𝚝𝚜/

𝚒𝚖𝚙𝚘𝚛𝚝 𝚁𝚎𝚊𝚌𝚝 𝚏𝚛𝚘𝚖 '𝚛𝚎𝚊𝚌𝚝';
𝚒𝚖𝚙𝚘𝚛𝚝 𝚁𝚎𝚊𝚌𝚝𝙳𝙾𝙼 𝚏𝚛𝚘𝚖 '𝚛𝚎𝚊𝚌𝚝-𝚍𝚘𝚖';

𝚏𝚞𝚗𝚌𝚝𝚒𝚘𝚗 𝙴𝚖𝚋𝚎𝚍𝚍𝚊𝚋𝚕𝚎𝙲𝚘𝚖𝚙𝚘𝚗𝚎𝚗𝚝() {
	𝚛𝚎𝚝𝚞𝚛𝚗 (
		<𝚑𝟷>𝙷𝚎𝚕𝚕𝚘 𝚆𝚘𝚛𝚕𝚍</𝚑𝟷>
	);
}
𝚁𝚎𝚊𝚌𝚝𝙳𝙾𝙼.𝚛𝚎𝚗𝚍𝚎𝚛(<𝙴𝚖𝚋𝚎𝚍𝚍𝚊𝚋𝚕𝚎𝙲𝚘𝚖𝚙𝚘𝚗𝚎𝚗𝚝/>, 𝚍𝚘𝚌𝚞𝚖𝚎𝚗𝚝.𝚐𝚎𝚝𝙴𝚕𝚎𝚖𝚎𝚗𝚝𝙱𝚢𝙸𝚍('𝚙𝚊𝚛𝚎𝚗𝚝𝚃𝚊𝚐'));

Note: The parentTag will be the bridge between React and CakePHP.

Configure webpack.config.js to compile each .jsx file into a JavaScript file. The code below compiles src/React/components/embedable-components.jsx to /webroot/js/embeddable-component.jsx.

// 𝙸𝚗𝚜𝚒𝚍𝚎 𝚠𝚎𝚋𝚙𝚊𝚌𝚔.𝚌𝚘𝚗𝚏𝚒𝚐.𝚓𝚜

𝚌𝚘𝚗𝚜𝚝 𝚙𝚊𝚝𝚑 = 𝚛𝚎𝚚𝚞𝚒𝚛𝚎('𝚙𝚊𝚝𝚑');

𝚖𝚘𝚍𝚞𝚕𝚎.𝚎𝚡𝚙𝚘𝚛𝚝𝚜 = {
   𝚎𝚗𝚝𝚛𝚢: {
      𝚎𝚖𝚋𝚎𝚍𝚊𝚋𝚕𝚎_𝚌𝚘𝚖𝚙𝚘𝚗𝚎𝚗𝚝:
          𝚙𝚊𝚝𝚑.𝚛𝚎𝚜𝚘𝚕𝚟𝚎(__𝚍𝚒𝚛𝚗𝚊𝚖𝚎, "𝚜𝚛𝚌", "𝚁𝚎𝚊𝚌𝚝", "𝚌𝚘𝚖𝚙𝚘𝚗𝚎𝚗𝚝𝚜", "𝚎𝚖𝚋𝚎𝚍𝚊𝚋𝚕𝚎-𝚌𝚘𝚖𝚙𝚘𝚗𝚎𝚗𝚝.𝚓𝚜𝚡")
   },
   𝚘𝚞𝚝𝚙𝚞𝚝: {
       𝚙𝚊𝚝𝚑: 𝚙𝚊𝚝𝚑.𝚛𝚎𝚜𝚘𝚕𝚟𝚎(__𝚍𝚒𝚛𝚗𝚊𝚖𝚎, "𝚠𝚎𝚋𝚛𝚘𝚘𝚝", "𝚓𝚜"),
	    𝚏𝚒𝚕𝚎𝚗𝚊𝚖𝚎: '[𝚗𝚊𝚖𝚎].𝚓𝚜'
        },
  𝚖𝚘𝚍𝚞𝚕𝚎: { /** 𝙲𝚘𝚍𝚎 𝚏𝚘𝚛 𝚑𝚊𝚗𝚍𝚕𝚒𝚗𝚐 𝚁𝚎𝚊𝚌𝚝 𝚌𝚘𝚖𝚙𝚒𝚕𝚊𝚝𝚒𝚘𝚗 **/}
};

Once we build the app, components inside webroot will be accessible inside Cake’s view templates and can easily be embedded:

<𝚍𝚒𝚟 𝚒𝚍="𝚙𝚊𝚛𝚎𝚗𝚝𝚃𝚊𝚐">
	<?𝚙𝚑𝚙 
		// 𝚃𝚑𝚒𝚜 𝚒𝚜 𝚝𝚑𝚎 𝚋𝚛𝚒𝚍𝚐𝚎 𝚋𝚎𝚝𝚠𝚎𝚎𝚗 𝙲𝙰𝙺𝙴𝙿𝙷𝙿 𝚊𝚗𝚍 𝚁𝙴𝙰𝙲𝚃𝙹𝚂
		𝚎𝚌𝚑𝚘 $𝚝𝚑𝚒𝚜->𝙷𝚝𝚖𝚕->𝚜𝚌𝚛𝚒𝚙𝚝('𝚎𝚖𝚋𝚎𝚍𝚊𝚋𝚕𝚎_𝚌𝚘𝚖𝚙𝚘𝚗𝚎𝚗𝚝.𝚓𝚜');
	?>
</𝚍𝚒𝚟>

Note: Ensure that the parentTag appears before the call to the script import.

React as Single-Page Frontend with CakePHP

React Router is a library that can control the browser’s navigation and history interface. We can use React Router instead of CakePHP’s backend routing. However, we still need to tell CakePHP to load the initial page where our React app lives.

// 𝙸𝚗𝚜𝚒𝚍𝚎 𝚌𝚘𝚗𝚏𝚒𝚐/𝚛𝚘𝚞𝚝𝚎𝚜.𝚙𝚑𝚙
$𝚋𝚞𝚒𝚕𝚍𝚎𝚛->𝚌𝚘𝚗𝚗𝚎𝚌𝚝('/*', ['𝚌𝚘𝚗𝚝𝚛𝚘𝚕𝚕𝚎𝚛' => '𝙿𝚊𝚐𝚎𝚜', '𝚊𝚌𝚝𝚒𝚘𝚗' => '𝚖𝚊𝚒𝚗']);

The following code disables Cake’s automatic template rendering via URL and routes all URL requests to a single webpage we’ve created called main.

Moving forward, we still need to make sure that Cake’s REST APIs are accessible. The following code below will route your URLs that are prefixed with `api/` to the generic route.

𝚞𝚜𝚎 𝙲𝚊𝚔𝚎\𝚁𝚘𝚞𝚝𝚒𝚗𝚐\𝚁𝚘𝚞𝚝𝚎\𝙳𝚊𝚜𝚑𝚎𝚍𝚁𝚘𝚞𝚝𝚎;

$𝚛𝚘𝚞𝚝𝚎𝚜->𝚜𝚌𝚘𝚙𝚎('/𝚊𝚙𝚒', 𝚏𝚞𝚗𝚌𝚝𝚒𝚘𝚗 (𝚁𝚘𝚞𝚝𝚎𝙱𝚞𝚒𝚕𝚍𝚎𝚛 $𝚛𝚘𝚞𝚝𝚎𝚜) {
    $𝚛𝚘𝚞𝚝𝚎𝚜->𝚏𝚊𝚕𝚕𝚋𝚊𝚌𝚔𝚜(𝙳𝚊𝚜𝚑𝚎𝚍𝚁𝚘𝚞𝚝𝚎::𝚌𝚕𝚊𝚜𝚜);
});

Following the steps in the section above you can embed your entire React application in the single template rendered by PagesController::main().

References: