Offline-enabled apps with Phoenix LiveView and LiveSvelte

Hi everyone! I’m new to the forums and new to Elixir in general. To learn Elixir, I recently just completed my first app. It’s a todo app built with Phoenix LiveView, but with a twist, it can also work offline :smirk:

By using the LiveSvelte package, I was able to use LiveView to render Svelte components which allows for offline-support. I know an offline app was not what LiveView was intended for, but I thought it was neat that it was possible to still use LiveView in such an app.

I haven’t gotten the chance to dive deeper into Phoenix Channels yet so I’m not sure if the app would perform better just using that instead. However, so far the app has been working well for me and the DX of using LiveView has been great. Anyhow, I thought I would share in case anyone else is interested in building offline-enabled apps with LiveView :slight_smile:

Here’s a video I made walking through how I made the app:

Source code:

Live Demo:

Any questions and feedback welcomed!

33 Likes

Very cool. I tried it out and it works as promised.

Would you mind putting a license on the repo so that I know what I’m allowed to do with the code?

5 Likes

Thanks for checking out the app!

And yes, I just added an MIT license. Please feel free to use the code as you please :slight_smile:

10 Likes

Very cool to see a CRDT example with Elixir. This was on my bucket list of things to try out. Thanks for sharing.

4 Likes

Awesome work. Would you mind adding a .env.example for us newbies?

1 Like

Absolutely, I just added a .env.example to the repo:

I included some comments in the file for more explanation, but in short, it holds the two variables:

  • JS_BACKEND_URL - The server I’m using to 1. run Yjs server-side, and 2. send emails via Cloudflare Workers.
  • JWT_PRIVATE_KEY - Private key used to sign JWTs needed when sending requests to the JS backend server.

Please see the comments in the file for more info and feel free to let me know if you have any questions!

3 Likes

Cheers! Will try to get the Yjs backend setup myself, hopefully no issues.

2 Likes

Very good explanation of the offline enabled app and it’s concepts.

2 Likes