question: include multiple JavaScript files in template.

[xtractalpha]

Hi!

Big thanks to @greenpau for all the hard work!

I have a question. I want to use a custom template made with Next.JS.

I watched your video (link below), which is great, but it doesn't fit my situation. I need to add many JavaScript files, as shown in the directory below.

I know I can add individual JavaScript files like this:

{
  security {
    authentication portal myportal {
      ui {
        custom js path {env.HOME}/.local/caddy/ui/custom/script.js
      }
    }
  }
}

But I think this won't work for me because it doesn't keep the folder structure, right?

So, I thought about adding the whole folder to my Docker container and keeping the links to the JavaScript files the same as in the original HTML.

    volumes:
      - ./styling/templates/_next:/etc/caddy/auth/local/templates/_next

In the Caddyfile, I set: template login /etc/caddy/auth/local/templates/login.html

But when I visit the URL, the page has no CSS or JavaScript.

The logs show 302 errors for the CSS and JavaScript files. I guess it's because I'm not logged in, so all requests go to the /auth URL.

I know that I can bypass authorization for specific URIs, but I don't know if that is a good practice...

What should I do in this situation?

Directory:

.
├── 404.html
├── _next
│   ├── EsPVUIhhzDmSIm7tc9yxT
│   └── static
│       ├── EsPVUIhhzDmSIm7tc9yxT
│       │   ├── _buildManifest.js
│       │   └── _ssgManifest.js
│       ├── chunks
│       │   ├── 390-5bfc733bf7042efe.js
│       │   ├── 864-66d38905c55eb12b.js
│       │   ├── app
│       │   │   ├── _not-found-6e6d767b21ac37cc.js
│       │   │   ├── login
│       │   │   │   └── page-c54048722ac01d68.js
│       │   │   ├── layout-54706415826105c0.js
│       │   │   └── page-4014f805c09ef1ff.js
│       │   ├── fd9d1056-696ab87dc288e768.js
│       │   ├── framework-8883d1e9be70c3da.js
│       │   ├── main-39f387375ccd9d58.js
│       │   ├── main-app-5dd2546c62f8c53b.js
│       │   ├── pages
│       │   │   ├── _app-27277a117f49dcf1.js
│       │   │   └── _error-91a5938854a6f402.js
│       │   ├── polyfills-c67a75d1b6f99dc8.js
│       │   └── webpack-6328bd5ac0e65bbc.js
│       └── css
│           └── 8800b1970058cdcb.css
├── login.html
├── logo_black.png
└── logo_white.png

Video link: https://www.youtube.com/watch?v=20XOn-RBIX0

[xtractalpha]

I've found the solution. Silly me!

It was quite straightforward.

For anyone else facing the same challenge, just set up a file server, and you're good to go!

    handle_path /_next* {
        authorize with mypolicy
        root * /etc/caddy/auth/local/templates/_next/
        file_server
    }

[greenpau]

@xtractalpha , could you please write a testimonial for your use of the project? Please see https://docs.authcrunch.com/help-needed for details.

[greenpau]

@xtractalpha , also, if you still use custom js path, please share your code for reference.