Hello Phoenix avec Windows 11

Nous allons réaliser l’installation de Hello Phoenix sur un PC Windows 11 Surface_Laptop. L’installation précédente sur PC n’ayant pas fonctionné, nous allons essayé autrement, afin de vérifier si la configuration du PC est en jeux.

vérifier l’installation d’Erlang et d’Elixir

C:\Users\berou>elixir -v
Erlang/OTP 25 [erts-13.0.4] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] [jit:ns]
Elixir 1.14.3 (compiled with Erlang/OTP 25)
C:\Users\berou>

Shell
​x
 
C:\Users\berou>elixir -v
Erlang/OTP 25 [erts-13.0.4] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] [jit:ns]
Elixir 1.14.3 (compiled with Erlang/OTP 25)
C:\Users\berou>

Nous pourrions mettre à jour vers la dernière version d’Erlang et d’Elixir. Vous pouvez vous reporter à notre article mettre à jour Erlang et Elixir sur Windows.

Nous choisissons dans un premier temps de rester avec cette version Elixir 1.14.3 (compilée avec Erlang/OPTP 25), n’ayant pas réussi à installer la version Elixir 1.15.4 sur Erlan/OTP 26 lors de notre précédent test sur Windows.

La page Phoenix v1.7.7 nous indique que Phoenix fonctionne sur Elixir v1.14.

Installation de Phoenix

L’installation de Phoenix se fait avec :

mix archive.install hex phx_new

C:\Users\berou>mix archive.install hex phx_new
Could not find Hex, which is needed to build dependency :phx_new
Shall I install Hex? (if running non-interactively, use "mix local.hex --force") [Yn] Y
* creating c:/Users/berou/.mix/archives/hex-2.0.6
Resolving Hex dependencies...
Resolution completed in 0.038s
New:
  phx_new 1.7.7
* Getting phx_new (Hex package)
All dependencies are up to date
Compiling 11 files (.ex)
Generated phx_new app
Generated archive "phx_new-1.7.7.ez" with MIX_ENV=prod
Are you sure you want to install "phx_new-1.7.7.ez"? [Yn] Y
* creating c:/Users/berou/.mix/archives/phx_new-1.7.7

C:\Users\berou>

Shell
 
C:\Users\berou>mix archive.install hex phx_new
Could not find Hex, which is needed to build dependency :phx_new
Shall I install Hex? (if running non-interactively, use "mix local.hex --force") [Yn] Y
* creating c:/Users/berou/.mix/archives/hex-2.0.6
Resolving Hex dependencies...
Resolution completed in 0.038s
New:
  phx_new 1.7.7
* Getting phx_new (Hex package)
All dependencies are up to date
Compiling 11 files (.ex)
Generated phx_new app
Generated archive "phx_new-1.7.7.ez" with MIX_ENV=prod
Are you sure you want to install "phx_new-1.7.7.ez"? [Yn] Y
* creating c:/Users/berou/.mix/archives/phx_new-1.7.7
​
C:\Users\berou>

Installation de PostgreSQL sur Windows 11

Nous avons réalisé un article dédié pour l’installation de PostgreSQL sur Windows.

Contrairement à la version Mac, l’installeur a créé un compte postgres auquel lors de l’installation nous avons donné le mot de passe postgres.

La connexion à PostgreSQL en ligne de commande avec psql doit se faire en précisant l’utilisateur. Ici postgres : psql -U postgres

Nous vérifions que l’utilisateur postgres/postgres existe bien dans la base :

C:\Users\berou>psql -U postgres
Mot de passe pour l'utilisateur postgres :
psql (15.4)
Attention : l'encodage console (850) diffère de l'encodage Windows (1252).
            Les caractères 8 bits peuvent ne pas fonctionner correctement.
            Voir la section « Notes aux utilisateurs de Windows » de la page
            référence de psql pour les détails.
Saisissez « help » pour l'aide.

postgres=# \du
                                              Liste des r¶les
 Nom du r¶le |                                    Attributs                                    | Membre de
