How to convert old liveview app to new Phoenix version?

user_1337392 0
Viewed 81

Background

I am in the process of porting an old LiveView app to the newest version of Phoenix ( v1.6.5). Being new to the whole thing in general I was expecting to run mix phx.new web_interface --live --no-ecto and to the find a similar structure to what I had before:

├───assets
│   ├───css
│   ├───js
│   └───static
│       └───images
├───config
├───lib
│   ├───web_interface
│   └───web_interface_web
│       ├───channels
│       ├───live
│       ├───templates
│       │   └───layout
│       └───views
└───priv
    └───static
        └───assets

Instead I got:

├───assets
│   ├───css
│   ├───js
│   └───vendor
├───lib
│   └───web_interface
│       ├───controllers
│       ├───templates
│       │   ├───layout
│       │   └───page
│       └───views
└───priv
    ├───gettext
    │   └───en
    │       └───LC_MESSAGES
    └───static
        ├───assets
        └───images

Something is missing

Paying close attention you will now see I am missing a couple of important folders, namely, web_interface_web and the live folder.

So now I am understand the impression I either missed a huge milestone upgrade or that something is wrong with my mix phx.new command.

Questions

  • Why are these folders missing?
  • How can I port the project? What are the equivalent folders now?
phoenix-live-view elixir
1 Answers

If you are running on Elixir 1.13 and Phoenix 1.6.5, there should be a and web_interface and web_interface_web directories given the command you provided mix phx.new web_interface --live --no-ecto (I put the output of that command below). The live directory doesn't get created until you generate your first LiveView views with something like mix phx.gen.live Accounts User users name:string age:integer

This looks like an older version of Phoenix or Elixir. You may have generated the project in a different shell session that references a different version of Elixir or Phoenix. Also, What version of Phoenix does mix.exs say?

Check your version of Elixir with elixir --version

➜  projects$ elixir --version
Erlang/OTP 24 [erts-12.0.3] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] [jit] [dtrace]

Elixir 1.13.0 (compiled with Erlang/OTP 24)

Then check the version of the phx package you have installed with mix archive

➜  projects$ mix archive      
* hex-1.0.1
* phx_new-1.6.5
Archives installed at: /Users/cj1/.kiex/mix/archives/elixir-1.13.0

If you need to reinstall the phx package, run the (mix archive.install hex phx_new docs)

➜  projects$ mix archive.install hex phx_new

Resolving Hex dependencies...
Dependency resolution completed:
New:
  phx_new 1.6.5
* Getting phx_new (Hex package)
All dependencies are up to date
Compiling 11 files (.ex)
Generated phx_new app
Generated archive "phx_new-1.6.5.ez" with MIX_ENV=prod
Are you sure you want to install "phx_new-1.6.5.ez"? [Yn] y
* creating /Users/cj1/.kiex/mix/archives/elixir-1.13.0/phx_new-1.6.5

This is what I get when I run the command you have:

➜  projects$ mix phx.new web_interface --live --no-ecto
* creating web_interface/config/config.exs
* creating web_interface/config/dev.exs
* creating web_interface/config/prod.exs
* creating web_interface/config/runtime.exs
* creating web_interface/config/test.exs
* creating web_interface/lib/web_interface/application.ex
* creating web_interface/lib/web_interface.ex
* creating web_interface/lib/web_interface_web/views/error_helpers.ex
* creating web_interface/lib/web_interface_web/views/error_view.ex
* creating web_interface/lib/web_interface_web/endpoint.ex
* creating web_interface/lib/web_interface_web/router.ex
* creating web_interface/lib/web_interface_web/telemetry.ex
* creating web_interface/lib/web_interface_web.ex
* creating web_interface/mix.exs
* creating web_interface/README.md
* creating web_interface/.formatter.exs
* creating web_interface/.gitignore
* creating web_interface/test/support/channel_case.ex
* creating web_interface/test/support/conn_case.ex
* creating web_interface/test/test_helper.exs
* creating web_interface/test/web_interface_web/views/error_view_test.exs
* creating web_interface/lib/web_interface_web/controllers/page_controller.ex
* creating web_interface/lib/web_interface_web/views/page_view.ex
* creating web_interface/test/web_interface_web/controllers/page_controller_test.exs
* creating web_interface/test/web_interface_web/views/page_view_test.exs
* creating web_interface/assets/vendor/topbar.js
* creating web_interface/lib/web_interface_web/templates/layout/root.html.heex
* creating web_interface/lib/web_interface_web/templates/layout/app.html.heex
* creating web_interface/lib/web_interface_web/templates/layout/live.html.heex
* creating web_interface/lib/web_interface_web/views/layout_view.ex
* creating web_interface/lib/web_interface_web/templates/page/index.html.heex
* creating web_interface/test/web_interface_web/views/layout_view_test.exs
* creating web_interface/lib/web_interface/mailer.ex
* creating web_interface/lib/web_interface_web/gettext.ex
* creating web_interface/priv/gettext/en/LC_MESSAGES/errors.po
* creating web_interface/priv/gettext/errors.pot
* creating web_interface/assets/css/phoenix.css
* creating web_interface/assets/css/app.css
* creating web_interface/assets/js/app.js
* creating web_interface/priv/static/robots.txt
* creating web_interface/priv/static/images/phoenix.png
* creating web_interface/priv/static/favicon.ico

Fetch and install dependencies? [Yn] y
* running mix deps.get
* running mix deps.compile

We are almost there! The following steps are missing:

    $ cd web_interface

Start your Phoenix app with:

    $ mix phx.server

You can also run your app inside IEx (Interactive Elixir) as:

    $ iex -S mix phx.server
user_7031610
Related