samsonasik/mezzio-react

Laminas mezzio skeleton with React.js Integration

0.0.11 2020-07-15 09:09 UTC

Requires

• php: ^7.3
• 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
• laminas/laminas-zendframework-bridge: ^1.0
• 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
• mezzio/mezzio-tooling: ^1.3
• phpspec/prophecy: ^1.10.3
• phpspec/prophecy-phpunit: ^2.0
• phpunit/phpunit: ^9.0.1
• roave/security-advisories: dev-master

BSD-3-Clause

• Abdul Malik Ikhsan

• middleware
• Skeleton
• psr
• psr-7
• PSR-11
• psr-15
• laminas
• mezzio

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.