How to Add CSS and JS to vibe.d templates

[Steven Schveighoffer]

On 1/19/23 11:44 PM, seany wrote:
> Hi
> 
> Howcan one add CSS and JS to vibe.d templates? Here is my setup (vibe.d 
> project initiated with dub using dub init myproject vibe.d):
> 
> ./public:
> main.css  main.js
> 
> ./source:
> app.d
> 
> ./views:
> auth2fa.dt  fail.dt  login.dt  pair.dt  passfail.dt  userfail.dt
> 
> 
> I am trying to add a css file using `link(rel="stylesheet", 
> type="text/css", href="main.css")` in the diet templates, but it has no 
> effect. I took the files from here: 
> https://codepen.io/ricardoolivaalonso/pen/YzyaRPN

Keep in mind, this literally translates to a `link` tag in the HTML. So 
here is what happens:

1. your vibe project is running, and passes out the compiled template to 
the browser.
2. The browser sees the link tag, and attempts to ask the server for the 
file "main.css"
3. The vibe project tries to match that to its routes, and cannot find 
it, and so returns an error.

So this takes 2 steps to remedy:

1. Register a `serveStaticFiles` route with the glob `public/*`. See the 
docs here: https://vibed.org/api/vibe.http.fileserver/serveStaticFiles
2. Change your link to refer to `public/main.css`, instead of just 
`main.css`.

This is how it looks in my code:

```d
  router.get("/public/*", serveStaticFiles(""));
```

And the links look like:

```pug
link(rel="stylesheet",href="/public/css/flatpickr.min.css")
```

as an example. Note that I put my css files into a css subdirectory 
under public, and my javascript files under a js subdirectory. It all 
depends on how you want to set it up.

-Steve