Are you happy with your logging solution? Would you help us out by taking a 30-second survey? Click here

react-boilerplate

:fire: A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.

Subscribe to updates I use react-boilerplate


Statistics on react-boilerplate

Number of watchers on Github 17453
Number of open issues 30
Average time to close an issue 2 days
Main language JavaScript
Average time to merge a PR 9 days
Open pull requests 70+
Closed pull requests 54+
Last commit over 1 year ago
Repo Created over 4 years ago
Repo Last Updated over 1 year ago
Size 4.61 MB
Homepage https://www.react...
Organization / Authorreact-boilerplate
Latest Releasev3.5.0
Contributors167
Page Updated
Do you use react-boilerplate? Leave a review!
View open issues (30)
View on github
Fresh, new opensource launches πŸš€πŸš€πŸš€
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating react-boilerplate for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

react boilerplate banner


Start your next react project in seconds
A highly scalable, offline-first foundation with the best DX and a focus on performance and best practices



Created by Max Stoiber and maintained with by an amazing team of developers.

Features

Quick scaffolding
Create components, containers, routes, selectors and sagas - and their tests - right from the CLI!
Instant feedback
Enjoy the best DX (Developer eXperience) and code your app at the speed of thought! Your saved changes to the CSS and JS are reflected instantaneously without refreshing the page. Preserve application state even when you update something in the underlying code!
Predictable state management
Unidirectional data flow allows for change logging and time travel debugging.
Next generation JavaScript
Use template strings, object destructuring, arrow functions, JSX syntax and more, today.
Next generation CSS
Write composable CSS that's co-located with your components for complete modularity. Unique generated class names keep the specificity low while eliminating style clashes. Ship only the styles that are on the page for the best performance.
Industry-standard routing
It's natural to want to add pages (e.g. `/about`) to your application, and routing makes this possible.
Industry-standard i18n internationalization support
Scalable apps need to support multiple languages, easily add and support multiple languages with `react-intl`.
Offline-first
The next frontier in performant web apps: availability without a network connection from the instant your users load the app.
SEO
We support SEO (document head tags management) for search engines that support indexing of JavaScript content. (eg. Google)

But wait... there's more!

  • The best test setup: Automatically guarantee code quality and non-breaking changes. (Seen a react app with 99% test coverage before?)
  • Native web app: Your app's new home? The home screen of your users' phones.
  • The fastest fonts: Say goodbye to vacant text.
  • Stay fast: Profile your app's performance from the comfort of your command line!
  • Catch problems: AppVeyor and TravisCI setups included by default, so your tests get run automatically on Windows and Unix.

Theres also a fantastic video on how to structure your React.js apps with scalability in mind. It provides rationale for the majority of boilerplate's design decisions.

Keywords: React.js, Redux, Hot Reloading, ESNext, Babel, react-router, Offline First, ServiceWorker, styled-components, redux-saga, FontFaceObserver

Quick start

  1. Clone this repo using git clone --depth=1 https://github.com/react-boilerplate/react-boilerplate.git
  2. Move to the appropriate directory: cd react-boilerplate.
  3. Run npm run setup in order to install dependencies and clean the git repo.
    We auto-detect yarn for installing packages by default, if you wish to force npm usage do: USE_YARN=false npm run setup
    At this point you can run npm start to see the example app at http://localhost:3000.
  4. Run npm run clean to delete the example app.

Now you're ready to rumble!

Please note that this boilerplate is production-ready and not meant for beginners! If you're just starting out with react or redux, please refer to https://github.com/petehunt/react-howto instead. If you want a solid, battle-tested base to build your next product upon and have some experience with react, this is the perfect start for you.

Documentation

Supporters

This project would not be possible without the support by these amazing folks. Become a sponsor to get your company in front of thousands of engaged react developers and help us out!


License

This project is licensed under the MIT license, Copyright (c) 2017 Maximilian Stoiber. For more information see LICENSE.md.