-------------+---------------------------------------------------------------------------------+-----------
 postgres    | Superutilisateur, CrÚer un r¶le, CrÚer une base, RÚplication, Contournement RLS | {}


postgres=# \q

C:\Users\berou>

Shell
 
C:\Users\berou>psql -U postgres
Mot de passe pour l'utilisateur postgres :
psql (15.4)
Attention : l'encodage console (850) diffère de l'encodage Windows (1252).
            Les caractères 8 bits peuvent ne pas fonctionner correctement.
            Voir la section « Notes aux utilisateurs de Windows » de la page
            référence de psql pour les détails.
Saisissez « help » pour l'aide.
​
postgres=# \du
                                              Liste des r¶les
 Nom du r¶le |                                    Attributs                                    | Membre de
-------------+---------------------------------------------------------------------------------+-----------
 postgres    | Superutilisateur, CrÚer un r¶le, CrÚer une base, RÚplication, Contournement RLS | {}
​
​
postgres=# \q
​
C:\Users\berou>

Nous avons fini d’installer PosgreSQL avec pour compte administrateur postgres/postgres.

Pour connaitre la version de Postgres :

psql -V

C:\Users\broussel>psql -V
psql (PostgreSQL) 15.4

C:\Users\broussel>

Shell
 
C:\Users\broussel>psql -V
psql (PostgreSQL) 15.4
​
C:\Users\broussel>

Création du projet hello_phoenix

L’installation du projet hello de phoenix selon les instructions de la documentation officielle.

Nous nous plaçons dans notre répertoire projet :

cd C:\Surface\Phoenix\Projets

Puis, nous créons le projet hello_phoenix

mix phx.new hello_phoenix

C:\Surface\Phoenix\Projets>mix phx.new hello_phoenix
* creating hello_phoenix/config/config.exs
* creating hello_phoenix/config/dev.exs
* creating hello_phoenix/config/prod.exs
* creating hello_phoenix/config/runtime.exs
* creating hello_phoenix/config/test.exs
* creating hello_phoenix/lib/hello_phoenix/application.ex
* creating hello_phoenix/lib/hello_phoenix.ex
* creating hello_phoenix/lib/hello_phoenix_web/controllers/error_json.ex
* creating hello_phoenix/lib/hello_phoenix_web/endpoint.ex
* creating hello_phoenix/lib/hello_phoenix_web/router.ex
* creating hello_phoenix/lib/hello_phoenix_web/telemetry.ex
* creating hello_phoenix/lib/hello_phoenix_web.ex
* creating hello_phoenix/mix.exs
* creating hello_phoenix/README.md
* creating hello_phoenix/.formatter.exs
* creating hello_phoenix/.gitignore
* creating hello_phoenix/test/support/conn_case.ex
* creating hello_phoenix/test/test_helper.exs
* creating hello_phoenix/test/hello_phoenix_web/controllers/error_json_test.exs
* creating hello_phoenix/lib/hello_phoenix/repo.ex
* creating hello_phoenix/priv/repo/migrations/.formatter.exs
* creating hello_phoenix/priv/repo/seeds.exs
* creating hello_phoenix/test/support/data_case.ex
* creating hello_phoenix/lib/hello_phoenix_web/controllers/error_html.ex
* creating hello_phoenix/test/hello_phoenix_web/controllers/error_html_test.exs
* creating hello_phoenix/lib/hello_phoenix_web/components/core_components.ex
* creating hello_phoenix/lib/hello_phoenix_web/controllers/page_controller.ex
* creating hello_phoenix/lib/hello_phoenix_web/controllers/page_html.ex
* creating hello_phoenix/lib/hello_phoenix_web/controllers/page_html/home.html.heex
* creating hello_phoenix/test/hello_phoenix_web/controllers/page_controller_test.exs
* creating hello_phoenix/lib/hello_phoenix_web/components/layouts/root.html.heex
* creating hello_phoenix/lib/hello_phoenix_web/components/layouts/app.html.heex
* creating hello_phoenix/lib/hello_phoenix_web/components/layouts.ex
* creating hello_phoenix/priv/static/images/logo.svg
* creating hello_phoenix/lib/hello_phoenix/mailer.ex
* creating hello_phoenix/lib/hello_phoenix_web/gettext.ex
* creating hello_phoenix/priv/gettext/en/LC_MESSAGES/errors.po
* creating hello_phoenix/priv/gettext/errors.pot
* creating hello_phoenix/priv/static/robots.txt
* creating hello_phoenix/priv/static/favicon.ico
* creating hello_phoenix/assets/js/app.js
* creating hello_phoenix/assets/vendor/topbar.js
* creating hello_phoenix/assets/css/app.css
* creating hello_phoenix/assets/tailwind.config.js
* creating hello_phoenix/assets/vendor/heroicons/LICENSE.md
* creating hello_phoenix/assets/vendor/heroicons/UPGRADE.md
* extracting hello_phoenix/assets/vendor/heroicons/optimized

