~nicolaskempf57/elixir-starter-explaned

feat: Translating component

Obviously, you can also translate your own component !
feat: use component

Phoenix allows us to use components instead of partials.
This makes heex content more like HTML and other components based library.

A component is simply a public function of a module that use Phoenix.Component.

They will receive all the attributes as map. You can use an @ notation like @content instead of assigns[:content].
refac: Use templates

With Phoenix framework, you can use template inside template just like partials in Statamic.

Doing so avoid the repetition of Tailwind classes and other cases.
feat: Authentication

Phoenix Framework includes a ready made authentication system with registration, email validation and password reset.

This creates an Account context that mixes both the application layer and the domain layer in the same place.

This works fine for small application or for internal dependencies like Ecto but not for external ones.

So, what is Ecto ? This is an adapter to format, query and validate data, the most common one being SQL with postgres.

The auth generator creates a single module User defining both the users schema and changesets.

This works like Laravel Model and Form Request but the validation is moved to the domain / db layer instead of the web one.

There is also a migration system and a new file for the users table.

All this come with unit tests for the starter app and integration tests for controllers !
feat: Translations

Translations are baked in Elixir with functions around gettext.

The starter made a gettext module defining all you need.
You can use gettext in heex just like trans() or _() in Laravel / WP.
feat(tailwind): Style page

We're using a free components from https://tailwindui.com/components/marketing/sections/heroes

Thanks to tailwind watcher, files are updated in realtime. It allows us to see our CSS changes as soon as we save them.

We start with updating the navigation bar and the main content.
feat(front-end): Add tailwindcss

Phoenix Framework comes with some default micro CSS framework that's not really known.

We'll replace it with TailwindCSS. Because it's quite common, there is an official plugin for that.

Here, we add the tailwind installer to the project, configure it and add a default config.

Now, we can reload our page and the CSS is gone ! We'll redo it with tailwind.
feat(phoenix): Starting the server

Phoenix include a new command to run your own server, like artisan for Laravel.

mix phx.server

This will build the project and start a webserver. The starting point is a static page with links to the documentation, etc.

You can also access a LiveDashboard that show you system informations and telemetry events.
feat: Project creation

To make a new project, we can use our new generator.

mix phx.new starter --umbrella

We are making a new project called starter and setting it as an umbrella project.

This makes the starter_umbrella project with the following content :
- apps
    - starter
    - starter_web
- config
- deps
- mix.exs
- mix.lock

An umbrella projects is a way to put together differents applications.
This allows us a better separation of concern instead of having one single application.
It's easier to manage than multiple microservices and it's a real separation between modules, a nice in-between !

We can see that our applications share the same configuration folder.

Regarding dependencies, Elixir uses mix, its build tool to fetch them thanks to mix.exs and mix.lock.
This works like package.json / package.lock.
doc: Install Phoenix Framework

Now that we have Elixir installed, we can start using it. We'll install Hex, the package manager.

mix local.hex

Now, we can install the Phoenix Framework generator.

mix archive.install hex phx_new

This generator allows us to start new phoenix project. This is equivalent to laravel CLI or composer create-project.
doc: Installing requirements

Before starting our project, we must install Elixir and Erlang.
Elixir is a language build on the EVM, Erlang Virtual Machine and its versions are linked to Erlang OTP versions so we must install both with matching versions.

To do so, we'll use asdf, a version manager like NVM which work with multiple programming languages including Elixir and Erlang.

brew install asdf

Then, follow on screen instructions required to add to ~/.zshrc

We can now use asdf to install plugins for our languages :
asdf plugin add erlang
asdf plugin add elixir

These are responsibles to fetch the versions you want.
To install a version, you simply do :
asdf install erlang latest

This will tell you the installed version including the OTP version (currently 25).

With the following command, you can see the available versions for elixir
asdf list all elixir

Choose one with the right OTP version and install it
asdf install elixir 1.13.4-otp-25

The last missing part is a database. Elixir uses postgresql by default.

brew install postgresql
brew services start postgresql
createuser -S postgres

Now, we can start our project !