how to configure refine framework to present the url in a sub directory

[tiago-zis]

I have a project in refine which is installed in a sub directory (eg: http.site.com/subfolder).

However, when accessing the site, the url assembled by refine is (http.site.com/login).

How do I make refine accept the subfolder and show the url as follows (http.site.com/subfolder/login)?

[aliemir]

Hey @tiago-zis, I assume you already defined your apps login route as /subfolder/login. The default /login redirect may be happening due to the lack of redirectTo property in check method of the authProvider 🤔 Or you may want to define a custom path in Authenticated component if it is the one responsible with the redirect.

Which platform are you using? If it's Next.js or Remix, you may also want to check the getServerSideProps or loader methods for redirects. If not, probably the Authenticated component is the one responsible with the redirects, you can pass redirectOnFail="subfolder/login" to enforce the redirect path.

Also can you give me a bit more info about the structure of your app and how you achieved serving the app in the sub directory? Is it done through the router options or manually by defining custom routes? 🤔

[tiago-zis]

Hi

I'm using this refine template in the font and https://example.admin.refine.dev/ and the index.html application in the build is in a subfolder that is located at the root of the web server.

But when I use the url httt://site.com/sufolder/login the apache server returns the content and the browser automatically changes the url to httt://site.com/login.

I can intervene in the other urls of the system to work as if I were in the subdirectory (ex: httt://site.com/sufolder/users or httt://site.com/sufolder/projects) . But the login url does not work in any of the hypotheses that I implemented in the system.

[aliemir]

Can you try using basename prop of the BrowserRouter component. When serving the app from a subdirectory with react-router-dom, you'll need the basename to prepend the subdirectory to the URLs handled by the react-router-dom.

Example

const App = () => {
  return (
    <Refine {...}>
      <BrowserRouter basename="my-subpath">
        {...}
      </BrowserRouter>
    </Refine>
  )
}