Fetch and install dependencies? [Yn] Y
* running mix deps.get
* running mix assets.setup

We are almost there! The following steps are missing:
    $ cd hello_phoenix
Then configure your database in config/dev.exs and run:
    $ mix ecto.create
Start your Phoenix app with:
    $ mix phx.server
You can also run your app inside IEx (Interactive Elixir) as:
    $ iex -S mix phx.server
C:\Surface\Phoenix\Projets>

Shell
 
C:\Surface\Phoenix\Projets>mix phx.new hello_phoenix
* creating hello_phoenix/config/config.exs
* creating hello_phoenix/config/dev.exs
* creating hello_phoenix/config/prod.exs
* creating hello_phoenix/config/runtime.exs
* creating hello_phoenix/config/test.exs
* creating hello_phoenix/lib/hello_phoenix/application.ex
* creating hello_phoenix/lib/hello_phoenix.ex
* creating hello_phoenix/lib/hello_phoenix_web/controllers/error_json.ex
* creating hello_phoenix/lib/hello_phoenix_web/endpoint.ex
* creating hello_phoenix/lib/hello_phoenix_web/router.ex
* creating hello_phoenix/lib/hello_phoenix_web/telemetry.ex
* creating hello_phoenix/lib/hello_phoenix_web.ex
* creating hello_phoenix/mix.exs
* creating hello_phoenix/README.md
* creating hello_phoenix/.formatter.exs
* creating hello_phoenix/.gitignore
* creating hello_phoenix/test/support/conn_case.ex
* creating hello_phoenix/test/test_helper.exs
* creating hello_phoenix/test/hello_phoenix_web/controllers/error_json_test.exs
* creating hello_phoenix/lib/hello_phoenix/repo.ex
* creating hello_phoenix/priv/repo/migrations/.formatter.exs
* creating hello_phoenix/priv/repo/seeds.exs
* creating hello_phoenix/test/support/data_case.ex
* creating hello_phoenix/lib/hello_phoenix_web/controllers/error_html.ex
* creating hello_phoenix/test/hello_phoenix_web/controllers/error_html_test.exs
* creating hello_phoenix/lib/hello_phoenix_web/components/core_components.ex
* creating hello_phoenix/lib/hello_phoenix_web/controllers/page_controller.ex
* creating hello_phoenix/lib/hello_phoenix_web/controllers/page_html.ex
* creating hello_phoenix/lib/hello_phoenix_web/controllers/page_html/home.html.heex
* creating hello_phoenix/test/hello_phoenix_web/controllers/page_controller_test.exs
* creating hello_phoenix/lib/hello_phoenix_web/components/layouts/root.html.heex
* creating hello_phoenix/lib/hello_phoenix_web/components/layouts/app.html.heex
* creating hello_phoenix/lib/hello_phoenix_web/components/layouts.ex
* creating hello_phoenix/priv/static/images/logo.svg
* creating hello_phoenix/lib/hello_phoenix/mailer.ex
* creating hello_phoenix/lib/hello_phoenix_web/gettext.ex
* creating hello_phoenix/priv/gettext/en/LC_MESSAGES/errors.po
* creating hello_phoenix/priv/gettext/errors.pot
* creating hello_phoenix/priv/static/robots.txt
* creating hello_phoenix/priv/static/favicon.ico
* creating hello_phoenix/assets/js/app.js
* creating hello_phoenix/assets/vendor/topbar.js
* creating hello_phoenix/assets/css/app.css
* creating hello_phoenix/assets/tailwind.config.js
* creating hello_phoenix/assets/vendor/heroicons/LICENSE.md
* creating hello_phoenix/assets/vendor/heroicons/UPGRADE.md
* extracting hello_phoenix/assets/vendor/heroicons/optimized
​
Fetch and install dependencies? [Yn] Y
* running mix deps.get
* running mix assets.setup
​
We are almost there! The following steps are missing:
    $ cd hello_phoenix
