We’ve already played with Select2 and LiveView, it was before the release of LiveView JS Hooks. To make select2 work with LiveView we had to listen to phx:update generic javascript events, re-initialize select2 and use a workaround to push events from the browser to LiveView.

With hooks now everything it’s much simpler and smooth. After we’ve added countries elixir dependency, jquery and select2 in assets/package.json and set up the latest LiveView release in our Phoenix project, we can write SelectLive module. …

When you are hosting an Elixir/Phoenix app in DigitalOcean you may want to use Spaces, the DigitalOcean’s cloud storage alternative to AWS S3.

When you are hosting an Elixir/Phoenix app in DigitalOcean you may want to use Spaces, the DigitalOcean’s cloud storage alternative to AWS S3 (If you want to use AWS S3 instead, you can read AWS S3 in Elixir with ExAws).

Hopefully, Spaces is compatible with S3 APIs, which means that we can apply most of the things we saw in the previous article.

DigitalOcean Spaces and API Keys

Let’s start by setting app Spaces and API keys. Once logged into your DigitalOcean…

In this article we see how to store and retrieve files on AWS S3 using Elixir and with the help of ExAws.

We start by setting up an AWS account and credentials, configure an Elixir application and see the basic upload and download operations with small files.

Then, we see how to deal with large files, making multipart uploads and using presigned urls to create a download stream, processing data on the fly.

Create an IAM user, configure permissions and credentials

If you don’t have an Amazon Web Services account yet, you can create it on https://aws.amazon.com/

Understanding Phoenix LiveView

  • Setup
  • The Primitives
  • Building a Gallery app (this article)

In the previous articles we’ve seen how to setup Phoenix LiveView and built a counter (which is like the “Hello World” code example in the LiveView world). We’ve also taken a look at the live-cycle, inspecting websocket messages, having a glimpse of how the things work under the hood.

It’s now time to build our Gallery app! For simplicity we are not going to use any database. Our images will be just a fixed set of urls taken from Unsplash.

Episode 7 — The Primitives of Phoenix LiveView

Understanding Phoenix LiveView

  • Setup
  • The Primitives (this article)
  • Building a Gallery app

In the previous article we saw how to setup Phoenix LiveView, in order to have everything we need to build a simple LiveView gallery app.

Now, before creating our app, I’d like to explore the Phoenix LiveView primitives, understanding the magic behind LiveView while learning how we can build a simple counter.

Once built some confidence and understood how LiveView and its life-cycle work, we’ll see, in the next article, that the gallery app is just an easy evolution…

Understanding Phoenix LiveView

Phoenix LiveView has been released on Hex! Although it’s still not a stable release (at the time of writing 0.3.1), it works really well and it’s packed of cool features.

Since the first version, I’m so impressed with how easy and fast I can develop a real-time application with LiveView, without using a complex JavaScript framework.

But to me, the most important LiveView’s aspect is the productivity boost! Be able to focus on where data reside and are processed while being sure that changes are pushed to the front-end, updating the…

LiveView doesn’t support JavaScript interop at the moment (but it’s a planned feature). So, let’s see how we can come up with a workaround to make LiveView playing together with a JavaScript library like Select2.

Select2 working with LiveView
Select2 working with LiveView
Select2 working with LiveView

Important: remember that LiveView is still in beta and that the workarounds we experiment in this article may not be ideal!

LiveView example with select

Let’s start by focusing on the select element and consider this LiveView example

Subscribe to get FREE Tutorials by email. Start learning Elixir and Phoenix to build features and apps!

In the previous article focused on live_redirect, we've seen how in Phoenix LiveView we can change the URL without changing the location or refreshing the page. In this way we can keep the URL updated with the current page state, making easier for the user to bookmark or share it.

We are going to see how to refactor the code with live_link, making the code simpler and reducing the number of messages exchanged between our browser and LiveView.

Pictures example with live_redirect/2

Let’s consider the LiveView…

It’s now possible to try the pushState support available in Phoenix LiveView (which, remember, is still in beta)

In the previous two parts we’ve seen how to create a Phoenix application with a multipart upload form, that creates thumbnails of images and PDF.

We select a file to upload and once uploaded we see it in the upload list with a thumbnail (if image or PDF). Since we are using it in localhost the upload is fast, even with large files.

But in a real world scenario the upload could…

Alvise Susmel

Passionate Software Engineer, CTO in a London-based Hedge Fund. Eager to learn new things. Fell in love with Elixir.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store