protoreaction

Welcome, To protoReaction!

protoReaction is a NodeJS application for generating fully-configured React application projects, which can build to either React or Preact, from a single source tree.

Transpilation, bundling, loaders (file loaders, CSS and SASS loaders, et al.) are fully-configured, out-of-the-box.

Aside from requiring zero configuration, projects generated from protoReaction include fully-configured test libraries (MochaJS, nyc, chai, enzyme, sinon, et al.), as well as Redux, Redux Saga middleware, and REST utilities.

Redux Stores, Reducers, Redux Saga middleware, and action factory utilities are already created, combined, and ready for use, out-of-the-box.

Development tools for React, Preact, and Redux are also included, and loaded, when a project is run in development mode.

Projects generated are built, tested, and run, using simple scripts.

Contents

About
Quickstart
Beyond Quickstart
Project Structure
Author And License Info
Support This Project

About

protoReaction is a project generation tool, which creates a project, which can then transpile and bundle to either React or Preact, from a single source code tree.

protoReaction generates a fully-equipped project, made to scale, with the following (but not limited to) libraries:
Core:

• Babel
• Webpack
• React
• Preact
• SASS
• Axios
• Immer
• Immerable Record
• Redux
• Redux Saga
• Day.js

Server

• Hapi

Test:

• Mocha + Mochawesome + Mochawesome Report Generator
• Enzyme
• Chai
• Sinon
• JSDOM
• NYC
• Karma + Karma Webpack (known issue, after the latest ModeJS minor update - working on it!)

Development:

• Webpack Dev Middleware (configured with Hapi)
• Webpack Hot Middleware (configured with Hapi)
• React Devtools
• Preact Devtools
• Redux Devtools

protoReaction projects come complete, with file loaders for fonts, stylesheets, audio, video, and image files.
Projects are built, tested, and run, using simple scripts.

Quickstart

Requirements

As of the latest update to this README, this project uses the following versions, of NodeJS, npm, and pnpm:

NodeJS: v14.17.1
npm: v6.14.13
pnpm: v6.9.1

Projects generated by protoReaction use pnpm, to manage workspaces (React and Preact), as well as perform tasks.
To get started, install both pnpm and protoReaction, globally:

$ npm install -g pnpm@6.9.1 protoreaction@1.0.6

After successful installation of pnpm and protoReaction, you're ready, to create your first project.
Projects are created in your current working directory.

The following command will create the project myapp, with version 1.0.0, in your current directory:

$ protoreaction create myapp 1.0.0

Enter the project directory, install dependencies, and start the React in-memory development instance:

$ cd myapp
$ pnpm install
$ pnpm run start

In your web browser, navigate to:
http://localhost:3001/mmry/index.html

To view all assets being served by Hapi (JSON endpoint):
http://localhost:3001/available

If the in-memory build and server start were successful, you should see the following test page:

Beyond Quickstart

Additional create CLI Args (name = value pairs, i.e., --ARG=[VALUE]):

• --NAME=[NAME]: (Overrides unnamed arg) Name of your project (REQUIRED) (will be used in auto-configuration of package.json.
• --VERSION=[SEMVER]: (Overrides unnamed arg) Version (semver) of your project (will be used in auto-configuration of package.json.
• --AUTHOR_NAME=[AUTHOR NAME]: Name of your project author (will be used in auto-configuration of package.json.
• --AUTHOR_EMAIL=[AUTHOR EMAIL]: Email address of your project author (will be used in auto-configuration of package.json.
• --AUTHOR_URL=[AUTHOR URL]: Website URL of your project author (will be used in auto-configuration of package.json.
• --HOMEPAGE=[PROJECT HOMEPAGE]: Website URL for your project (will be used in auto-configuration of package.json.
• --LICENSE=[PROJECT LICENSE]: License for your project (will be used in auto-configuration of package.json.
• --REPO_TYPE=[REPOSITORY TYPE]: Repository type for your project (will be used in auto-configuration of package.json.
• --REPO_URL=[REPOSITORY URL]: Repository URL for your project (will be used in auto-configuration of package.json.

Additional Scripts:

Server Scripts:
To start with a React production in-memory build:

$ pnpm run start:prod

To start with a React production + devtools in-memory build:

$ pnpm run start:prod-dev

To start with a Preact development in-memory build:

$ pnpm run start:preact

To start with a Preact production in-memory build:

$ pnpm run start:preact:prod

To start with a Preact production + devtools in-memory build:

$ pnpm run start:preact:prod-dev

Build Scripts (output to workspaces/[react, preact]/dist/..):
To build React development bundles:

$ pnpm run build:dev

To build React production bundles:

$ pnpm run build:prod

To build Preact development bundles:

$ pnpm run build:preact:dev

To build Preact production bundles:

$ pnpm run build:preact:prod

After builds are generated, they are picked up by the built-in Hapi server:

$ pnpm run start

After building React development (pnpm run build:dev), navigate to:
http://localhost:3001/dist/react/dev/index.html

To view all assets being served by Hapi (JSON endpoint):
http://localhost:3001/available

Clean Scripts:
To clean all workspace dependency, build, and test output directories:

$ pnpm run clean

To clean the React dependency, build, and test output directories:

$ pnpm run clean:react

To clean the React dependency directory:

$ pnpm run clean:react:dependency

To clean the React build directory:

$ pnpm run clean:react:build

To clean the Preact dependency, build, and test output directories:

$ pnpm run clean:preact

To clean the Preact dependency directory:

$ pnpm run clean:preact:dependency

To clean the Preact build directory:

$ pnpm run clean:preact:build

To clean the test output directory:

$ pnpm run clean:test

Test Scripts (output to test/output/..):
To run all tests, with coverage (unit + integration):

$ pnpm run test:coverage

To run unit tests, with coverage:

$ pnpm run test:unit:coverage

To run integration tests, with coverage:

$ pnpm run test:integration:coverage

Tests generate HTML output, which is then served by the built-in Hapi server:

$ pnpm run start

After testing React (pnpm run test), navigate to:
http://localhost:3001/test/report/react/mochawesome/Test_Report_myapp.html
http://localhost:3001/test/report/react/nyc/index.html

To view all assets being served by Hapi (JSON endpoint):
http://localhost:3001/available

Project Structure

Below is a general overview of the project structure, i.e., "where to find the relevant things".

Source code (at root):
src

Root configuration modules:
config

React configuration modules:
workspaces/react/config/

Preact configuration modules:
workspaces/preact/config/

Test modules (/test/ directories may also be added to the root /src):
test/spec/

Test output (genrated after running tests):
test/output/

Author And License Info

protoReaction is authored by, and copyright 2021 to present, Antonio Malcolm.
All rights reserved.

protoReaction (A.K.A., "ProtoReaction" or "protoreaction") is licensed under the BSD 3-Clause license, and is subject to the terms of the BSD 3-Clause license, found in the LICENSE file, in the root directory of this project. If a copy of the BSD 3-Clause license cannot be found, as part of this project, you can obtain one, at: https://opensource.org/licenses/BSD-3-Clause

Support This Project

This software is built with the greatest care and attention to detail, and thoroughly tested.
Any support is greatly appreciated!