Then configure your database in config/dev.exs and run:
    $ mix ecto.create
Start your Phoenix app with:
    $ mix phx.server
You can also run your app inside IEx (Interactive Elixir) as:
    $ iex -S mix phx.server
C:\Surface\Phoenix\Projets>

L’installation s’est terminée correctement.

Nous suivons les instructions :

se placer dans le répertoire du projet hello_phoenix
ouvrir notre environnement de développement VS Code avec le projet
configurer la base de données avec les identifiants postgres/postgres
créer la base de données du projet
lancer le serveur
puis se connecter avec un navigateur sur le port 4000

C:\Surface\Phoenix\Projets>cd hello_phoenix

C:\Surface\Phoenix\Projets\hello_phoenix>

Shell
 
C:\Surface\Phoenix\Projets>cd hello_phoenix
​
C:\Surface\Phoenix\Projets\hello_phoenix>

Nous créons notre fichier pour l’ouverture de vs code que nous mettons dans le dossier du projet : Phoenix/Projets/hello_phoenix

startVsCode.bat :

code .

.bat
 
code .

Nous ouvrons VS Code avec notre projet.

Hello_Phoenix sur Windows 11#1-ouverture du projet dans vs_code

Dans le dossier config, nous ouvrons le fichier dev.exs, afin de vérifier les paramètres de la base de données :

config/dev.exs :

# Configure your database
config :hello_phoenix, HelloPhoenix.Repo,
  username: "postgres",
  password: "postgres",
  hostname: "localhost",
  database: "hello_phoenix_dev",
  stacktrace: true,
  show_sensitive_data_on_connection_error: true,
  pool_size: 10

Elixir
 
# Configure your database
config :hello_phoenix, HelloPhoenix.Repo,
  username: "postgres",
  password: "postgres",
  hostname: "localhost",
  database: "hello_phoenix_dev",
  stacktrace: true,
  show_sensitive_data_on_connection_error: true,
  pool_size: 10

Création du projet

Pour créer le projet hello_phoenix, nous utilisons la commande

mix ecto.create

En nous plaçant dans le dossier du projet : cd C:\Surface\Phoenix\Projets\hello_phoenix