react-boilerplate open issues Ask a question     (View All Issues)
  • over 2 years Should route definitions be colocated with their containers?
  • over 2 years styled-components style get overriden
  • over 2 years Using React Boilerplate with Python Django backend
  • over 2 years Pointers on config for web and electron app?
  • over 2 years HRM support (Hot reload) for sagas
  • over 2 years How to manage yarn.lock
  • over 2 years Deploy on Azure
  • over 2 years Remove auto linting during testing
  • over 2 years Live Debug from VSCode
  • over 2 years memoryHistory not found in 'react-router' (when linting)
  • over 2 years Testing selectors in saga's select() calls
  • over 2 years Question: Do we chunk JS files properly ?
  • over 2 years Should I write a cloud66 deployment guide?
  • over 2 years Problem adding moment locales to a clean 3.4.0
  • over 2 years Tutorial For Debugging in WebStorm May Lead to Confusion
  • over 2 years state in reducer in some containers didnt update directly when dispatch action
  • over 2 years Yet another global- or App-level saga discussion :-/
  • over 2 years Issue with progressBar, corrupted state
  • over 2 years [ROUTING] Move routes to containers for single responsibility
  • over 2 years Adding theme higher-order component or as props from app -> routes
  • over 2 years Help in debugging react-boilerplate code
  • over 2 years Redux Form state error
  • over 2 years How to generate sitemap?
