https://github.com/avivahl/native-esm-react

native esm react example
https://github.com/avivahl/native-esm-react

Last synced: 3 months ago
JSON representation

native esm react example

• Host: GitHub
• URL: https://github.com/avivahl/native-esm-react
• Owner: AviVahl
• License: mit
• Created: 2021-11-05T12:45:43.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2025-04-09T14:58:24.000Z (3 months ago)
• Last Synced: 2025-04-09T15:49:25.742Z (3 months ago)
• Language: TypeScript
• Size: 532 KB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# native-esm-react

Native esm React example.

## What's shown?

- An example [React](https://github.com/facebook/react) application rendering two svg logos.

- An http server that:

  - serves the above application using SSR at `http://localhost:3000/`

  - uses a worker thread to separate app evaluation/rendering from http server.

  - supports live reloading of the SSR renderer and connected clients.

  - is not production-ready, as there's no caching, compression, etc.

- Both application and server are compiled into a **single** ESM output that works natively in Node.js _AND_ browsers that [support import maps](https://caniuse.com/import-maps).

- Source maps work in Node and browsers. Nicer debugging experience compared to CommonJS, as imported symbol names are kept the same.

- Asset references using `new URL('./asset.svg, import.meta.url)` are shown and work for SSR as well. Assets must live outside the `src` tree so relative references from `dist` work.

- A _really_ cool `"start"` script that triggers server reloading while giving a `tsc -w` like experience.

- Tiny amount of dev/runtime dependencies. `npm i` and look at `node_modules`.

- React itself is _not_ published as native ESM, so the application uses https://esm.sh to load client-side React.

- Written using strict TypeScript.

## Getting Started

- Clone repository.

- `npm i`

- `npm start`

- Open `http://localhost:3000/` in a browser [compatible with import maps](https://caniuse.com/import-maps).

## License

MIT