CakePHP, React and TypeScript Application Starter

Over the last month, I’ve been building a ‘fun’ project that uses CakePHP, TypeScript and React. While I maintain AssetCompress it is poorly suited for react or vue applications. Most single-page-application frameworks want to use tools like webpack and have more complex requirements than a simple solution like AssetCompress can provide.

Using Webpack and Mix

Getting webpack configured can be a daunting task as it has many configuration options and plugins available. To help improve the getting started experience with webpack, there are many projects that aim to provide a simpler API. I wanted to give laravel-mix a try as it has been really successful in the Laravel community, and covers the scenarios I was hoping to stay inside. Luckily, ishanvyas22 has a great plugin available to integrate mix and CakePHP. Using this plugin gives you access to some great generators and a ViewHelper to load compiled assets.

Adding Typescript

While I found the react generator in the AssetMix plugin good, I wanted to build my fun project with TypeScript . I much prefer the strong typing that typescript provides as it enables more powerful auto-completion, and makes refactoring code simpler. Mix provides a simple wrapper for Typescript but you still need to get the tsconfig.json file aligned with what webpack is doing. After some trial and error I got TypeScript working the way I wanted.

I’ve published a new skeleton application repository that comes pre-baked with the AssetMix plugin, and TypeScript support. This new template makes it very simple to get started and includes source maps, incremental builds, and code splitting via dynamic import calls. Hopefully it is helpful for you in getting your future project off the ground.