Skip to content

razuf/elixir-phoenix-liveview-realworld

Repository files navigation

Elixir Phoenix LiveView Example App

RealWorld Frontend

Elixir (Phoenix LiveView) codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the RealWorld spec and API.

This codebase was created to demonstrate a frontend application built with Elixir and Phoenix LiveView including CRUD operations, authentication, routing, pagination, and more.

For more information on how to this works with other frontends/backends, head over to the RealWorld repo.

How it works

Original doc: "Phoenix LiveView provides rich, real-time user experiences with server-rendered HTML."

Installing / Getting started

To run this project, you will need to install the following dependencies on your system:

To get started, run the following commands in your project folder.

Clone the repository:

git clone https://github.com/razuf/elixir-phoenix-liveview-realworld.git
cd elixir-phoenix-liveview-realworld

Install the dependencies:

mix deps.get

Build and run a local development server:

mix phx.server

Open in your browser

This is a frontend project, you can go to http://localhost:4000 and see this aplication.

Elixir Phoenix LiveView Example App

This is connected to the standard Conduit backend https://conduit.productionready.io/api.

In order to connect other Conduit backends you can download and setup one of the backend projects and set it up as api for this app. Typically this can be done by finding the localhost url and port e.g. localhost:9000 and then put it into:

http://localhost:4000/backend_api_url

Elixir Phoenix LiveView Example App

Tests

It's on my list to improve. Testing is one of my favorite feature in LiveView. I'll do it asap.

I wrote some basic tests.

  • for redirects when require authenticated user
  • for redirect if user is authenticated
  • and a first click test: Sign in from home

To run the tests for this project, you don't need to install any additional tools, simply run in your terminal:

mix test

result:

....

Finished in 2.1 seconds
6 tests, 0 failures

It maybe needs some seconds because of fully handle a start with a connection to the backend incl. loading of the last 5 articles from the backend.

Documentation

Needs to be done...

I'm writing a blog post inside Conduit. ;-) You can read it here.

Licensing

MIT © Ralph Zühlsdorf