Building Microfrontends Bonus Part - Rewriting an app with Elm
Check their guide if you want to installed and learn about the language.
We are going to rewrite Cart to use Elm, but this isn't really a tutorial about Elm, there are already a lot of good links for that, instead, I'll jump to the working code already:
Basically you can copy the Elm code above to a
It inits the Elm app, listen to window events and send it to Elm.
Then, create an
index.html to load the bundled app:
Where does this
dist/bundle.js comes from? Yeah, we need something to build our app. Create a file called
build.sh, give it executable permissions with
chmod +x build.sh and add this inside:
mkdir -p dist
elm make Main.elm --output compiled.js
cat compiled.js bootstrap.js > dist/bundle.js
cat index.html | sed -e "s#dist#$PUBLIC_URL#" > dist/index.html
Special attention to the last line, it replaces
dist path to the
PUBLIC_URL when we need, solving the problem explained on Part III.
Now, to run it on heroku, create this
Now deploy it to heroku with
heroku container:push web and done! It is running, and working, and communicating with other apps, and nobody knows it changed from React to Elm, cause it renders the same and uses the same events to communicate, even heroku isn't much aware that it changed, cause we are inside Docker.
How cool is this? You can check the full source-code here.
If you want to add server-side rendering as well, try elm-static-html.
That was it folks, see ya next time!