README

About

QuidPHP/React repository contains the necessary structure to create a new project using QuidPHP, LemurCMS and React.

License

QuidPHP/React is available as an open-source software under the MIT license.

Documentation

QuidPHP/React documentation is available at QuidPHP/Docs.

Installation

QuidPHP/React can be easily installed with Composer. It is available on Packagist.

$ composer create-project quidphp/react --prefer-dist

Requirement

QuidPHP/React requires the following:

Apache or Nginx server (running on MacOs or Linux environment).
- Works in Windows environment but there are known issues.
PHP 8.1
- with these extensions:
  - ctype
  - curl
  - date
  - fileinfo
  - gd
  - iconv
  - json
  - mbstring
  - pcre
  - openssl
  - session
  - SimpleXML
  - zip
  - PDO
  - pdo_mysql
- and these PHP INI directives
  - post_max_size must be at least 1MB
  - post_max_size must be larger than upload_max_filesize
  - memory_limit must be at least 128MB
Mysql (>= 8.0) or MariaDB (>= 10.4) database
NodeJs LTS version (>= 16)
Any modern browser (not Internet Explorer)

Dependency

QuidPHP/Assert has the following dependencies:

quidphp/site - Quid\Site - Extended platform to build a website using the QuidPHP framework and LemurCMS
quidphp/navigation - Javascript module for navigating a website without reloading
facebook/react - A declarative, efficient, and flexible JavaScript library for building user interfaces.
facebook/react-dom - This package serves as the entry point to the DOM and server renderers for React.
laravel-mix/laravel-mix - The power of webpack, distilled for the rest of us
scottcharlesworth/laravel-mix-polyfill - Quid\Main - A Laravel Mix extension to include polyfills by using Babel, core-js, and regenerator-runtime
sass/dart-sass - The reference implementation of Sass, written in Dart.
webpack-contrib/sass-loader - Compiles Sass to CSS
shakacode/sass-resources-loader - SASS resources (e.g. variables, mixins etc.) loader for Webpack.
bholloway/resolve-url-loader - Webpack loader that resolves relative paths in url() statements based on the original source file
@babel/preset-react - Babel preset for React
pmmmwh/react-refresh-webpack-plugin - A Webpack plugin to enable "Fast Refresh" for React components.

All dependencies will be resolved by using the Composer installation process.

Setup

Once the installation is complete, simply follow these steps:

Make sure the storage and public folders are writable by your web server. For storage also make sure all subdirectories are writable.
Configure an Apache Virtual Host or Nginx Server Block in order to have a domain pointing to the public folder document root.
Import db.sql within a new Mysql/MariaDB database.
Duplicate the env-default.php file and rename it to env.php.
Update the scheme hosts within the env.php file. You will need to set a different host (domain or subdomain) for the application and the CMS.
Update the database parameters within the env.php file.
Not required, but you are encouraged to change the namespace of all PHP classes within the src folder. The default namespace is Project.

Booting via Webpack/HTTP

Open the project folder in the Command Line. To start the development server with hot module reload (HMR) write:

npm run hot

Your application will be reachable at the defined host within your env.php file. A second Node server is also started to serve the HMR requests (defaults to localhost on port 8079). You may need to accept the self-signed certificate for that localhost.

Webpack production build

To generate the production build for the React application, open the project folder in the Command Line and write:

npm run prod

QuidPHP CLI routes

Open the project folder in the Command Line. You may now submit a command in the following format:

php quid [path][:envType]
exemple:
php quid /en/my-url
php quid /en/my-url:dev/cms
php quid /:prod/app

LemurCMS credentials

Once you open the CMS within your browser, you will need to login. The default user is:

Username: admin
Password: changeme123

Once you are logged in, you will be able to change the password for the user and create new users.

Overview

QuidPHP/Project contains 31 files. Here is an overview:

.gitignore - Standard .gitignore file for the project
composer.json - File declaring all Composer PHP dependencies
db.sql - Minimal database structure required
env-default.php - Declare environment data for the application, copy this file and rename to env.php
LICENSE - MIT License file for the repository
package.json - File declaring all NPM dependencies
quid - File for booting the application and Cms via CLI
README.md - This readme file in markdown format
webpack.mix.js - Configuration file for laravel-mix
storage/public/favicon.ico - Generic favicon (16x16), this will be symlinked to public/favicon.ico.
public/.htaccess - Simple apache directive file, requires mod_rewrite
public/index.php - Index file for booting the application and Cms via an HTTP request
src/Boot.php - Class for booting the application and CMS
src/Route.php - Abstract class for a route, all routes will extend this class
src/Row.php - Abstract class for a row, all rows will extend this class
src/Session.php - Class used to represent the active session
src/App/_template.php - Trait used by all routes which generate an interface
src/App/Error.php - Class for the error route of the app
src/App/Home.php - Class for the home route of the app
src/Row/User.php - Class for a row of the user table
src/Service/React.php - Class related to React and the loading of front-end assets
app/app.jsx - Root component which loads the correct route
app/app.scss - Main scss stylesheet for the app
app/global.js - Script which declares some global variables
app/index.js - Entry file for the react application
app/component/HelloWorld.jsx - Component for a hello world in a h1 tag
app/component/HelloWorld.module.scss - SCSS module file for the hello world component
app/interface/Layout.jsx - Component for the common page layout
app/interface/Layout.scss - Stylesheet for the common page layout
app/route/Error.jsx - Component for the error route
app/route/Home.jsx - Component for the home route

Known issues

On Windows, there are some problems related to creating symlinks.
On Windows, you will need to add lower_case_table_names = 2 in your database configuration file (my.cnf). The table and column names need to be stored in their natural case.

Testing

QuidPHP testsuite can be run by creating a new QuidPHP/Assert project.

quidphp / react

Maintainers

Details