Is there a way to setup 2 frontends in phoenix app?

In the project I have phoenix web app which serves its own frontend (webpack 5, served on "/")

  plug Plug.Static,
    at: "/",
    from: :myapp_web,
    gzip: false,
    only: ~w(css fonts images js robots.txt favicon.ico)

I want to add another frontend (which would be served on /app (this frontend uses API I built). I decided to try adding another frontend as static app, so I configured nuxt to build static files:

export default {
  ssr: false,
  target: 'static'

in nuxt.config.js and configure endpoint properly:

 plug Plug.Static,
    at: "/app",
    from: "myapp-app/dist",
    gzip: false

this allows to work (but only partialy):

you can enter the app by opening localhost:4000/app/index.html and continue using app (since JS is loading partial views generated by nuxt (and changing url by window.href)
when entering the app by inputting localhost:4000/app/posts in the address bar following file does not exist (which is expected, because html partial generated by nuxt is located under /posts/index.html

I want to found a way to fix that problem - by changing paths in Endpoint (when visiting localhost:4000/posts render file from localhost:4000/posts/index.html), however, I don't know how should I do that. I am thinking if this is the right approach and if not how should I proceed?

Solution

Did you tried the following structure for your Nuxt app?

pages/
-- posts/
---- index.vue

Otherwise, we could look for a redirect but I'm curious why /index may not be generated here. Do you have all your routes when you yarn generate?