How to properly load css and setup auth in an umbrella application using phoenix v1.7.0-rc.0?

I’m running into a number of issues when attempting to use the latest version of phoenix in an umbrella application. My process is as follows:

  1. mix new auth_umbrella --umbrella
  2. cd auth_umbrella/apps
  3. mix auth --no-ecto (Y to install deps)
  4. cd auth
  5. Add {Phoenix.PubSub, name: Auth.PubSub} to supervision tree

Here is where my first issue arrises. When I start the server using mix phx.server everything compiles and starts with no errors but when I visit localhost:4000 I’m greeted with an unstyled page. Checking the sources in dev tools shows that app.css is present. When I generate a standalone phoenix app the landing page is styled as expected.

The next error occurs when attempting to add authentication:
6. cd ../ to return to apps directory
7. mix new auth_context --sup
8. cd auth (the phoenix app)
9. mix phx.gen.auth Accounts User users

Step 9 yields the error:

** (Mix) no context_app configured for current application auth.

Add the context_app generators config in config.exs, or pass the
--context-app option explicitly to the generators. For example:

via config:

  config :auth, :generators,
   context_app: :some_app

via cli option:

  mix phx.gen.[task] --context-app some_app

Note: cli option only works when `context_app` is not set to `false`
in the config.

So in auth_umbrella/config/config.exs I set the context app to auth_context:

config :auth,
  generators: [context_app: :auth_context]

and when I repeat step 9 I get the same error. I try to use the cli option with both mix phx.gen.auth Accounts User users --context-app :auth_context and mix phx.gen.auth Accounts User users --context-app auth_context . I get the following new error message:

** (Mix) Could not invoke task "phx.gen.auth": 1 error found!
--context-app : Unknown option

Nitpick: this isn’t the same configuration that the error message suggested - it passes two arguments to config instead of three

How many folders end up in your apps directory? mix new --umbrella should already create two (one for schemas / contexts / etc, one for Phoenix stuff) so I don’t understand why you’re creating more manually.

Hello thanks for your answer.

I didn’t even know that phoenix offered a generator that will build the entire umbrella for me, I thought I had to do it manually. I never ran mix app_name --umbrella (docs) only mix new app_name --umbrella (docs) to generate an empty umbrella project.

There are two folders in my app directory, one is a phoenix app generated by running mix app_name (docs) in the apps directory and the other is a plain elixir app with a supervisor generated by running mix new app_name --sup in the apps directory. My goal was to use the non-phoenix, supervised app as the app that held my “contexts”.

I decided to give the generator provided by phoenix to build the umbrella from scratch and I am immediately met with an error. Running mix app_name --umbrella yields the following output:

We are almost there! The following steps are missing:

    $ cd app_name_umbrella

Then configure your database in config/dev.exs and run:

    $ mix ecto.create

Running mix ecto.create yields the following error:

Unchecked dependencies for environment dev:
    phoenix (Hex package)
    the dependency phoenix 1.7.0-rc.0

    > In apps/app_name_web/mix.exs:
      {:phoenix, "~> 1.7.0-rc.0", [env: :prod, hex: "phoenix", override: true, repo: "hexpm"]}

    does not match the requirement specified

    > In deps/phoenix_live_view/mix.exs:
      {:phoenix, "~> 1.6.15 or ~> 1.7.0", [env: :prod, hex: "phoenix", repo: "hexpm", optional: false]}

    Ensure they match or specify one of the above in your deps and set "override: true"

**** (Mix) Can't continue due to errors on dependencies

The reason why I call it an error is because:

  1. At this point there is no custom code, this is all code generated by phoenix, so shouldn’t it just work?
  2. Inspecting apps/app_name_web/mix.exs has {:phoenix, "~> 1.7.0-rc.0", override: true} for the phoenix dependency

How can setting override: true fix the problem if override: true is already present? Does this need to be added to the mix.exs file belonging to the umbrella instead of the one in the apps?

The solution is simple, add {:phoenix, "~> 1.7.0-rc.0", [override: true]} in the umbrella root level mix.exs. The answer was found in Dependency conversion error in umbrella #4684

More discussion about this topic here
And a “warning” here