Skip to content

A POC of a federated architecture using HTMX & NGINX - micro-frontends/services (same thing)

License

Notifications You must be signed in to change notification settings

cristianoliveira/distributex

Folders and files

NameName
Last commit message
Last commit date

Latest commit

65e578a · Dec 7, 2024

History

81 Commits
Dec 3, 2023
Sep 16, 2023
Dec 7, 2024
Sep 17, 2023
May 11, 2024
Sep 2, 2023
Sep 1, 2023
Oct 4, 2024
Oct 4, 2024
Sep 19, 2023
Sep 16, 2023
Sep 23, 2024
Sep 23, 2024
Sep 23, 2024

Repository files navigation

distributex

This is a POC of a federated architecture combining the Xs of NGINX and HTMX

(AKA microfrontends/microservices same thing)

Architecture

Architecture

Tech stack

  • Main app: HTMX, NGINX, and Tailwind
  • Service 1 (Todo list) - Golang & Sqlite
  • Service 2 (Chat) - Rust & Websockets
  • Service 3 (Tech News) - Python & Hackernews API
  • Docker

Why?

I wanted to understand how much I could stretch the idea and how hard would be to have micro frontends and services using HTMX. Spoiler alert, it's surprisingly easy due to HATEOAS.

Main goals

As a dev, you should be able to do/have:

  • A DX & UX isolation, which means accessing the service URL gives you the same UX as in the main APP.
  • Freedom of choice, it shouldn't matter the stack you pick for the services as long you respect the protocol
  • Communication via events not only on the backend but also on the frontend side, thanks to an HTTP header convention (HX-trigger)

Current state

  • Main app
  • Todo service
    • Add item
    • Remove item
    • Mark as done
    • Make it reactive to changes from other sessions (websocket?)
  • Chat service
    • Allow pick nickname
    • Join a room
    • Send and receive messages
  • News service
    • Allow fetch latest news
    • Allow managing favorite news
  • Main app serving widgets
    • Todo service
    • Chat service
    • News service
    • Fallback for service loading
    • Handle errors
  • Implement the 3rd service
  • Cross services communication via events
    • Events emmited by one app is able to trigger another app to do something Eg: When a user adds a new todo the chat app sends a message to the room. See HX-trigger
  • Describe infra and deploy a demo to AWS

Getting started

Requirements

Make sure you have

If you are on OSX we recommend installing colima as a container runtime

Running

Check the available commands with:

make help

To start all the application run:

make start

That's it, you should be able to access the main application at http://localhost:4040

You also should be able to access the microservices at:

Live reload mode

You need funzzy (sorry?)

First, start the services with make start then in another terminal do:

make watch