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.

Installation:

To set up the starter kit, follow these steps:

1. Clone the repository:

git clone [repository url]

2. Install dependencies:

npm install

3. Start the development server:

npm start

4. Make changes to the Home component to see the tooling in action.

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.