在CakePHP项目中设置React

如何使用webpack在Cake PHP webroot中设置React?

我有一个现有的CakePHP项目(有模型,视图,控制器).我想在其webroot(Project / Miniproject / index.html)中设置mini React项目. index.html将对控制器中定义的api进行ajax调用.

- 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?

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

您仍然可以让Webpack通过browserSync运行开发服务器,您将使用代理选项重新加载您的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配置.

请记住,没有一个正确答案,您只需要尝试一些您可以理解并适合您的方法.到达砖墙后,你就出去探索.但我觉得你已经知道:)

祝好运!

相关文章

统一支付是JSAPI/NATIVE/APP各种支付场景下生成支付订单,返...
统一支付是JSAPI/NATIVE/APP各种支付场景下生成支付订单,返...
前言 之前做了微信登录,所以总结一下微信授权登录并获取用户...
FastAdmin是我第一个接触的后台管理系统框架。FastAdmin是一...
之前公司需要一个内部的通讯软件,就叫我做一个。通讯软件嘛...
统一支付是JSAPI/NATIVE/APP各种支付场景下生成支付订单,返...