This is a
playground to test code. It runs a full
Node.js environment and already has all of
npm’s 1,000,000+ packages pre-installed, including
quick-react-redux-app with all
npm packages installed. Try it out:
This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.
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.
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:
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