Caddy Rewritte rule for Angular application

Hello! I have an Angular4 application (SPA application), right now I am serving that site using Caddy but I hadn’t been able to configure the proper rewritte rule to allow users to paste the link in the browser and then we should render the proper content.

I found this post that deals with rewritte in SPA applications, before I had a 404 error because that directory doesn’t exist, then I added the rule as explained in that post and now I am not getting the 404 error anymore, but, now it’s still in the index page no matter wich URL the user writte.

What could be the correct rewritte rule to let angular make the redirection by itself?

Are you sure you’ve cleared your browser cache? :thinking:

hello! yes, am sure. Example, I paste this url: https://mywebsite.com/teams and it’s transformed to https://mywebsite.com/?%2Fteams=
would that be related with the problem?

The correct rewrite is the one in the thread; rewrite { to {path} {path}/ /index.html }.

Rewrites don’t alter or correct the URI requested by the client - they simply serve the rewritten resource to the originally-requested URI. That means an SPA doing frontend routing should have the right URL from the browser.

When you say transformed, what do you mean, exactly? Are you being redirected by location header, or is your SPA altering your URL after the request is completed? If it’s the latter, there’s not much Caddy can do - it’s received the request and delivered the SPA payload, as configured, and the rest is done by the app.

hello! what I mean is that the text in the URL changes, I pasted in the browser the URL https://mywebsite.com/teams so, when the browser opens the site then that text is changed to https://mywebsite.com/?%2Fteams= but it’s still loading the index, is not loading the view that I need.

It works in apache by setting this rule:

Options -MultiViews
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [QSA,L]

Correct me if I’m wrong, but… With respect to the web server, isn’t the index the only thing that gets sent, ever?

My understanding is that SPAs are a single payload that is supposed to render the correct content based on the URL, entirely within the front-end client/browser.

It really sounds like Caddy is sending the index to the client just fine, but the SPA isn’t reading/handling the URL correctly and rendering the wrong content.

The Apache configuration you gave is functionally identical to the Caddyfile config:

rewrite {
  to {path} {path}/ /index.html
}

with that I am always redirected to the index and with not parameters in the url, no uri, etc

What else is in your Caddyfile? Unless you’ve written redir statements into your Caddyfile, that isn’t Caddy - your SPA is doing that.

There’s nowhere for Caddy to include parameters in the URI - at the most basic level, the browser is requesting whatever URI it pleases, and Caddy is just giving the index.html file back, exactly like Apache or nginx would be doing. Caddy isn’t modifying your URL, and it has no power to instruct the SPA which content to render in the user’s browser.

I have this configuration:

mydomain.com {
   root /path/to/project/dist
   gzip
   rewrite {
      to {path} {path} /index.html
   }
}

And tried also with:
to {path}/ {path} /index.html

If that’s everything, Caddy’s got no bearing on what URL is in your browser or whether your app is rendering the home page or the correctly routed page. It’s just supplying an index file to any request that isn’t for an existing file on disk, and gzipping it.

Just to confirm, it works as expected in Apache?

yes, in apache it’s working, indeed I also had it in nginx working, I had this:

try_files $uri $uri/ /index.html?path=$uri&$args;

Give this a shot and see if it makes a difference:

rewrite {
  to {path} {path}/ /index.html?path={uri}&{query}
}

I did it but nothing, pretty strange!! however I notice that with that new rule I receive a dirty route, example:

https://mydomain.com/?%2FRoute%2FSubroute=

When in apache and nginx I get clean routes as:

https://mydomain.com/Route/Subroute

Is that a missconfiguration that I might have?

I’m not sure. To the best of my knowledge, Caddy has no bearing over what your app does once it’s been delivered to the client. I can’t explain how it could be interfering because I didn’t think it was a possibility. Unless it’s bad caching, or gzip is somehow modifying the content (?), there’s definitely nothing in your Caddyfile that deals with the pretty URLs or any behaviour whatsoever of your SPA once the browser loads it.

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.