Fl4m3Ph03n1x

Fl4m3Ph03n1x

Fresh new 1.7 Phoenix app inside umbrella fails build

Background

I have a fresh umbrella app and I am trying to create a Phoenix app inside it. However, even though I can create the Phoenix app inside the umbrella, I cannot build it successfully.

Problem

I am creating a phoenix app inside a fresh umbrella project like this:

  1. mix new test_app --umbrella
  2. cd apps
  3. mix phx.new web_interface --no-dashboard --no-ecto --no-gettext --no-mailer --live

These commands run fine. However when I try to setup the app, something breaks:

  1. cd web_interface
  2. mix setup returns:

08:14:50.318 [warning] tailwind version is not configured. Please set it in your config files:

config :tailwind, :version, “3.2.4”

Browserslist: caniuse-lite is outdated. Please run:
npx update-browserslist-db@latest
Why you should do it regularly: GitHub - browserslist/update-db: CLI tool to update caniuse-lite to refresh target browsers from Browserslist config

Rebuilding…

To me, this is odd. Everything is fresh new, so I was really not expecting any warning. But it gets worse. Once rebuilding is done, I get an actual error:

Done in 200ms.

08:14:52.146 [warning] esbuild version is not configured. Please set it in your config files:

config :esbuild, :version, "0.16.4"

** (RuntimeError) no arguments passed to esbuild
(esbuild 0.7.0) lib/esbuild.ex:170: Esbuild.run/2
(esbuild 0.7.0) lib/mix/tasks/esbuild.ex:49: Mix.Tasks.Esbuild.install_and_run/1
(mix 1.14.1) lib/mix/task.ex:421: anonymous fn/3 in Mix.Task.run_task/4
(mix 1.14.1) lib/mix/task.ex:479: Mix.Task.run_alias/6
(mix 1.14.1) lib/mix/cli.ex:84: Mix.CLI.run_task/2

At first I thought this was happening because I had something outdated in my machine. So I did some updates:

  1. mix local.hex
  2. mix archive.install hex phx_new

However, this did not fix the issue.

I am running on Windows.

Questions

  1. It is my understanding that if I create a new app inside an umbrella project, elixir is smart enough to detect that and I don’t need to do anything new/different. Is this the case?
  2. IIRC the --live flag became a default in Phoenix 1.6. Is this still case for 1.7? (Meaning all apps are live now, by default?)
  3. Why am I getting this error? How can I fix it?

Marked As Solved

Fl4m3Ph03n1x

Fl4m3Ph03n1x

Answer

The issue here was that I was using an incorrect command when creating the Phoenix app. I was using mix phx.new instead of mix phx.new.web.

To me, this is rather confusing, as from the documentation/tutorials (https://elixir-lang.org/getting-started/mix-otp/dependencies-and-umbrella-projects.html#umbrella-projects) we have this quote:

(…) First of all, since we generated this project inside kv_umbrella/apps, Mix automatically detected the umbrella structure (…)

Which states that when creating an app inside an umbrella project, Mix does have the capacity to detect it and act accordingly.

This does not hold true for Phoenix apps. For reasons beyond my understanding, Phoenix apps do not know their context and thus the user needs to tell mix that the new app will be inside an umbrella project.

This is confusing to me. Sometimes mix is smart enough to know, other times, it isn’t. I don’t know which times it knows and which times it doesn’t.

So, to conclude, given the original questions:

  1. Wrong. Mix detects umbrella projects when creating normal apps. When creating Phoenix apps, it detects nothing. The user must use mix phx.new.web. It is unclear when Mix is able to detect umbrella apps and when its not.
  2. --live flag is now default and not needed.
  3. Because I was creating the Phoenix app with an incorrect assumption and thus using the incorrect command.

Where Next?

Popular Frontend topics Top

davearonson
I’m unit-testing some JS, with Jasmine, and I’d like to check our coverage. We’re not using any front-end framework, nor much JS, so no ...
New
New
ClaudiaGiv
I have a sveltekit project that is using GoTrue library for authentication. In development mode (npm run dev) everything works but when I...
New
Zuber
How to make a website like webnovel and wattpadd where subscribers and logged in user post stories like their own Novel in a website and ...
New
The_Exile
I am new to programming. I started reading Eloquent Javascript 3rd Edition, as the book comes highly recommended as a good place for beg...
/js
New
Fl4m3Ph03n1x
Background I have a a fresh umbrella project with a Phoenix app inside. To create the app I used the following commands: mix new test_a...
New
Fl4m3Ph03n1x
Background I have a Phoenix application, where all pages (expect the login page) have a menu at the top. This menu will therefore only a...
New
harwind
I’m currently working on a front-end development project and I’m facing an issue with aligning items using CSS Flexbox. I want to horizon...
New
jaeyson
would it be backwards if I’m learning react? last time I used UI library (aside from LiveView) was Elm (not much) and that was eons ago.
New
SteelFork2819
hi does anyone know how to render a cloud-stored 3D file and move a camera around in it using native html5 functions? i really don’t know...
New

Other popular topics Top

PragmaticBookshelf
Instantly view the changes you make to an app with stateful hot reload, and define a declarative UI in the same language as the app logic...
New
PragmaticBookshelf
Machine learning can be intimidating, with its reliance on math and algorithms that most programmers don't encounter in their regular wor...
New
PragmaticBookshelf
Write Elixir tests that you can be proud of. Dive into Elixir’s test philosophy and gain mastery over the terminology and concepts that u...
New
Exadra37
Please tell us what is your preferred monitor setup for programming(not gaming) and why you have chosen it. Does your monitor have eye p...
New
dasdom
No chair. I have a standing desk. This post was split into a dedicated thread from our thread about chairs :slight_smile:
New
PragmaticBookshelf
Create efficient, elegant software tests in pytest, Python's most powerful testing framework. Brian Okken @brianokken Edited by Kat...
New
husaindevelop
Inside our android webview app, we are trying to paste the copied content from another app eg (notes) using navigator.clipboard.readtext ...
New
PragmaticBookshelf
Leverage Elixir and the Nx ecosystem to build intelligent applications that solve real-world problems in computer vision, natural languag...
New
AstonJ
This is cool! DEEPSEEK-V3 ON M4 MAC: BLAZING FAST INFERENCE ON APPLE SILICON We just witnessed something incredible: the largest open-s...
New
PragmaticBookshelf
Escape callback hell and ship fast, clean code that reads as smoothly as it runs. Squash bugs and stamp out memory leaks with an intuitiv...
New