Setting up React in a CakePHP project

Question

How can I set up React in CakePHP webroot using webpack?

I have an existing CakePHP project (with Model, View, Controller). I want to set mini React project in its webroot (Project/Miniproject/index.html). index.html will make ajax calls to api's defined in controllers.

- Project
| - app
| | - Controller
| | - View
| | - Model
| | - webroot
| | | - Miniproject
| | | | - index.html [Mini react project]

I have tried installing React Transform Boilerplate. But it use web dev server (and renders files on localhost:3000). But I want files rendered from the nginx server on which my CakePHP project runs.

When I visit the url (Project/Miniproject/index.html), it cannot find dist/bundle.js because it is in memory. So how can I set up React in CakePHP webroot using webpack?

Answer 1

I recommend looking into https://github.com/brawlins/react-webpack-php-starter.

You can still have Webpack running a dev server through BrowserSync and you will use the proxy option to reload your apache virtual host. ( don't have to use webpack-dev-server )

e.g. in your webpack.config.js

plugins: [

        // reloads browser when the watched files change
        new BrowserSyncPlugin({
            // use existing Apache virtual host
            proxy: 'http://localhost:80/',
            tunnel: false,
            // watch the built files and the index file
            files: ['public/assets/*', './index.php', './api/*.php']
        }),

Hope that makes sense. Dig though the code from the repo i linked and play around with it a little bit. Once you get the Idea of how @brawlins setup up his project. You should be able to tweek it or start your webpack config from scratch.

Just remember there is not one correct answer, you just have to experiment with methods that you can understand and works for you. Once you reach a brick wall then you go out and explore. But I feel like you already know that :)

Good Luck!

:)

p.s. I agree with @azium, it's best to keep your front end and back end separate as much as you can