React Static Boilerplate (RSB) is an opinionated boilerplate and tooling for creating modern stand-alone web applications (aka SPAs) for a serverless architecture. RSB significantly reduces cost by eliminating the need for servers such as EC2 instances because the entire site can be hosted directly from CDN (Firebase, GitHub Pages, Amazon S3, or other similar cloud storage). Sites built with RSB cab be fully functional with REST API or GraphQL calls to micro-services such as Amazon Lambda, Azure Functions, or dynamic Docker endpoints hosted on DigitalOcean. RSB demonstrates how to use component-based UI development approach with best of breed technologies including React, Redux, Babel, Webpack, Browsersync, React Hot Loader and more.
The work is being sponsored by:
Β Β Β ΒΒ Β β Modern JavaScript syntax (ES2015+) via Babel, modern CSS syntax via PostCSS
Β Β β Component-based UI architecture via React, Webpack and CSS Modules
Β Β β Application state management /w time-travel debugging via Redux (see main.js
, core/store.js
)
Β Β β Routing and navigation via path-to-regexp
and history
(see main.js
, core/router.js
, utils/routes-loader.js
)
Β Β β Code-splitting and async chunk loading via Webpack and ES6 System.import()
Β Β β Hot Module Replacement (HMR) /w React Hot Loader
Β Β β Cross-device testing with Browsersync (see run.js#start
)
Β Β β 24/7 community support on Gitter; customization requests on Codementor
Demo: https://rsb.kriasoft.com Β |Β View docs Β |Β Follow us on Gitter, Twitter, or ProductHunt Β |Β Send feedback to @koistya
.
βββ /components/ # Shared or generic UI components
β βββ /Button/ # Button component
β βββ /Layout/ # Website layout component
β βββ /Link / # Link component to be used insted of <a>
β βββ /... # etc.
βββ /core/ # Core framework
β βββ /history.js # Handles client-side navigation
β βββ /router.js # Handles routing and data fetching
β βββ /store.js # Application state manager (Redux)
βββ /node_modules/ # 3rd-party libraries and utilities
βββ /pages/ # React components for web pages
β βββ /about/ # About page
β βββ /error/ # Error page
β βββ /home/ # Home page
β βββ /... # etc.
βββ /public/ # Static files such as favicon.ico etc.
β βββ /dist/ # The folder for compiled output
β βββ favicon.ico # Application icon to be displayed in bookmarks
β βββ robots.txt # Instructions for search engine crawlers
β βββ /... # etc.
βββ /test/ # Unit and integration tests
βββ /utils/ # Utility and helper classes
βββ main.js # React application entry point
βββ package.json # The list of project dependencies and NPM scripts
βββ routes.json # This list of application routes
βββ run.js # Build automation script, e.g. `node run build`
βββ webpack.config.js # Bundling and optimization settings for Webpack
Step 1. Make sure that you have Node.js v6 or newer installed on your machine.
Step 2. Clone this repository or use Yeoman generator to bootstrap your project:
$ git clone -o react-static-boilerplate -b master --single-branch \
https://github.com/kriasoft/react-static-boilerplate.git MyApp
$ cd MyApp
$ npm install # Install project dependencies listed in package.json
βββ or βββ
$ npm install -g yo
$ npm install -g generator-react-static
$ mkdir MyApp
$ cd MyApp
$ yo react-static
Step 3. Compile and launch your app by running:
$ node run # Same as `npm start` or `node run start`
You can also test your app in release (production) mode by running node run start --release
or
with HMR and React Hot Loader disabled by running node run start --no-hmr
. The app should become
available at http://localhost:3000/.
The unit tests are powered by chai and mocha.
$ npm run lint # Check JavaScript and CSS code for potential issues
$ npm run test # Run unit tests. Or, `npm run test:watch`
Update publish
script in the run.js
file with your full Firebase project name as found
in your Firebase console. Note that this may have an
additional identifier suffix than the shorter name you've provided. Then run:
$ node run publish # Build and publish the website to Firebase, same as `npm run publish`
The first time you publish, you will be prompted to authenticate with Google and generate an authentication token in order for the publish script to continue.
If you need just to build the project without publishing it, run:
$ node run build # Or, `node run build --release` for production build
You can always fetch and merge the recent changes from this repo back into your own project:
$ git checkout master
$ git fetch react-static-boilerplate
$ git merge react-static-boilerplate/master
$ npm install
Anyone and everyone is welcome to contribute to this project. The best way to start is by checking our open issues, submit a new issues or feature request, participate in discussions, upvote or downvote the issues you like or dislike, send pull requests.
- React Starter Kit β Isomorphic web app boilerplate (Node.js, React, GraphQL, Webpack, CSS Modules)
- ASP.NET Core Starter Kit β Cross-platform single-page application boilerplate (ASP.NET Core, React, Redux)
- Babel Starter Kit β JavaScript library boilerplate (ES2015, Babel, Rollup, Mocha, Chai, Sinon, Rewire)
- Universal Router β Isomorphic router for web and single-page applications (SPA)
- History β HTML5 History API wrapper library that handle navigation in single-page apps
- Getting Started with React.js
- Getting Started with GraphQL and Relay
- React.js Questions on StackOverflow
- React.js Discussion Board
- Learn ES6, ES6 Features
Copyright Β© 2015-present Kriasoft, LLC. This source code is licensed under the MIT license found in the LICENSE.txt file.
Made with β₯ by Konstantin Tarkus (@koistya) and contributors