Code Monkey home page Code Monkey logo

react-universally's Introduction

PUBLIC ANNOUNCEMENT ๐Ÿ˜€

v13 is going to land fairly soonish via the next branch. It includes a significant amount of updates and restructuring that would make a merged upgrade from v12 painful. If you want to stay up to date with the project you may want to consider using the next branch directly rather than master. The last big outstanding issue for v13 is issue #359.


React, Universally

A starter kit giving you the minimum requirements for a modern universal React application.

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).

Features

  • ๐Ÿ‘€ react as the view.
  • ๐Ÿ”€ react-router v4 as the router.
  • ๐Ÿš„ express server.
  • ๐ŸŽญ jest as the test framework.
  • ๐Ÿ–Œ 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 code-split-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 v2.
  • ๐Ÿš€ Full ES2017+ support - use the exact same JS syntax across the entire project (src/tools/config). 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.
  • ๐Ÿ”ฅ 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.
  • ๐Ÿ‘ผ Airbnb's ESlint configuration.
  • โค๏ธ 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
yarn
yarn run development

Or, if you aren't using yarn:

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

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

Docs

react-universally's People

Contributors

ctrlplusb avatar greenkeeperio-bot avatar kohlmannj avatar codepunkt avatar elodszopos avatar tsnieman avatar alinporumb avatar andreyluiz avatar aoc avatar lorbuschris avatar diondirza avatar evgenyboxer avatar markyfyi avatar rlindskog avatar threehams avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.