在CakePHP项目中设置React

Question

如何使用webpack在CakePHP webroot中设置React？

我有一个现有的CakePHP项目(使用Model,View,Controller).我想在其webroot()中设置迷你React项目.将对控制器中定义的api进行ajax调用.Project/Miniproject/index.htmlindex.html

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

我已经尝试安装React Transform Boilerplate.但它使用web dev服务器(并在localhost:3000上呈现文件).但我想要从运行CakePHP项目的nginx服务器渲染的文件.

当我访问url(Project/Miniproject/index.html)时,它找不到,dist/bundle.js因为它在内存中.那么如何使用webpack在CakePHP webroot中设置React？

Answer 1

我建议查看https://github.com/brawlins/react-webpack-php-starter。

您仍然可以通过 BrowserSync 让 Webpack 运行开发服务器，并且您将使用代理选项来重新加载您的 apache 虚拟主机。（不必使用 webpack-dev-server ）

例如在你的 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']
        }),

希望这是有道理的。挖掘我链接的存储库中的代码并稍微尝试一下。一旦您了解了@brawlins 如何设置他的项目。您应该能够调整它或从头开始您的 webpack 配置。

请记住，没有一个正确的答案，您只需尝试您可以理解且适合您的方法即可。一旦你到达砖墙，你就出去探索。但我觉得你已经知道了:)

祝你好运！

:)

ps 我同意@azium，最好尽可能将前端和后端分开