React Isomorphic Starter Kit

Live example on GitHub Pages (static site generation) and Cloudflare Pages (edge-side rendering)

This is an experimental starter kit for a React universal/isomorphic app.

Features

1. React Router
2. CSS Modules + PostCSS + PurgeCSS + StyleLint
3. TypeScript + ESLint
4. Jest/React Testing Library for unit testing
5. Playwright for E2E testing
6. webpack
7. Docker config
8. nodemon + Hot module replacement (in development)
9. Custom i18n solution using sprintf-js
10. Building for Express with server-side rendering
11. Building for Cloudflare Pages with edge-side rending
12. Building for a static app with prerendering (example on GitHub Pages)
13. Data prefetching and caching
14. Web workers
15. CI/CD workflows with GitHub Actions
16. Code quality analysis with SonarQube

Usage

# Install dependencies
$ npm install

# Run in development (client only)
$ npm run dev:static

# Run unit tests
$ npm run test:unit

In any of the build or build:* scripts, you can add the following arguments for additional diagnosis details of the build process:

# Analyzes the size the generated bundle(s) and displays a visual report in the default browser
$ npm run build:server --analyze

# Omits HTML/CSS/JS compressions during build
$ npm run build:server --raw

See scripts in package.json for additional commands.

Building as Express app

This is the default behavior, simply run:

$ npm run build

You can then test it locally:

$ npm start

Exporting as Edge-Rendered Site

To build for Edge, run:

$ npm run build:edge

You can then test it on Cloudflare:

$ npm run start:edge

Exporting as Static Site

To export this app as a static site, run:

$ npm run build:static

This removes all server components from the built server app and generates static HTML files for all pages outlined in the /sitemap.xml endpoint.

To test, run:

$ npm run start:static

Testing

Unit tests reside in /src and can be ran via:

$ npm run test:unit

End-to-end tests are executed directly from the tests/ directory in TypeScript and requires the app to have already been built (i.e. build/ directory is not empty):

$ npm test

Docker

Building a containerized version of the app using the included Dockerfile:

# Build the image
$ npm run ship:build

# Run the image
$ npm run ship:run

Using as Repository Template

When using react-isomorphic-starter-kit as a template, follow these steps to strip placeholder content:

1. Replace LICENSE file
2. Edit README.md
3. Edit fields in package.json
4. Edit fields in src/app.conf.ts
5. Edit resources in res/, then ensure to replace the generated assets in src/static/
6. Edit files in src/ui/
7. Edit translations in src/locales/

Breaking Changes

v10.0.0

• Removed styled-components in favor of CSS modules
• Removed Redux in favor of Context API
• Updated how assets are imported
• Relocated locales directory
• Created reusable workflows for CI/CD
• Added interactors
• Added I18nProvider

v12.0.0

• Decoupled boilerplate architectural code to src/base

v13.0.0

• Restructured folders

v14.0.0

• Moved boilerplate code to lib/
• Replaced react-helmet-async with custom solution in lib/