Launching Livebook using LiveView

The Livebook launcher was super fun to create. Everything happens in a single LiveView process. There was a problem though… it wasn’t great if we were in the middle of deploying the app for the user and one these things happened: User hits “refresh

Fly.io logo
Fly.io
•
Mark Ericksen
•4 min read•beginner•
--
•View Original
DockerRedisVault

Overview

This article discusses the implementation of a Livebook launcher using LiveView on Fly.io, focusing on the challenges and solutions for managing temporary private data during deployment. It highlights the use of encryption and SessionStorage to maintain user experience and data integrity.

What You'll Learn

1

How to securely manage temporary private data during LiveView deployments

2

Why using SessionStorage can enhance user experience in web applications

3

How to implement encryption for sensitive data in Phoenix applications

Key Questions Answered

What challenges arise when deploying a Livebook instance using LiveView?
The main challenge is managing generated secrets, such as 'liveview_password', which are temporarily stored in a LiveView process. If a user refreshes their browser or the server restarts, these secrets are lost, leading to a poor user experience.
How does the solution for managing secrets during deployment work?
The solution involves encrypting private data using Phoenix.Token.encrypt/4 and storing it in the browser's SessionStorage. This allows the data to be retained across page refreshes and server restarts, ensuring a seamless user experience.
What is the role of LiveView hooks in this implementation?
LiveView hooks facilitate two-way communication between the server and client. They enable the client to handle events like storing, restoring, and clearing data in SessionStorage, which is crucial for maintaining state during deployments.

Technologies & Tools

Some links below are affiliate links. We may earn a commission if you make a purchase.

Backend
Phoenix
Used for building the LiveView application and managing real-time interactions.
Frontend
Sessionstorage
Used to store temporary private data securely on the client side.

Key Actionable Insights

1
Implementing encryption for sensitive data is crucial for maintaining user privacy and security.
Using Phoenix.Token.encrypt/4 ensures that private data is not only secure but also tamper-proof, which is essential in applications handling sensitive information.
2
Utilizing SessionStorage can significantly improve user experience by preventing data loss during unexpected events.
By storing temporary data in SessionStorage, users can refresh their browsers without losing their progress, which is particularly important in long-running processes.
3
Leveraging LiveView hooks can enhance interactivity and responsiveness in web applications.
Hooks allow for real-time updates and state management, making applications more dynamic and user-friendly.

Common Pitfalls

1
Failing to manage temporary data can lead to poor user experience during deployments.
Without proper handling of secrets and state, users may lose their progress if they refresh the page or if the server restarts, resulting in frustration and potential data loss.