Is it possible to serve the frontend of Redwoodjs using a basepath different than the root address of my page?

Get Help and Help Others
1

I’m trying to publish the frontend of my Redwoodjs application behind a proxy with Apache… Let’s say I have a single-page application with the following Routes.jsx file:

import { Set, Router, Route } from '@redwoodjs/router'

import ScaffoldLayout from 'src/layouts/ScaffoldLayout'

const Routes = () => {
  return (
    <Router>
      <Route path="/myapp" page={HomePage} name="home" />
      <Route notfound page={NotFoundPage} />
    </Router>
  )
}

export default Routes

Basically, I’ve build my frontend with:

yarn rw build web

And then I served it with:

yarn rw serve web

After this it’ll serve my frontend on http://localhost:8910/myapp , which works perfectly fine, the problem starts when I try to put this application behind a proxy like Apache using a basepath different / (being in a different basepath is a requirement in my case)… Let’s say for example that I try to publish it on http://mypage.com/test/myapp with the Apache configuration:

    ServerName mypage.com

    <Location "/test/">
        ProxyPass http://localhost:8910/
        ProxyPassReverse http://localhost:8910/
    </Location>

Then I see the following errors on my page:

image
image1166×379 25.5 KB

I know I can fix those errors with some rewrite rules as:

    ServerName mypage.com

    RewriteEngine On
    RewriteCond %{REQUEST_URI} !^/test/
    RewriteRule ^/(.*)$ /test/$1 [R=301,L]
    RewriteRule ^/favicon\.png$ /test/favicon.png [R=301,L]

    <Location "/test/">
        ProxyPass http://localhost:8910/
        ProxyPassReverse http://localhost:8910/
    </Location>

However, now my Redwoodjs application behind the reverse proxy doesn’t find the page for my application, and it doesn’t show any error as well:

image
image1913×640 27 KB

It doesn’t make sense to me because the local address http://localhost:8910/myapp works fine, so http://mypage.com/test/myapp should work like that as well, shouldn’t it? The problem here is that even if I change the route of my application in the Routes.jsx file, the command yarn rw serve web will still serve some files on the path / and that’s what’s causing the problem here I think.

Is there any way of completely changing the base path of the front end of my RedwoodJS application? Just so I can use it behind a reverse proxy like Apache without too many extra configurations?

2

Hi @ramuyk I’m on issue triage this week, so am responding even though I don’t have much/any Apache config experience – and I’ll have to ask the community here to see if anyone has a solution.

That said, there is a web toml config setting for host: App Configuration | RedwoodJS Docs

But that might just be for App Configuration | RedwoodJS Docs

The only thing I could suggest trying is to see if:

<Route path="/test/myapp" page={HomePage} name="home" />

works when deployed?

3

Hi @dthyresson, thanks for the response. I’ve tested your recommendation writing path="/test/myapp" and it worked with some tweaks in the rewrite rules of Apache:

    ServerName mypage.com

    RewriteEngine On
    RewriteCond %{REQUEST_URI} !^/test/
    RewriteRule ^/assets/(.*)$ /test/assets/$1 [R=301,L]
    RewriteRule ^/favicon\.png$ /test/favicon.png [R=301,L]
 
    <Location "/test/">
        ProxyPass http://serverip/
        ProxyPassReverse http://serverip/
    </Location>

Even though it works fine, I’ve realized that if I have in my server different applications with an /assets folder in the root /, I’ll face some conflicts and I’m not really sure how I’d solve it in Apache…

Do you see any tweak I can do in my RedwoodJS application in a way that I’ll change all routes of my application to be after /test/ instead of /? The problem is that even if I add my home page to:

<Route path="/test/myapp" page={HomePage} name="home" />

There are still files being served on /… Like the folder /assets and the file /favicon.png when I serve it with yarn rw serve web… I’ve tried creating a folder in web/dist/test and then moved the assets folder to it, but my built application doesn’t work if I serve it like this. It’d be nice if I could solve this issue directly in the RedwoodJS application making it change all routes of the application to a different one than /…

4

@dom Do you have any thoughts here about routing? Might Docker and the upcoming serverful rework make rewrites, proxies, paths more flexible?

5

I managed to make it work on Apache, it was very close to the solution on my last question. If I use a referer in the condition it won’t conflict with other applications that also have an assets folder on /:

    ServerName mypage.com

    RewriteEngine On
    RewriteCond %{HTTP_REFERER} ^https://mypage\.com/test/ [NC]
    RewriteRule ^/assets/(.*)$ /test/assets/$1 [R=301,L]
    RewriteRule ^/favicon\.png$ /test/favicon.png [R=301,L]
 
    <Location "/">
        ProxyPass http://serverip:10000/
        ProxyPassReverse http://serverip:10000/
    </Location>

    <Location "/test/">
        ProxyPass http://serverip:8910/
        ProxyPassReverse http://serverip:8910/
    </Location>

This way I can workaround the routes of RedwoodJS that are always served on /.