How to access public assets on both server and client?

import { readdir } from "node:fs/promises";
import path from "node:path";
import type { ServerSetupFn } from "wasp/server";

let animationFilenames: string[] | undefined = undefined;

// get all filenames from the `public/animations` directory
const _getAnimationFilenames = async () => {
    try {
        const animationFilenames = await readdir(
            path.resolve("./../../web-app/public/animations"),
            "utf8",
        );
        console.log(`🔎 ${animationFilenames.length || 0} animations found`);
        // get only .lottie files
        return animationFilenames.filter((animationFilename) =>
            animationFilename.endsWith(".lottie"),
        );
    } catch {
        return [];
    }
};

export const serverSetup: ServerSetupFn = async () => {
    animationFilenames = await _getAnimationFilenames();
};

// store filenames for later use - https://wasp-lang.dev/docs/project/server-config#storing-some-values-for-later-use
export const getAnimationFilenames = () => animationFilenames;