samsonasik / mezzio-react
Laminas mezzio skeleton with React.js Integration
Fund package maintenance!
samsonasik.wordpress.com/donate
Requires
- php: ^8.1
- laminas/laminas-component-installer: ^2.1.2
- laminas/laminas-config-aggregator: ^1.2
- laminas/laminas-diactoros: ^2.3.0
- laminas/laminas-servicemanager: ^3.4
- laminas/laminas-stdlib: ^3.2.1
- mezzio/mezzio: ^3.2.1
- mezzio/mezzio-helpers: ^5.3
- mezzio/mezzio-laminasrouter: ^3.0.1
- mezzio/mezzio-laminasviewrenderer: ^2.2
Requires (Dev)
- filp/whoops: ^2.7.1
- laminas/laminas-coding-standard: ^2.0.0
- laminas/laminas-development-mode: ^3.2
- phpspec/prophecy: ^1.10.3
- phpspec/prophecy-phpunit: ^2.0
- phpunit/phpunit: ^9.0.1
- roave/security-advisories: dev-master
README
Introduction
A Mezzio 3 Skeleton Application with React.js integration.
Features
- SPA application with React Router DOM with cached pages after visited.
- Using server side template from Mezzio 3, eval'd with DOMPurify it first.
- Webpack support for production
Setup
1. Run composer create-project command:
composer create-project samsonasik/mezzio-react composer development-enable
2. Run PHP Development server
cd mezzio-react composer serve
3. Open web browser http://localhost:8080
Production
For deploy to production purpose, it has webpack.config.js
in root directory that when we run webpack
command, we can get public/js/dist/bundle.js
after run it. If you don't have a webpack
installed yet in your system, you can install nodejs and install webpack
and webpack-cli
:
sudo npm install -g webpack sudo npm install -g webpack-cli
So, we can run:
webpack Hash: 0dedd8dd8641d88b7665 Version: webpack 4.43.0 Time: 173ms Built at: 06/26/2020 9:02:37 PM Asset Size Chunks Chunk Names public/js/dist/bundle.js 3.33 KiB 0 [emitted] main Entrypoint main = public/js/dist/bundle.js [0] ./public/js/app.js + 2 modules 6.32 KiB {0} [built] | ./public/js/app.js 1.62 KiB [built] | ./public/js/create-page.js 1.36 KiB [built] | ./public/js/Navigation.js 3.33 KiB [built]
After it generated, we can run the following commands to get production
environment by default:
# ensure no left over file development config rm config/development.config.php && rm config/autoload/development.local.php # install with --no-dev composer install --no-dev # ensure no left over file cache before re-build cache composer clear-config-cache
In default.phtml
, we have a isDevelopment()
view helper check to use js/app.js
when on development, and use /js/dist/bundle.js
on production when exists.
// src/App/templates/layout/default.phtml $isDevelopment = $this->isDevelopment(); // ... ->prependFile( $isDevelopment ? '/js/app.js' : ( // when after run webpack, allow to use bundled js // fallback to use /js/app.js when not file_exists('./public/js/dist/bundle.js') ? '/js/dist/bundle.js' : '/js/app.js' ), 'module' ) // ...
that will automatically take care of that.