@janrevis/express-react-scaffold NPM

Express React Scaffold

A simple utility to scaffold a full stack javascript project with Express backend and React frontend. Generated projects allow a wide range of options for your project, from a simple project deployed on Heroku to a fully dockerized app and development environment.

Prerequisites

Node version 12 or higher.
Docker version 20.x.x or higher if you plan to make use of Docker in your project.

install and use

to install:

install -g @janrevis/express-react-scaffold

to use:

run express-react-scaffold <project directory> to create a new project in the directory . express-react-scaffold will not create a new project if the project directory already exists and contains files that match the name of any of the files generated by express-react-scaffold.

A project scaffolding will provide the following:

Webpack configurations for production and development with support for React jsx, es6 transpilation, css, and html.
Hot reload capability for front and backend development.
Scaffolding for running your development server in a docker environment and building production docker images for your express server.
All scripts and commands are made available through generated code giving full ability to customize your project.

Commands

npm start - Starts the node server without running webpack. This command can be used to start your server in a production environment.
npm run build - Builds frontend assets for production and builds the express server docker container image. If you are not running docker and only need to build the frontend, run npm run build-client.
npm run build-client - Builds frontend assets for production.
npm run build-server - Builds server docker container image. If you are using npm run dev to run the server in a docker container through docker compose, use this command to rebuild the image if changes are made to the Dockerfile.dev file.
npm run clean - Cleans the generated files by webpack.
npm run dev-server - Runs the express server in development mode with hot reload. Does not run the server in a docker container. Frontend build and hot reload included.
npm run dev-client - Runs the frontend development environment with hot reload but without a backend.
npm run dev - Runs the frontend development environment and express server in docker with hot reload.
npm run fresh-dev - Like npm run dev but forces the docker image to be rebuilt. Use this command when you change Dockerfile.env and need to replace cached image.

Generated code

Generated project code is located in the /server and /client directories.

/server
- index.js - startup code to start express server with
/client
- src/index.js - Root script file to insert top level component into the DOM.
- src/components/app.js - Starter App component.
- src/index.html - Starter html template.

Generated development scripts

In addition to setting up initial product code, Express React Scaffold will generate a number of scripts. Modify as need to suite your project. Note where scripts have a product and development version updates might need to be made to both.

webpack.config.dev.js - Development version of webpack configuration script.
webpack.config.prod.js - Production version of webpack configuration script.
Dockerfile - Production image docker file. Used by npm run build-server.
Dockerfile.env - Development image docker file. Run by docker-compose through npm run dev or npm run fresh-dev.
'docker-compose.yml' - Used by npm run dev and npm run fresh-dev to start up the development environment with docker. Extend to add your external dependencies in docker.

Project Configuration

Use config/build.json to specify build parameters. The recognized parameters are presented below. Values starting with "$" specify an environment variable. For example:

{
  "cdnRoot": "$CDN_ROOT"
}

cndRoot is assigned to the value of environment variable CDN_ROOT.

Express React Scaffold will generate a build.json file with initial default values. Modify or remove build.json to suite your project. All settings have a default value if not defined in build.json or build.json is missing.

cdnPrefix: Prefix added to asset urls generated by npm run build-client. Frontend assets are bundled with the container if default value. Defaults to "".
dockerRepo: Repository name of docker image generated by npm run build-server. Defaults to package name.
dockerVersion: Version of docker image generated by npm run build-server. Defaults to the package version.