Configuring Caddy to be used with a SPA (Angular2)

Hi everyone,

I am currently using Caddy to host a single-page application (SPA -
Angular2). After doing some googling, I arrived at the following Caddyfile configuration:

0.0.0.0 {
  root /srv

  proxy /api goapi:3000

  rewrite {
    if {path} not_match ^/api
    to {path} {path}/ /index.html
  }
}

My issue occurs when I click on a link that takes me to the following web-address: www.webname.com/register. When I refresh that page, I expect it to stay on the same page (e.g. register page). What is happening is that I am redirected to the homepage (e.g. www.webname.com).

Are there ways to configure the Caddyfile so that when I hit refresh, I stay on the same page (register page)?

I have seen a different approach that Angular2 provides where it requires one to use the hash-tag but I don’t want to have hashes in my URL.

Can someone give me any pointers?

Thanks,

Hi @LearningTeacher, welcome to the Caddy community.

Your link took me to some search site, looks like the domain might be parked?

Your rewrite means that a request to example.com:2015/register should, in order:

  1. Attempt to serve the file, /srv/register
  2. Attempt to serve a file called index or default with file extensions .html, .htm, or .txt in the folder /srv/register/
  3. Failing the above, serve /srv/index.html

Now, if Caddy can do options 1 or 2, it always will, regardless of whether the page was navigated to by link or refreshed.

If it must fall back to option 3, the request will be handled by Caddy’s static fileserver. It will be treated as a request for /index.html, and the server will return a 301 redirect to /, which is the correct, canonical way to request an index file. That does not explain the discrepany between the ability to navigate by link vs. refreshing the page, though.

Thanks for the reply Whitestrake!

Sorry about the link. That was actually a fake link used solely for demonstration purposes.

As for the request steps, I think the docs (https://caddyserver.com/docs/rewrite) say the following:

  1. Try the file path (file: register)
  2. Try the directory path (directory: register/)
  3. Default to index.html if the previous 2 fail

When it falls back to option 3, what I am actually getting is the http-status: 304 NOT MODIFIED. Which I think still causes a redirect to “/” like you said. I verified this through Chrome’s dev-tools.

What I would like for to happen is that it stays on “/register” so that the user doesn’t have to navigate back to “/register” from “/”.

So, now, I’m beginning to think that this may be an Angular2 issue and not a Caddy issue because Caddy is doing what it should be doing: serving the static files – mainly: index.html.

Can you offer any insights there?

Thanks for the help!

You should write

to {path} {path}/ /

This happens because a request to /index.html is redirected to /. So a request to /whatever which gets rewritten to /index.html will also redirect to /.

1 Like

Awesome! Thanks Ibguilherme.

That’s what Matt Holt suggested as well (https://github.com/mholt/caddy/issues/1737).

That solved my problem.

Thanks!

As an aside, check out example.com - Wikipedia and .example - Wikipedia for this purpose.

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