Building Our First Surface Component

Learn how to build a Surface component from scratch.

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:

Press + to interact
{: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:

Press + to interact
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:

Press + to interact
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

...

Get hands-on with 1400+ tech skills courses.