Example of an Elm app integration into a Fastify server written in TypeScript.
It demonstrates how to:
- Instantiate a headless Elm app using
Platform.worker
to be used in any context - Communicate with an Elm app using flags, incoming ports and outcoming ports
- Properly type an Elm app from TypeScript's perspective
The build is divided in two steps, first Elm build then TypeScript build that imports the Elm build:
import { Elm } from "./elm.js"; // not found? run `npm run build:elm`
➡️ See branch
bundler-alternative
(#1)
for a single-step build alternative, leveraging a bundler (esbuild
) to allow
direct imports from Elm source files:
import { Elm } from "./Main.elm";
Elm's ports
system is event-oriented and does not allow to just call
a function and expect a return value:
elmApp.ports.pingReceiver.send(null); // void
However it can be worked around using with a simple encapsulation.
➡️ See branch
as-function
(#2)
for a working example:
server.get("/ping", async () => ({ pong: pingElm() }));
npm i
npm run build:elm # Generate elm.js file that is imported from app.ts
npm run start