adamjaffeback / react-static-boilerplate

Boilerplate and tooling for building singe-page web apps (SPA) and static sites with React (ReactJS) and Relay Modern

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, Relay Modern, Babel, Webpack, React Hot Loader, and more.

View online demo  |  Follow us on Gitter, Twitter, or ProductHunt  |  Learn React.js and ES6  |  Visit our sponsors:

---

This project was bootstraped with React Static Boilerplate by Kriasoft (support).

Tech Stack

• Create React App for development and test infrastructure (see user guide)
• React + Relay Modern for UI and declarative data fetching
• Styled Components for component friendly CSS styles (docs)
• Universal Router + history for declarative routing and client-side navigation

Directory Layout

├── node_modules/                  # 3rd-party libraries and utilities
├── public/                        # Static files such as favicon.ico etc.
│   ├── favicon.ico                # Application icon to be displayed in bookmarks
│   ├── index.html                 # HTML template
│   ├── robots.txt                 # Instructions for search engine crawlers
│   ├── manifest.json              # Application meta data
│   └── ...                        # etc.
├── src/                           # Application source code
│   ├── About/                     # About page
│   ├── App/                       # Application shell (layout) component
│   ├── Button/                    # Button component
│   ├── ErrorPage/                 # Error page
│   ├── Home/                      # Home page
│   ├── Link/                      # Link component to be used instead of <a>
│   ├── history.js                 # Client-side navigation manager
│   ├── index.js                   # <== Application entry point (main) <===
│   ├── registerServiceWokrer.json # This list of application routes
│   ├── relay.js                   # Relay Modern client
│   ├── router.js                  # Application routes
│   ├── graphql.schema             # GraphQL schema obtained from a GraphQL API
│   └── store.js                   # Application state manager (Redux)
├── test/                          # Unit and integration tests
├── package.json                   # The list of project dependencies + NPM scripts
└── setup.js                       # Customizations for create-react-app

Prerequisites

• Node.js v8.2.1 or higher + Yarn v0.27.5 or higher   (HINT: On Mac install them via Brew)
• Watchman v4.7.0 or higher, required by the Relay Compiler
• VS Code editor (preferred) + Project Snippets, EditorConfig, ESLint, Flow, Prettier, and Babel JavaScript plug-ins

Getting Started

Just clone the repo and start hacking:

$ git clone https://github.com/kriasoft/react-static-boilerplate.git MyApp
$ cd MyApp
$ yarn install                     # Install project dependencies listed in package.json
$ yarn relay                       # Pre-compile GraphQL queries with Relay Compiler
$ yarn start                       # Compiles the app and opens it in a browser with "live reload"

The app should become available at http://localhost:3000/.

How to Test

$ yarn lint                        # Check JavaScript and CSS code for potential issues
$ yarn fix                         # Attempt to automatically fix ESLint warnings
$ yarn test                        # Run unit tests. Or, `yarn test -- --watch`

How to Deploy

$ yarn build -- --prerender       # Build the app for production and pre-render .html pages
$ npx gh-pages -d ./build         # Push the contents of the ./build folder to GitHub Pages

How to Update

If you keep the original Git history after cloning this repo, you can always fetch and merge the recent updates back into your project by running:

git remote add react-static-boilerplate https://github.com/kriasoft/react-static-boilerplate.git
git checkout master
git fetch react-static-boilerplate
git merge react-static-boilerplate/master
yarn install
yarn relay

NOTE: Try to merge as soon as the new changes land on the master branch in React Static Boilerplate repository, otherwise your project may diverse too much from the base/upstream repo.

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.

Learn React.js and ES6

🎓   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 — Boilerplate and tooling for building isomorphic web apps with React and Relay
• Node.js API Starter Kit — Boilerplate and tooling for building data APIs with Docker, Node.js and GraphQL

License

Copyright © 2015-present Kriasoft. This source code is licensed under the MIT license found in the LICENSE.txt file.

---

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