How to handle 404 with paketo-buildpacks/web-servers

[aleksander-dorcov-94]

When I build my angular app with

pack build frontend-app \
  --builder paketobuildpacks/builder-jammy-base \
  --buildpack paketo-buildpacks/web-servers \
  --path . \
  --env "BP_NODE_RUN_SCRIPTS=build" \
  --env "BP_WEB_SERVER=nginx" \
  --env "BP_WEB_SERVER_ROOT=dist/hubject-front-end/browser"

the container is working, but if I manually type in the browser a wring url like http://localhost:8080/worng-url and hit enter i get not found.

I know what the issue is, I need

  location / {
    try_files $uri $uri/ /index.html =404;
  }

in my nginx.conf, but how do I place it there.?
Also can I just tell the buildpacks to use an nginx.conf from my file system? It was not mentioned here
Docs
And if you know a smarter way of building SPA angular apps and I am using the worng builders, just tell me.

[dmikusa]

It sounds like you want push-state support. That's typically what you want for a SPA app. Try setting BP_WEB_SERVER_ENABLE_PUSH_STATE=true when you build.

https://paketo.io/docs/howto/web-servers/#enable-push-state-routing-1

Also can I just tell the buildpacks to use an nginx.conf from my file system?

It will generate one by default, but you can override if you just put nginx.conf in the root of your app files. (i.e. --path, which is . for you).

And if you know a smarter way of building SPA angular apps and I am using the worng builders, just tell me.

I use this for a number of React.js apps and it works great. Your milage may vary, but I find it's a good place to start.

We did go with a custom nginx.conf but that was to have better control over how it's caching files. The default caching is a little wonky because by default buildpacks will squash all the timestamps so the app image is reproducible. This is a problem because some HTTP caching works on the last modified date.