A progressive static-site generator for React.
Read the introduction article on Medium
React-Static is a fast, lightweight, and powerful framework for building static-progressive React applications and websites. It's been carefully designed to meet the highest standards of SEO, site performance, and user/developer experience.
- ⚛️ 100% React (or Preact!)
- 🚀 Blazing fast builds and performance.
- 🚚 Data Agnostic. Supply your site with data from anywhere, however you want.
- ✂️ Automatic code and data splitting for routes!
- 💥 Instant page views via PRPL pattern.
- 🎯 Built for SEO.
- 🥇 React-first developer experience.
- 😌 Painless project setup & migration.
- 💯 Supports 100% of the React ecosystem. Including CSS-in-JS libraries, custom Query layers like GraphQL, and even Redux.
- 🔥 Hot Reloadable out-of-the-box. Edit React components & styles in real-time.
- 📲 LAN accessible dev environment for testing on other devices like phones and tablets.
- Quick Start with Styled Components (20 min)
- Introducing React-Static! How it works and why we built it! (80 min)
- Using React-Static to replace create-react-app (5 min)
- React-Static.js.org (source)
- React-Charts.js.org (source)
- Nozzle.io (source)
- Timber.io
- HeadlessCMS.org (source)
- Manta.life (source)
- Manticore Games
- BlackSandSolutions.co
- David York - Personal Blog
- Cryptagon - Crypto Portfolio Tracker
- Typetalk - Chat App for Businesses and Teams
- Lam Hieu - Personal Website
- Elsa Salonen - Artist Portfolio
- PSD Wizard: On-demand Front-End Coding Service
- NYC Vintage Map
- Eldar Labs - Utilities and Productivity Tools
- Dan Webb - Personal Website (source)
- Intuit Turbo
- Messenger Corp. client asset ordering
- Digital Neighborhood watch service
- Carmen Marcos Art - Artist Portfolio (source)
- BlockAce - Blockchain Jobs Board
- Luke Haas - Personal Website
- KleineKoning.nl - Webshop
- blue-frontend.com - Company Website
- Install the CLI:
$ yarn global add react-static
# or
$ npm install -g react-static- Create a new project:
$ react-static create- Pick a template! See the full list of templates
- Navigate to your new project:
$ cd my-static-site- Start the dev server and edit some code!
$ yarn start # or react-static start- Test a production build
$ yarn stage # or react-static build --staging
$ yarn serve- Build for production!
$ yarn build # or react-static buildOnce you've installed and test driven sufficiently, you may want to:
- CSS & Style Tooling
- react-static-plugin-emotion - Adds SSR support for Emotion components.
- react-static-plugin-styled-components - Adds SSR support for Styled-Components
- react-static-plugin-sass - Adds SSR and general support for SASS
- React Alternatives
- react-static-plugin-preact - Adds preact support
All of the following examples can be used as a template at project creation.
- Basic
- Blank (Create-React-App)
- Preact
- Animated Routes
- Custom Routing
- Dynamic Imports (code-splitting)
- Emotion
- Styled-Components
- LESS & Antdesign
- Firebase Auth
- Redux
- Apollo GraphQL
- Apollo & Redux
- TypeScript
- Cordova (Hybrid App)
- Basic Prismic (Headless CMS)
- GraphCMS
- Sass
- Tailwind CSS
- Algolia
- Styled-JSX
- Netlify CMS
- Gentics Mesh CMS
- Markdown
- Documentation
Can't find an example? We invite you to write one! Simply copy the basic or blank templates and make the necessary changes. Then submit a PR including your new example directory and a new item in the list above. When merged, your example will automatically become a template in the CLI. How magical!
Need some help? Have a quick question? Click here to sign up for the React-Tools spectrum community! We are constantly answering questions, discussing features and helping each other out!
We are always looking for people to help us grow react-static's capabilities and examples. If you have an issue, feature request, or pull request, let us know!
React Static uses the MIT license. For more information on this license, click here.