ts-esbuild-react

A React starter project template, powered by esbuild's Typescript support, with hot-reloading dev server.

Quickstart
- Develop
- Test
- Deploy
About
- Commands
- Motivations
Further Reading

Quickstart

Develop

Install required dependencies (React, esbuild, typescript, etc...)

yarn

Start esbuild's local development server with hot-reloading and typescript support:

yarn start

Open http://localhost:3000 in your browser.

Edit src/App.tsx - the page in the browser will refresh when you save any changes to your source files in your IDE.

Test

yarn test

Deploy

To create a built application for deployment:

yarn build

Optionally, preview the built application before deploying:

yarn serve -s build

About

This repository is a simple demonstration of the create-react-app --template typescript boilerplate code, powered by esbuild.

The usual react-scripts's Webpack implementation has been replaced with a similar set of functionality using esbuild, using ideas from the articles referenced below, along with the standard react/esbuild/typescript official docs.

Commands

{
    "start": "tsx ./scripts/start.ts",
    "test": "tsx ./scripts/test.ts",
    "build": "tsx ./scripts/build.ts",
    "type-check": "tsc --noEmit",
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    "format": "prettier --check ./**/*.{js,jsx,ts,tsx,css,md,json} --config ./prettier.config.mjs",
    "format:fix": "prettier --write ./**/*.{js,jsx,ts,tsx,css,md,json} --config ./prettier.config.mjs"
}

Motivations

Just something I needed to investigate in isolation, to be used as a guideline for other projects, elsewhere.

Feel free to express some interest, as this might well encourage me to put more time on this.

Or, take inspiration from it for your own projects.

nathanjhood / ts-esbuild-react

readme