Notoriously Punctual Manatee


    1.9.0 • Public • Published

    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.

    Creates the scripts necessary to develop and publish a lightweight Preact React + Redux web app. This tool focuses primarily on:

    • 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
    • fastpage
    • add-redux for a pure focus on redux
    • and much more


    Just run this in the console:

    npx quick-react-redux-app

    This will install and build a small sample application structure.

    The file tree created is as follows:

    |- base.html
    |- build.js
    |- config.js
    |- generate-page.js
    |- run.js
    |- default.js
    |- favicon.ico
    |- favicon.png
    |- main.js
    |- main.jsx
    |- style.css
    |- static
       |- image.png

    You should only need to worry about the files in the src folder.


    Defines the title of the web page (title), the meta description (description), and the initial state of the redux store (state).


    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:

    node .

    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.

    Advanced Usage

    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 default.js file
    • %_DESCRIPTION_% is replaced with the description specified in the default.js file
    • %_BODY_% is replaced with the page generated in main.jsx
    • %_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.


    Defines the babel and webpack configuration. Also includes the port to use when running the web app in development.


    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 node ..


    npm i quick-react-redux-app

    DownloadsWeekly Downloads






    Unpacked Size

    274 kB

    Total Files


    Last publish