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?

github.com/gaearon/react-transform-boilerplate/blob/master/… npm run build — azium
– azium, Commented Apr 15, 2016 at 15:43
@azium But I would need to run this command after every minor change.Would'nt this slow down my development? — john doe
– john doe, Commented Apr 15, 2016 at 15:47
webpack has a watch flag webpack.github.io/docs/tutorials/getting-started/#watch-mode but I don't think you can mix the dev server + hot reloading & serve from nginx at the same time. — azium
– azium, Commented Apr 15, 2016 at 15:49
To be honest, keeping your react front end entirely separate from your cakephp backend is probably better. Not sure what benefit you get by setting it up the way you want. — azium
– azium, Commented Apr 15, 2016 at 15:52
@azium I am using the approach because I can then use the cake php session — john doe
– john doe, Commented Apr 15, 2016 at 16:33

Konda · Accepted Answer · 2017-03-15 01:13:44Z

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

Collectives™ on Stack Overflow

Setting up React in a CakePHP project

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related