React Templates & Themes Logo React Templates & Themes
React Ssr Template screenshot

React Ssr Template

Author Avatar Theme by Artem malko
Updated: 11 May 2024
73 Stars

Simple template for a website with a brand new SSR streaming API from React 18

Github Live Preview

Categories

Express Tanstack

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
  1. Install dependencies:
cd react-ssr-template
npm install
  1. Start the development server with file watcher and TypeScript in watch mode:
npm run dev
  1. Build a production version of the application:
npm run prod
  1. Start the built application in production mode:
npm run start-prod
  1. 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.