native-esm-react
Native esm React example.
What's shown?
- An example React application rendering two svg logos.
- An http server that:
- serves the above application, providing both the SSR (
http://localhost:3000/
) and client-only (http://localhost:3000/index.html
) approaches.
- 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.
- 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 files in the
static/esm-bridge
folder allow browser ESM imports to use the UMD versions of react
/react-dom
, which are loaded by index.html
.
- Written using strict TypeScript.
Getting Started
License
MIT