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 !