React Static Boilerplate

React Static Boilerplate (RSB) is a 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 can 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. This work is being sponsored by:

Features

✓ 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, store.js)
✓ Routing and navigation via path-to-regexp and history (main.js, router.js, tools/routes-loader.js)
✓ Code-splitting and async chunk loading via Webpack v2
✓ Hot Module Replacement (HMR) /w React Hot Loader, cross-device testing with Browsersync (see run.js)
✓ 24/7 community support on Gitter + perimum support on Skype (book a session)

View docs, online demo | Follow us on Gitter, Twitter or ProductHunt | Learn React.js and ES6

Directory Layout

├── components/                 # Shared or generic UI components
│   ├── Button/                 # Button component
│   ├── Layout/                 # Website layout component
│   ├── Link/                   # Link component to be used instead of <a>
│   └── ...                     # etc.
├── docs/                       # Documentation to the project
├── node_modules/               # 3rd-party libraries and utilities
├── src/                        # Application source code
│   ├── about/                  # About page
│   ├── error/                  # Error page
│   ├── home/                   # Home page
│   ├── history.js              # Handles client-side navigation
│   ├── main.js                 # <== Application entry point <===
│   ├── router.js               # Handles routing and data fetching
│   ├── routes.json             # This list of application routes
│   └── store.js                # Application state manager (Redux)
├── 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
├── tools/                      # Utility and helper classes
└── package.json                # The list of project dependencies and NPM scripts

Getting Started

Step 1. Make sure that you have Node.js v6 or newer and Yarn installed on your development machine.

Step 2. Clone this repository (alternatively, 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
$ yarn install                  # Install project dependencies listed in package.json

Step 3. Compile and launch your app by running:

$ yarn start                    # Compiles the app and opens it in a browser with "live reload"

You can also test your app in release (production) mode by running yarn start -- --release or with HMR and React Hot Loader disabled by running yarn start -- --no-hmr. The app should become available at http://localhost:3000/.

How to Test

The unit tests are powered by chai and mocha.

$ yarn lint                     # Check JavaScript and CSS code for potential issues
$ yarn test                     # Run unit tests. Or, `yarn run test:watch`

How to Deploy

Update publish script in the tools/publish.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:

$ yarn run publish                  # Builds and deployes the app to Firebase

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 to build the project without publishing it, simply run:

$ yarn build                    # Compiles the app into the /public/dist folder

How to Update

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
$ yarn install

Learn React.js and ES6

🎓 React.js Training Program by Tyler McGinnis
🎓 React for Beginners and ES6 Training Course by Wes Bos
📗 React: Up & Running: Building Web Applications by Stoyan Stefanov (Aug, 2016)
📗 Getting Started with React by Doel Sengupta and Manu Singhal (Apr, 2016)
📗 You Don't Know JS: ES6 & Beyond by Kyle Simpson (Dec, 2015)

Related Projects

React Starter Kit — Isomorphic web app boilerplate (Node.js, React, GraphQL, Webpack, CSS Modules)
Node.js API Starter Kit — Boilerplate and tooling for building data APIs with Node.js, GraphQL and Relay
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)
React App SDK — Create React apps with just a single dev dependency and zero configuration
Universal Router — Isomorphic router for web and single-page applications (SPA)
History — HTML5 History API wrapper library that handle navigation in single-page apps

How to Contribute

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.

License

Made with ♥ by Konstantin Tarkus (@koistya) and contributors

forCuriosity / portfolio-styleRich