Phoenix LiveView: when javascript code is fun *

* due to his absence

Continuation of the article about Phoenix Live View . Today I will describe the basic configuration for comfortable work with the technology and create a new application.

Install elixir and phoenix

We need elixir (the installation process is by reference). But on windows it is better to put either a docker or a vagrant. I will assume that you are already aware of these technologies. We ignore databases, it is better to consider working with them in another project.

After installing elixir, install phoenix (link for home reference). In fact, we need to make sure the necessary version of elixir

elixir -v

Should issue 1.8.2 as relevant for today. And start the installation of the phoenix itself

mix archive.install hex phx_new 1.4.6

1.4.6 is relevant for today, you can see the current version here. The project will use webpack, it comes out of the box in phoenix and so we need nodejs .

IDE

Choosing an IDE is a headache, but for myself, I decided that I would develop on rubymine, there is an excellent plugin called elixir. The tear-off color scheme becomes clear over time and I don’t want to return to vscode anymore, but I want to say that elixir support is also very well implemented through the corresponding plug-in , I recommend it for code lovers.

Project creation

Create a convenient folder for storing projects on elixir and go to the console:

cd ~/ElixirProjects/
mix help # список всех команд
mix help phx.new # все что нужно знать про создание нового приложения на фениксе
mix phx.new fire --no-ecto # создаем проект fire в котором не будем использовать функционал по работе с бд
Fetch and install dependencies? [Yn] # отвечаем утвердительно

Compilation will take some time

cd fire
mix phx.server

If all the dependencies were successfully installed and you got something like [info] Access FireWeb.Endpoint at http://localhost:4000that, then boldly go to the browser http: // localhost: 4000 . Reload the page several times and return to the terminal. There you will find an interesting log, where µs is a microsecond, and FireWeb.PageController.indexthis is the name of the function that processed your request. Let's open the code in the IDE and continue.

How to work with it?

All the main code will be in the lib folder. Locate the file lib / fire_web / templates / page / index.html.eex, delete the second section, save and return to the browser. You do not need to reload the page, the phoenix will do it for you. A template engine for inserting executable code with outputting results requires the input of <%=and %>. At the bottom of the template, enter <%= "Fire man" %>and look at the result in the browser. In order for the server to stop working, double-click in the consolectrl + c

Total

At this stage, you should have a ready-made environment for experimentation. Feel free to create other projects. Look at the difference in the project code if you create it without --no-ecto or adding --umbrella (creating a microservice architecture). For further work you will need to know the basic data types. It is advisable to familiarize yourself with two sources of Lessons in Russian and Official Documentation in English. Elixirschool is partially translated into Russian and I would recommend to start learning the language from this resource. If you really want to create an application on liveview then here is an article on which we will build on in the future.

Join the @proelixir Russian-speaking telegram community and watch the latest news and vacancies on @proelixir_news channel.