Angular SPA in sub directory

1. Caddy version (caddy version):

v2.4.3

2. How I run Caddy:

a. System environment:

Debian 10 x64

Folder structure inside test project:
caddy (caddy executable)
Caddyfile
myapp (Angular project)

b. Command:

./caddy run

c. Service/unit/compose file:

No service or docker-compose file.

d. My complete Caddyfile or JSON config:

{
	auto_https off
}

http://localhost:8080 {
	handle /app/* {
		root * myapp/dist/myapp
		try_files {path} {path}/ /index.html
		file_server
	}
}

3. The problem I’m having:

I want to serve my Angular App from the sub directory. By example: http://localhost:8080/app should display the Angular Application. But it doesn’t work.

The Angular App is build with:

ng build -- --base-href '/app/' --deploy-url '/app/'

4. Error messages and/or full log output:

http://localhost:8080/app → index.html not found
http://localhost:8080/app/ → index.html found but without resources
http://localhost:8080/app/index.html → index.html found but without resources

5. What I already tried:

  • Compile the Angular app without base-href and deploy-url parameters.
  • Following configuration works if not in in a sub directory:
{
	auto_https off
}

http://localhost:8080
root * myapp/dist/myapp
try_files {path} /
file_server

6. Links to relevant resources:

I did miss handle_path. I also changed /app/* to /app*
Seems to work now.

{
	auto_https off
}

http://localhost:8080 {
	handle_path /app* {
		root * myapp/dist/myapp
		try_files {path} {path}/ /index.html
		file_server
	}
}

If there is a better or easier solution, please let me know.

1 Like

This topic was automatically closed after 30 days. New replies are no longer allowed.