React Universally

screenshot of React Universally
express
react

A starter kit for universal react applications.

Overview:

This starter kit is designed to provide all the necessary build tooling and configuration for starting a universal React project. It allows the user to make their own architecture decisions, such as choosing between Redux or MobX. It also includes features like code splitting, server-side rendering, progressive web application support, and long-term browser caching. The kit is bundled with Webpack and supports full ES2017+ syntax.

Features:

  • react as the view: Uses React as the view library for the project.
  • react-router v4 as the router: Implements React Router version 4 for routing functionality.
  • express server: Includes an Express server to handle server-side rendering and serve the application.
  • jest as the test framework: Uses Jest as the test framework for writing unit tests.
  • Combines prettier and Airbnb's ESlint configuration: Provides code formatting on commit using Prettier and Airbnb's ESlint configuration. Ensures code style consistency.
  • Very basic CSS support: Includes basic CSS support, with the option to extend it using CSS Modules.
  • Code splitting: Allows easy definition of code split points in the source code using react-async-component.
  • Server Side Rendering: Enables server-side rendering of the React application.
  • Progressive Web Application ready: Provides support for progressive web applications with offline capabilities using a Service Worker.
  • Long term browser caching of assets: Implements automated cache invalidation for assets with long-term browser caching.
  • All source is bundled using Webpack v3: Uses Webpack version 3 to bundle all the source code.
  • Full ES2017+ support: Supports the latest ECMAScript syntax (ES2017+) across the entire project, avoiding the need for context switching between different syntax versions.
  • Centralised application configuration: Offers centralised application configuration with helper functions to reduce boilerplate code. Supports environment-specific configuration files.
  • Extreme live development: Provides hot reloading of all changes to client and server source code, with automatic server restarts when application configuration changes. Offers a high level of error tolerance and verbose logging to the console.
  • SEO friendly: Allows control of page title, meta information, styles, and scripts from within React components using react-helmet.
  • Optimised Webpack builds: Utilizes HappyPack and auto-generated Vendor DLL to optimize Webpack builds for smooth development experiences.
  • Tree-shaking: Includes tree-shaking functionality using Webpack to eliminate dead code.
  • Security on the express server: Implements security measures on the Express server using helmet and hpp.
  • Asset bundling support: Supports bundling of assets such as images and fonts.
  • Preconfigured to support development and optimised production builds: Configured to support both development and production builds, providing optimal performance in both scenarios.
  • Preconfigured to deploy to now with a single command: Includes configuration to deploy the application to Now.sh using a single command.

Summary:

This starter kit provides a comprehensive set of build tooling and configuration to kickstart a universal React project. It allows the user to make their own architecture decisions and supports features like code splitting, server-side rendering, and progressive web application capabilities. The kit is bundled with Webpack, supports full ES2017+ syntax, and offers a range of optimizations for development and production builds. It also includes features like hot reloading, code formatting, central application configuration, and asset bundling support.

express
Express

Express.js is a simple Node.js framework for single, multi-page, and hybrid web applications.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

webpack
Webpack

Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.