Building Real-Time Web Applications with Phoenix LiveView/

...

/

Building Our First Surface Component

Building Our First Surface Component

Learn how to build a Surface component from scratch.

We'll cover the following...

Installing and configuring Surface

We know that Surface provides syntactic sugar for defining and rendering components, along with type checking and a few other niceties. Now it’s time to build our very first Surface component and explore these features. To do so, we started by adding the Surface dependency to our pento/mix.exs file, like this:

Elixir
{:surface, "~> 0.3.2"},

There’s only one Surface dependency, but we’ll need a bit more configuration. We want Phoenix reloading to kick in when users change Surface template files, so we update the config/dev.exs file as shown here:

Elixir
patterns: [ 
      ...
      ~r"lib/pento_web/(live|views)/.*(ex)$",
      ~r"lib/my_app_web/live/.*(sface)$" 
   ]

Then, install it by running mix deps.get command like this:

Elixir
mix deps.get

After this command, the surface is installed and configured.

We already installed it on Educative’s platform.

We’re ready to use it in our Phoenix app.

Defining a straightforward Game LiveView

Most of the game will happen in the ...