README

简介

一个集成了react.js的CodeIgniter 4骨架应用程序。

特性

• 带有React Router DOM的SPA应用程序，访问后页面会进行缓存。
• 使用来自CodeIgniter 4的服务端模板，首先使用DOMPurify进行评估。
• 对生产环境的Webpack支持

设置

1. 运行composer create-project命令

composer create-project samsonasik/ci4-react

2. 将文件ci4-react/env复制到ci4-react/.env

cp ci4-react/env ci4-react/.env

3. 设置环境和应用程序配置

打开ci4-react/.env并设置CI_ENVIRONMENT、app.baseURL和app.indexPage

# file ci4-react/.env
CI_ENVIRONMENT = development

app.baseURL    = 'http://localhost:8080'
app.indexPage  = ''

4. 运行PHP开发服务器

# go to ci4-react directory
cd ci4-react

# run php development server inside ci4-react directory
php spark serve

5. 打开网页浏览器 http://localhost:8080

生产环境

为了部署到生产环境，根目录中包含webpack.config.js文件。当我们运行webpack命令时，可以生成public/js/dist/bundle.js。如果您还没有在系统中安装webpack，可以安装nodejs并安装webpack和webpack-cli

sudo npm install -g webpack
sudo npm install -g webpack-cli

因此，我们可以运行

webpack

Hash: e1fc11a2dd1c76b96bee
Version: webpack 4.43.0
Time: 506ms
Built at: 07/02/2020 10:09:56 PM
                   Asset      Size  Chunks             Chunk Names
public/js/dist/bundle.js  2.37 KiB       0  [emitted]  main
Entrypoint main = public/js/dist/bundle.js
[0] ./public/js/create-page.js 1.15 KiB {0} [built]
[1] ./public/js/app.js + 2 modules 2.28 KiB {0} [built]
    | ./public/js/app.js 1.63 KiB [built]
    | ./public/js/about.js 130 bytes [built]
    | ./public/js/Navigation.js 529 bytes [built]

生成后，我们可以按照以下方式更新.env文件

# file .env
CI_ENVIRONMENT = production

app.baseURL    = 'https://www.your-website.com'
app.indexPage  = ''

在app/Views/layout.php中，我们有一个ENVIRONMENT检查，在开发时使用js/app.js，当存在时在生产环境中使用/js/dist/bundle.js。

// src/App/templates/layout/default.phtml
<?php $isDevelopment = ENVIRONMENT === 'development'; ?>

// ...
    <script src="<?php echo base_url($isDevelopment
            ? '/js/app.js'
            : (
                // when after run webpack, allow to use bundled js
                // fallback to use /js/app.js when not
                file_exists(ROOTPATH . 'public/js/dist/bundle.js')
                    ? '/js/dist/bundle.js'
                    : '/js/app.js'
            )) ?>" type="module"></script>
// ...

它将自动处理这些问题。