/react-universally

A starter kit for universal react applications.

Primary LanguageJavaScriptMIT LicenseMIT

React, Universally

A starter kit for universal react applications.

All Contributors

About

This starter kit contains all the build tooling and configuration you need to kick off your next universal React project, whilst containing a minimal "project" set up allowing you to make your own architecture decisions (Redux/MobX etc).

NOTICE: Please read this important issue about the behaviour of this project when using react-async-component, which is by default bundled with it.

Features

  • ๐Ÿ‘€ react as the view.
  • ๐Ÿ”€ react-router v4 as the router.
  • ๐Ÿš„ express server.
  • ๐ŸŽญ jest as the test framework.
  • ๐Ÿ’„ Combines prettier and Airbnb's ESlint configuration - performing code formatting on commit. Stop worrying about code style consistency.
  • ๐Ÿ–Œ Very basic CSS support - it's up to you to extend it with CSS Modules etc.
  • โœ‚๏ธ Code splitting - easily define code split points in your source using react-async-component.
  • ๐ŸŒ Server Side Rendering.
  • ๐Ÿ˜Ž Progressive Web Application ready, with offline support, via a Service Worker.
  • ๐Ÿ˜ Long term browser caching of assets with automated cache invalidation.
  • ๐Ÿ“ฆ All source is bundled using Webpack v3.
  • ๐Ÿš€ Full ES2017+ support - use the exact same JS syntax across the entire project. No more folder context switching! We also only use syntax that is stage-3 or later in the TC39 process.
  • ๐Ÿ”ง Centralised application configuration with helpers to avoid boilerplate in your code. Also has support for environment specific configuration files.
  • ๐Ÿ”ฅ Extreme live development - hot reloading of ALL changes to client/server source, with auto development server restarts when your application configuration changes. All this with a high level of error tolerance and verbose logging to the console.
  • โ›‘ SEO friendly - react-helmet provides control of the page title/meta/styles/scripts from within your components.
  • ๐Ÿค– Optimised Webpack builds via HappyPack and an auto generated Vendor DLL for smooth development experiences.
  • ๐Ÿƒ Tree-shaking, courtesy of Webpack.
  • ๐Ÿ‘ฎ Security on the express server using helmet and hpp.
  • ๐Ÿœ Asset bundling support. e.g. images/fonts.
  • ๐ŸŽ› Preconfigured to support development and optimised production builds.
  • โค๏ธ Preconfigured to deploy to now with a single command.

Redux/MobX, data persistence, modern styling frameworks and all the other bells and whistles have been explicitly excluded from this starter kit. It's up to you to decide what technologies you would like to add to your own implementation based upon your own needs.

However, we now include a set of "feature branches", each implementing a technology on top of the clean master branch. This provides you with an example on how to integrate said technologies, or use the branches to merge in a configuration that meets your requirements. See the Feature Branches documentation for more.

Getting started

git clone https://github.com/ctrlplusb/react-universally my-project
cd my-project
npm install
npm run develop

Now go make some changes to the Home component to see the tooling in action.

Docs

Who's using it and where?

You can see who is using it and how in the comments here. Feel free to add to that telling us how you are using it, we'd love to hear from you.

Contributors

Thanks goes to these wonderful people (emoji key):


Andrรฉs Calabrese

๐Ÿ’ป

Andrey Luiz

๐Ÿ’ป

Alin Porumb

๐Ÿ’ป

Benjamin Kniffler

๐Ÿ’ป

Birkir Rafn Guรฐjรณnsson

๐Ÿ’ฌ ๐Ÿ› ๐Ÿ’ป ๐Ÿ‘€

Carson Perrotti

๐Ÿ’ฌ ๐Ÿ’ป ๐Ÿ“– ๐Ÿ‘€

Christian Glombek

๐Ÿ› ๐Ÿ’ป

Christoph Werner

๐Ÿ’ฌ ๐Ÿ› ๐Ÿ’ป ๐Ÿ‘€

David Edmondson

๐Ÿ’ป

Dion Dirza

๐Ÿ’ฌ ๐Ÿ› ๐Ÿ’ป ๐Ÿ“– ๐Ÿ‘€

Evgeny Boxer

๐Ÿ› ๐Ÿ’ป

Joe Kohlmann

๐Ÿ› ๐Ÿ’ป

Lucian Lature

๐Ÿ› ๐Ÿ’ป ๐Ÿ‘€

Mark Shlick

๐Ÿ’ป

Ryan Lindskog

๐Ÿ’ป

Steven Enten

๐Ÿ’ฌ ๐Ÿ› ๐Ÿ’ป ๐Ÿ‘€

Sean Matheson

๐Ÿ’ฌ ๐Ÿ› ๐Ÿ’ป ๐Ÿ“– ๐Ÿ’ก ๐Ÿ‘€ โš ๏ธ ๐Ÿ”ง

Steven Truesdell

๐Ÿ’ฌ ๐Ÿ› ๐Ÿ’ป ๐Ÿ“– โš ๏ธ

Thomas Leitgeb

๐Ÿ› ๐Ÿ’ป

Tyler Nieman

๐Ÿ’ป

This project follows the all-contributors specification. Contributions of any kind welcome!