react-boilerplate open pull requests (View All Pulls)
  • Update FAQ with Styles getting overridden
  • Using `combineReducers` to define shape of the state
  • Update introduction.md
  • Improve debugging
  • Separated dev and prod middlewares
  • (fix) ProgressBar state error
  • Fix #1518: Move root route configuration to routes.js, add documentation for creating a global saga
  • Docs: Add JS guidelines doc with first few rules explained
  • Generetor warnings (#1462)
  • Clarify that Homepage is a container
  • Add Stateless Functions to Container Generator
  • Alternative saga lifecycle
  • Update templates and generators
  • Update docs with note about Immutable state testing.
  • Fix(translation) default locale file not updated
  • remove duplicated configuration code
  • Server side rendering
  • Switch out hmre preset for react-hot-loader v3.
  • Display QRCode for ngrok url
  • Add withMutations to ImmutableJS docs
  • ISSUE-1119 use mount for full rendering for checking React DOM in enzyme test
  • Redux-saga login flow with auth0-lock
  • Demo GraphQL Relay client
  • Don't error out if the substate does not exist
  • Split server into frontend and backend
  • Dockerize
  • Remove state update in componentWillUpdate
  • use single quotes
  • Allow app behaviour in iOS devices
  • Link to Redux was not working
  • Add propper VS Code setup to faq.md
  • Migrate to react router v4.
  • Switching deprecated babel-preset-latest to babel-preset-env
  • Add a memoized getComponent wrapper so that components do not get reloaded
  • Add visualizer info
  • Improve the setup to recognize our own repo before clearing it.
  • Updating quickstart file location
  • Add prepush git hook
  • Add Debugging section in Docs + VS Code instructions
  • Rename store.js to configureStore.js to prevent conflict
  • Only match files when searching .js during extract-intl.
  • missing word in docs > general > introduction
  • Improve self destructive commands
  • Removed Heroku specific notice
  • Move onSubmitForm into mapDispatchToProps context
  • feat(core) add react performance profiling by default
  • syntatical improvements to progress bar
  • add environment variables to webpack
  • Replace Redux Saga with Redux observable
  • Feature/add styles constant
  • updated documentation with more details and missing steps for removing redux saga
  • Probably Spelling Mistake?
  • Update commands.md
  • Revert "Using `combineReducers` to define shape of the state"
  • Allow for an optionally namespaced reducer
  • Make it work with hyperclick
  • feat(internals): Add prettier integration
  • Remove react-intl default span tags.
  • feat(webpack): Support open browser automatically in the developmen…
  • Add basic jsconfig.json
  • fix(sagaInjectors) Prevent sagas to be injected multiple times
  • Immutable the right way
  • Automatically generate i18n key of file base prefix by babel plugin
  • Change line ending setting for hbs template files with text eol=lf
  • Adding Dockerfile to help with cloud deployments.
  • [Fix] Bad bundle filename generated on Windows
  • Upgrade react
  • Remove unnecessary onRejected function
  • Test matrix update
  • Upgrade dependencies
react-boilerplate questions on Stackoverflow (View All Questions)
  • Where would I add existing JS Code to react-boilerplate
  • JS minify in react-boilerplate build pipeline
  • substate.get() is not a function using React Boilerplate
  • Active Anchor Tag in React-Boilerplate
  • electron-react-boilerplate - Route change and state
  • Missing files when deploying react-boilerplate project to IIS
  • React boilerplate crashes on Heroku
  • How to get semantic/gulp/webpack to work in electron-react-boilerplate
  • electron-react-boilerplate calling electron api
  • Implementing user role authorization in react-boilerplate
  • Differences in flexbox CSS in React-boilerplate in dev and prod builds (Safari <9)
  • fetch wrapped in request.js in react boilerplate: how to handle error from json body for Spring backend
  • Using react-icons package with react-boilerplate
  • react-boilerplate+grommet, making sass work with webpack
  • Get React Intellisense on this react-boilerplate in Visual Studio Code
  • Syntax error in react-boilerplate after adding new dependencies
  • setup.js is deleted in react-boilerplate when running npm run setup
  • React-boilerplate + react-toolbox: Cannot resolve 'file' or 'directory' ./style
  • How to create maps in react-boilerplate stater kit?
  • How do I fix `npm install` errors with react-boilerplate?
  • Should I nest containers using react-boilerplate
  • Isomorphic redux react boilerplate
  • How to use local fonts in react-boilerplate?
  • Set basename on react-boilerplate
  • Install react-toolbox in React Boilerplate causing dependency error
  • Flux TodoMVC: what for do they offer to install and run "react-boilerplate"?
  • react-boilerplate npm install error
  • react boilerplate / generator with gulp, browserify, babel, etc?
  • React TodoMVC turorial react-boilerplate cant get to running
react-boilerplate list of languages used
react-boilerplate latest release notes
v3.5.0 v3.5.0

The eagle has landed

As always, thank you to all of our awesome contributors, community and team members!!

News

So, a few things have changed in the JS ecosystem since the original release of React Boilerplate, and there was a discussion in #1776 around the it's future. TLDR; we had two incompatible PRs one for server-side rendering, and another for react-router v4. The community decided that we would keep our dependencies up to date (upgrade react-router) and establish a clear mission for React Boilerplate:

React Boilerplate is a rock-solid foundation for crafting large, high-performance enterprise-grade frontend web applications that have advanced/custom requirements.

  • Static output designed for CDN and edge caches
  • Extreme Developer Ergonomics
    • Parallelized Tests
    • DLL manifest in development for blazing rebuilds
    • Scaffolding tools
  • Pre-baked i18n support
  • Low level tooling that gives developer complete control

We may include SSR in a future version, but for now this is our focus... create-react-app and next.js are doing an awesome job and strongly recommend these projects for most use cases.

Breaking

  • Upgrade React Router to v4.x.x (@anuraaga, @Dattaya, et al)
    • Use React-Loadable for data lifecycle management
    • Refactor asyncInjectors: improve code splitting/saga management
    • For a complete overview of changes, please see #1746

Main

  • Upgrade React to v15.6 (@g0ddish)
  • Upgrade Webpack and related dependencies to v3.x.x (@KarandikarMihir)
  • Upgrade styled-components to v2.x.x (@justingreenberg)
  • Replace babel-preset-hmre with vanilla Webpack HMR (@Dattaya)
  • Serve Dlls via add-asset-html-webpack-plugin (@skidding)
  • Migrate from React.PropTypes to prop-types (@dennybiasiolli)

Other Updates

  • Add Stateless Functions to Container generator (@outdooricon)
  • Change development sourcemap style (@samit4me)
  • Create new documentation for dependency updates (@gihrig)
  • Downgrade sanitize.css (@Dattaya)
  • Enable rule react/no-array-index-key (@carloscuatin)
  • Fix Intl polyfill in language generator (@tmf)
  • Handle 204 and 205 HTTP response (@williamdclt)
  • Icon updates and improvements (@samit4me)
  • Import only necessary components for RRv4 (@sorin-davidoi)
  • Improve <List> component tests (@chaintng)
  • Improve component tests in demo (@dennybiasiolli)
  • Improve setup to recognize repo before clearing git (@Aftabnack)
  • Make build output less verbose (@KarandikarMihir)
  • Move onSubmitForm test into mapDispatchToProps test (@tomasfrancisco)
  • NPM script and dependency updates, many fixes (@gihrig)
  • Remove state update in componentWillUpdate (@mawi12345)
  • Remove unused Sinon dependency (@avdeev)
  • Remove route names from app/routes (@beardedtim)
  • Rename store.js to configureStore.js to prevent conflict (@howardya)
  • Separate dev and prod middleware (@tomazy)
  • Sort ESLint config in package.json (@bt)
  • Support OpenType fonts with .otf file extension (@kachkaev)
  • Turn App into a functional component (@Dattaya)
  • Update FAQ for styles getting overridden (@samit4me)
  • Update the 'tagged template literals' link (@joncass)
  • Use camelcase for reducer and saga key to match selector (@anuraaga)
  • Use correct selector names in tests (@Dattaya)
  • Use local instance of shelljs (@KarandikarMihir)
  • Use optimized version of the RBP banner (@tomazy)
  • Use relative path for manifest.json (@mrharel)

Many fixes to documentation thanks to @Aftabnack, @auchenberg, @danielrob, @gregoralbrecht, @JonathanMerklin, @marciopuga, @NicholasAnthony, @Skaronator, and @vedatmahir

v3.4.0 v3.4.0

An amazing release full of new goodies, just for you! Let's dive right into it...

News

Welcome @KarandikarMihir to the team! Karandikar has been all over the repo, providing fixes and features. Happy to have him on board to make react-boilerplate even better!

Special thanks as always to @gihrig for diligently testing everything and keeping our dependencies up to date!

Also, huge props to @samit4me and @Dattaya for being everywhere and fixing so many issues and of course to @KarandikarMihir for all his hard work.

If you want to help us make react-boilerplate great, please use the dev branch, test all the things and report all the bugs!

Changelog

Main

  • Switch to Jest for testing, massive thanks to @dmitriiabramov
  • Update to webpack 2 RC (includes switching from System.import to import()), thanks to @Dattaya
  • Add progress bar while loading code splitted routes, thanks to @KarandikarMihir
  • Add the "Hitchhikers Guide to react-boilerplate to the docs, massive thanks to @KarandikarMihir
  • Update all dependencies, as always huge thanks to @gihrig, our master of dependencies
  • Enable import/first eslint rule and rewrite all imports, huge thanks to @KarandikarMihir
  • Add Node v7 support and deprecate v4 support, thanks to @samit4me @MariusRumpf
  • Prevent i18n language duplication, thanks to @harijoe
  • Add the webpack circular dependency plugin to avoid hard to debug errors, thanks to @haikyuu
  • Refactor all selectors and generators with new naming convention, thanks to @Dattaya
  • Update generator templates, thanks to @Virsaviya @jeremyadavis
  • Add support for the --host parameter when running npm start, thanks to @ifedotov
  • Showcase reselects createStructuredSelector in the example, thanks to @Dattaya
  • Exclude test files from coverage report, thanks to @samit4me
  • Lint the templates for the generators, thanks to @Dattaya
  • Huge improvement to DX testing a freshly cleaned project, thanks to @outdooricon

Other Updates

  • Remove the webpack DedupePlugin as it leads to errors in production and is now included by default, thanks to @samit4me
  • Remove the npm run pagespeed command and all related dependencies and files, thanks to @mkhazov
  • Trigger a full page reload when HMR fails, thanks @kachkaev
  • Don't import all of lodash, thanks to @jwinn
  • Improve .editconfig, thanks to @avdeev
  • Improve the example components, thanks to @tomazy
  • Fix npm run clean not working as expected, thanks to @adjnor
  • Fix the i18n button not updating with new state, thanks to @adjnor
  • Fix console error when changing language, thanks to @samit4me
  • Fix default polyfill language, thanks to @web2style
  • Fix language generation, thanks to @chaintng
  • Switch to new webpack query syntax, thanks to @shrynx
  • Add an Introductory document to help people get started, thanks to @KarandikarMihir
  • Add security configuration recommendations for Nginx (.nginx.conf), thanks to @supergicko
  • Add and fix lots to stuff in the documentation, thanks to @pavlin-policar, @samit4me @outdooricon @PierrickGT @nndung179 @outdooricon @kelsonic @jimmyheaddon
  • A wide variety of small fixes, thanks to @Dattaya @gihrig @outdooricon

Supporters

This release was made possible by Fullstack React and Serverless! Want to support us too? Click here!

v3.3.3 v3.3.3

Changelog

  • Fixed npm run generate, thanks to @chaintng! (see #1199)
Other projects in JavaScript