Search code examples
elixirphoenix-live-view

How to convert old liveview app to new Phoenix version?


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?

Solution

  • 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