Unable to solve routes problem for front-end file server.

Phoenix Forum Questions / Help
,
1

Hello all,
I am facing a problem with Phoenix routing, here is the description…
Setup:- I am putting my VueJs build code into the Phoenix’s priv/static folder.

Here the Phoenix is working as my front-end file server.

Problem:- The app is working fine for the ’ / ’ route, but if I try to navigate any other route through the browser URL, it is again throwing me back to ’ / ’ route.
As a solution, I am manually doing this in my phoenix setup…

    pipe_through :api # Use the default browser stack
    get "/", PageController, :index
    get "/features", PageController, :index
    get "/pricing", PageController, :index end

but this won’t be too helpful as I’ll be having a lot of front-end routes.
what could be the possible solution for this?

2

Could you please show us the routes that do not work instead of a workaround that makes them work?

Could you also please tell us what URLs you try and what you would expect to see instead of the redirect?

Last but not least, we probably need to see some controller code.

3

If you wanted to handle SPA and make your Phoenix server render it if accessed directly, you can use routes with variable parameters for each number of nested route params (bot not each action), this would cover up to 3 parameters (in your example you only have one):

get("/", PageController, :index)
get("/:page", PageController, :index)
get("/:page/:subpage", PageController, :index)
get("/:page/:subpage/:subsubpage", PageController, :index)
1 Like
4

I would scope my api…

This is the kind of routes I use for sharing both api and frontend on the same server

  scope "/api", WhateverWeb do
    pipe_through(:api)
    # api routes
  end

  scope "/", WhateverWeb do
    pipe_through(:browser)
    get("/*path", PageController, :index)
  end

This way, each fake route generated by frontend router would end up in PageController, :index

PS

get("/*path", PageController, :index)

This might be what You are looking for, if You put it at the end of your router, but I still prefer to separate api from the rest, and pass frontend through browser pipe.

1 Like