Overview

This is a React application template that uses Streaming Server Side Rendering (SSR) and React 18 with a new API. It is available on GitHub at https://github.com/reactwg/react-18/discussions. The template is a simple website and provides a development server, file watcher, TypeScript support, production build, testing capabilities, and various technologies such as Express.js, React, React-query, CSS-in-JS, and more. The template also includes a custom router for Redux integration.

Features

• Supports Streaming Server Side Rendering (SSR)
• Uses React 18 with a new API
• Development server with file watcher
• Production build command
• Testing command for eslint, prettier, tsc, and unit-tests
• Written in TypeScript
• Utilizes Express.js as a server framework
• Uses React’s render to a stream for SSR
• Integrates React-query for working with external data
• Provides a custom CSS-in-JS implementation inspired by aphrodite
• Includes a custom router for Redux integration
• Uses webpack and esbuild to build the project
• Employs pino as a fast and lightweight logger
• Includes mocha, chai, sinon, and React testing library for testing
• Utilizes eslint for code mistake detection
• Implements prettier for code formatting

Installation

To install and use this template, follow these steps:

1. Clone the repository:

git clone https://github.com/artem-malko/react-ssr-template.git

2. Install dependencies:

cd react-ssr-template
npm install

3. Start the development server with file watcher and TypeScript in watch mode:

npm run dev

4. Build a production version of the application:

npm run prod

5. Start the built application in production mode:

npm run start-prod

6. Run tests including eslint, prettier, tsc, and unit-tests:

npm run test

Summary

The React SSR template provides a basis for creating a website using server-side rendering and React 18 with a new API. It includes various features such as a development server, production build, testing capabilities, and integrated technologies like Express.js, React-query, and CSS-in-JS. The template also offers a custom router for Redux integration and uses webpack and esbuild for building the project. Additionally, it employs pino as a logger and includes eslint and prettier for code quality. Overall, the template offers a comprehensive starting point for a React SSR application.