C:\Surface\Phoenix\Projets\hello_phoenix>mix ecto.create
==> file_system
Compiling 7 files (.ex)
Generated file_system app
==> decimal
Compiling 4 files (.ex)
Generated decimal app
==> mime
Compiling 1 file (.ex)
Generated mime app
==> nimble_options
Compiling 3 files (.ex)
Generated nimble_options app
==> hello_phoenix
Could not find "rebar3", which is needed to build dependency :telemetry
I can install a local copy which is just used by Mix
Shall I install rebar3? (if running non-interactively, use "mix local.rebar --force") [Yn] Y
* creating c:/Users/berou/.mix/elixir/1-14/rebar3
===> Analyzing applications...
===> Compiling telemetry
==> telemetry_metrics
Compiling 7 files (.ex)
Generated telemetry_metrics app
===> Analyzing applications...
===> Compiling telemetry_poller
==> jason
Compiling 10 files (.ex)
Generated jason app
==> db_connection
Compiling 15 files (.ex)
Generated db_connection app
==> expo
Compiling 2 files (.erl)
Compiling 21 files (.ex)
Generated expo app
==> phoenix_pubsub
Compiling 11 files (.ex)
Generated phoenix_pubsub app
==> plug_crypto
Compiling 5 files (.ex)
Generated plug_crypto app
==> hpax
Compiling 4 files (.ex)
Generated hpax app
==> gettext
Compiling 17 files (.ex)
Generated gettext app
===> Analyzing applications...
===> Compiling ranch
==> ecto
Compiling 56 files (.ex)
Generated ecto app
==> plug
Compiling 1 file (.erl)
Compiling 40 files (.ex)
Generated plug app
==> phoenix_html
Compiling 9 files (.ex)
Generated phoenix_html app
==> phoenix_template
Compiling 4 files (.ex)
Generated phoenix_template app
==> postgrex
Compiling 68 files (.ex)
Generated postgrex app
==> ecto_sql
Compiling 25 files (.ex)
Generated ecto_sql app
==> nimble_pool
Compiling 2 files (.ex)
Generated nimble_pool app
==> mint
Compiling 1 file (.erl)
Compiling 19 files (.ex)
Generated mint app
==> finch
Compiling 13 files (.ex)
Generated finch app
==> websock
Compiling 1 file (.ex)
Generated websock app
===> Analyzing applications...
===> Compiling cowlib
===> Analyzing applications...
===> Compiling cowboy
===> Analyzing applications...
===> Compiling cowboy_telemetry
==> plug_cowboy
Compiling 5 files (.ex)
Generated plug_cowboy app
==> swoosh
Compiling 44 files (.ex)
Generated swoosh app
==> websock_adapter
Compiling 2 files (.ex)
Generated websock_adapter app
==> phoenix
Compiling 71 files (.ex)
Generated phoenix app
==> phoenix_live_reload
Compiling 4 files (.ex)
Generated phoenix_live_reload app
==> phoenix_live_view
Compiling 37 files (.ex)
Generated phoenix_live_view app
==> phoenix_live_dashboard
Compiling 36 files (.ex)
Generated phoenix_live_dashboard app
==> phoenix_ecto
Compiling 7 files (.ex)
Generated phoenix_ecto app
==> hello_phoenix
Compiling 15 files (.ex)
Generated hello_phoenix app
The database for HelloPhoenix.Repo has been created

C:\Surface\Phoenix\Projets\hello_phoenix>

Shell
 
