esmodule-server is a simple, zero-configuration ES module supported HTTP server. It is powerful enough for visiting ES module directly through modern browser. Fully support Typescript and React syntax. Not only that, but also a react container.
- Based on Deno, keep same code style with it.
- Fully support Typescript.
- Fully support React syntax, can visit
jsxortsxby modern browser directly. - A powerful react container, natively support CSR and SSR.
- Production and Dev mode support by parameters(
?dev,?production).
DockerHub: hayond/esmodule-server
# ~/Downloads/static is local static directory, 8888 is local port
docker run -p 8888:8000 -v ~/Downloads/static:/workspaces --restart unless-stopped -d --name esmodule-server hayond/esmodule-server
DenoLand: esmoduleserver
deno run --allow-read --allow-net --allow-write https://deno.land/x/esmoduleserver/mod.js
Write code in currenty directory, and visit http://localhost:8000/ using modern browser.
The one of core feature is natively support react SSR, deno can run same format code with browser, but node can't. If have any good idea for this, merge request welcome or another variation.
create index.html and index.jsx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no, shrink-to-fit=no"
/>
<title>index</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="./index.jsx"></script>
</body>
</html>import React from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
const root = createRoot(document.querySelector("#root"));
root.render(<div>{content}</div>, { content: "Hello World!" });only need create index.jsx
import React from "https://esm.sh/react";
function App({ content }) {
return <div>{content}</div>;
}
export const title = "esmodule-server";
export default function main({ preloadedState }) {
return <App content={"Hello World!"} />;
}implement export function getPreloadedState can open SSR, function getServerReady is useful server check whether data is ready, maximum try three times when return false.
import React from "https://esm.sh/react";
function App({ content }) {
return <div>{content}</div>;
}
export const title = "esmodule-server";
const store = {
content: "Hello World!",
isLoaded: true,
};
export function getPreloadedState() {
return { ...store };
}
export function getServerReady() {
return store.isLoaded;
}
export default function main({ preloadedState = {} }) {
Object.assign(store, preloadedState);
return <App content={store.content} />;
}?devadd dev parameter to all link dependences, check more details: esm.sh, for examplehttp://localhost:8000/example/react-ssr-app/index.html?dev?productionbundle all the local scripts and minify them, in the meantime, add bundle parameter to all link dependences, check more details: esm.sh.
- set production mode as default by command line args.
- custom server port by command line args.
- CDN host support for production mode.
- modulepreload support.
- ROOT importmaps support.
- html customization (scripts, stylesheets, modulepreloads)
- setting.js support, dependencies suppport
- localhost cdn producton build
- es-module-shims support for old browser
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent