Skip to content

Instantly share code, notes, and snippets.

@epequeno

epequeno/Blue.elm

Last active April 6, 2023 21:02
Show Gist options
  • Save epequeno/2d12d021bd865582b0fcb1509373ba25 to your computer and use it in GitHub Desktop.
Save epequeno/2d12d021bd865582b0fcb1509373ba25 to your computer and use it in GitHub Desktop.
Download ZIP
example of multiple elm apps on a single page
Raw
Blue.elm
-- Elm 0.19.0
module Blue exposing (main)
import Html exposing (..)
main =
div [] [ text "Hello from Blue!" ]
Raw
index.html
<!doctype html>
<html class="no-js" lang="en-US">
<head>
<title>Multiple Elm App Demo</title>
<script src="main.js"></script>
</head>
<body>
<div id="red"></div>
<p>Hello world! This is HTML5 Boilerplate.</p>
<div id="blue"></div>
<script>
var red = Elm.Red.init({
node: document.getElementById('red')
});
var blue = Elm.Blue.init({
node: document.getElementById('blue')
});
</script>
</body>
</html>
Raw
other.txt
$ elm make src/Red.elm src/Blue.elm --output main.js
$ tree
.
├── elm.json
├── index.html
├── main.js
└── src
├── Blue.elm
└── Red.elm
Raw
Red.elm
-- Elm 0.19.0
module Red exposing (main)
import Html exposing (..)
main =
div [] [ text "Hello from Red!" ]
@vladbatushkov
Copy link

Hi, Steven. Did you try this kind of "microservices front-end" approach on a big scale? I think it could be interesting next step to try Elm MicroApps talk to each other via Ports.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment