Note: due to limitations in preact-compat that make it incompatible with react-redux 6.0.0, preact has been removed from the boilerplate, at least for now.
- quick load times
uses Preact instead of React in production
- generates static page for immediate page functionality
relatively small footprint (bundled script for the sample project is 44 KB)
- fast development
- limited boilerplate
- only includes scripts for running in development and building for production
- allows for faster download/development with more customization
This tool focuses on laying only the requisite foundation for react-redux web apps. Depending on your use case, you might want to use something more specialized:
- create-react-app if you intend to transfer this into an existing app or load times are less important
- gatsby if more boilerplate/foundation is preferred
- add-redux for a pure focus on redux
- and much more
Just run this in the console:
This will install and build a small sample application structure.
The file tree created is as follows:
scripts |- base.html |- build.js |- config.js |- generate-page.js |- run.js src |- default.js |- favicon.ico |- favicon.png |- main.js |- main.jsx |- style.css |- static |- image.png .gitignore package.json README.md
You should only need to worry about the files in the
Defines the title of the web page (
title), the meta description (
description), and the initial state of the redux store (
Sample default 16x16 favicon.
Sample larger favicon (128x128) for iPhone, etc..
Entry point for the page's scripts. By default, the primary redux reducer and store is defined here, as well as the react-redux connector.
Entry point for the web page.
Web page's style sheet.
Static files, which can be requested by "./static/" in the web page. An image is included as an example. If your project does not need any static files, this folder can safely be removed.
To run the web app locally, run node in the created project's root level:
To build for production, run build to create an "index" folder:
npm run build
The created "index" folder can be dropped directly on a web server via FTP.
The files in the
scripts folder handle running the application in development and building for production.
The HTML template that wraps around the page generated in the
main.jsx file. Add any <meta> headers or any other non-page-body things to this file. Uses lazy text replacement during build to prepare the final page:
%_TITLE_%is replaced with the title specified in the
%_DESCRIPTION_%is replaced with the description specified in the
%_BODY_%is replaced with the page generated in
%_RELOAD_%is the url to the reload script during development and an empty string in production
Generates the static webpage, builds the script bundle + source map, and copies over the css. This script is executed when running
npm run build.
Converts the page structured in
main.jsx and defined in
default.js into static html.
Runs a local express web server for developing the web app. This script is executed when running