C:\Surface\Phoenix\Projets\hello_phoenix>mix ecto.create
==> file_system
Compiling 7 files (.ex)
Generated file_system app
==> decimal
Compiling 4 files (.ex)
Generated decimal app
==> mime
Compiling 1 file (.ex)
Generated mime app
==> nimble_options
Compiling 3 files (.ex)
Generated nimble_options app
==> hello_phoenix
Could not find "rebar3", which is needed to build dependency :telemetry
I can install a local copy which is just used by Mix
Shall I install rebar3? (if running non-interactively, use "mix local.rebar --force") [Yn] Y
* creating c:/Users/berou/.mix/elixir/1-14/rebar3
===> Analyzing applications...
===> Compiling telemetry
==> telemetry_metrics
Compiling 7 files (.ex)
Generated telemetry_metrics app
===> Analyzing applications...
===> Compiling telemetry_poller
==> jason
Compiling 10 files (.ex)
Generated jason app
==> db_connection
Compiling 15 files (.ex)
Generated db_connection app
==> expo
Compiling 2 files (.erl)
Compiling 21 files (.ex)
Generated expo app
==> phoenix_pubsub
Compiling 11 files (.ex)
Generated phoenix_pubsub app
==> plug_crypto
Compiling 5 files (.ex)
Generated plug_crypto app
==> hpax
Compiling 4 files (.ex)
Generated hpax app
==> gettext
Compiling 17 files (.ex)
Generated gettext app
===> Analyzing applications...
===> Compiling ranch
==> ecto
Compiling 56 files (.ex)
Generated ecto app
==> plug
Compiling 1 file (.erl)
Compiling 40 files (.ex)
Generated plug app
==> phoenix_html
Compiling 9 files (.ex)
Generated phoenix_html app
==> phoenix_template
Compiling 4 files (.ex)
Generated phoenix_template app
==> postgrex
Compiling 68 files (.ex)
Generated postgrex app
==> ecto_sql
Compiling 25 files (.ex)
Generated ecto_sql app
==> nimble_pool
Compiling 2 files (.ex)
Generated nimble_pool app
==> mint
Compiling 1 file (.erl)
Compiling 19 files (.ex)
Generated mint app
==> finch
Compiling 13 files (.ex)
Generated finch app
==> websock
Compiling 1 file (.ex)
Generated websock app
===> Analyzing applications...
===> Compiling cowlib
===> Analyzing applications...
===> Compiling cowboy
===> Analyzing applications...
===> Compiling cowboy_telemetry
==> plug_cowboy
Compiling 5 files (.ex)
Generated plug_cowboy app
==> swoosh
Compiling 44 files (.ex)
Generated swoosh app
==> websock_adapter
Compiling 2 files (.ex)
Generated websock_adapter app
==> phoenix
Compiling 71 files (.ex)
Generated phoenix app
==> phoenix_live_reload
Compiling 4 files (.ex)
Generated phoenix_live_reload app
==> phoenix_live_view
Compiling 37 files (.ex)
Generated phoenix_live_view app
==> phoenix_live_dashboard
Compiling 36 files (.ex)
Generated phoenix_live_dashboard app
==> phoenix_ecto
Compiling 7 files (.ex)
Generated phoenix_ecto app
==> hello_phoenix
Compiling 15 files (.ex)
Generated hello_phoenix app
The database for HelloPhoenix.Repo has been created
​
C:\Surface\Phoenix\Projets\hello_phoenix>

Visualisation du projet

Le projet est créé, nous pouvons activer le serveur : mix phx.server

C:\Surface\Phoenix\Projets\hello_phoenix>mix phx.server
[warning] Phoenix is unable to create symlinks. Phoenix' code reloader will run considerably faster if symlinks are allowed. On Windows, the lack of symlinks may even cause empty assets to be served. Luckily, you can address this issue by starting your Windows terminal at least once with "Run as Administrator" and then running your Phoenix application.
[info] Running HelloPhoenixWeb.Endpoint with cowboy 2.10.0 at 127.0.0.1:4000 (http)
[info] Access HelloPhoenixWeb.Endpoint at http://localhost:4000
[watch] build finished, watching for changes...

Rebuilding...

Done in 318ms.

Shell
 
C:\Surface\Phoenix\Projets\hello_phoenix>mix phx.server
[warning] Phoenix is unable to create symlinks. Phoenix' code reloader will run considerably faster if symlinks are allowed. On Windows, the lack of symlinks may even cause empty assets to be served. Luckily, you can address this issue by starting your Windows terminal at least once with "Run as Administrator" and then running your Phoenix application.
[info] Running HelloPhoenixWeb.Endpoint with cowboy 2.10.0 at 127.0.0.1:4000 (http)
[info] Access HelloPhoenixWeb.Endpoint at http://localhost:4000
[watch] build finished, watching for changes...
​
Rebuilding...
​
Done in 318ms.
​

l’adresse de connexion est :

http://localhost:4000

Hello_Phoenix sur Windows 11#2-la page du projet hello_phoenix dans le navigateur

Conclusion : Hello_phoenix est créé et fonctionne sur windows

Nous avons réussi à installer Phoenix sur Windows. La complexité a été l’installation de la base de données PostgreSQL. Le forum postgres a été très efficace.

Si vous avez aimé l'article vous êtes libre de le partager :-)