Justin Vandenberg Posts - Answer Overflow

Justin Vandenberg

•Created by Justin Vandenberg on 12/5/2024 in #🙋questions

How to access public assets on both server and client?

wasp version: 0.15.1 Hey all, I'm currently working on a project where I need to assign Lottie animations files randomly when an entry is created. I had thought I had solved it, but it doesn't work after deploying to the test environment. I set up a server setupFn that searches the file system (/public/animations) for .lottie files and stores them. Similar to this: https://wasp-lang.dev/docs/project/server-config#storing-some-values-for-later-use. However, when built, the setupFn either doesn't run or can't find the files. They are in the same location in both the .wasp/out and .wasp/build directories. I need these filenames available for both an action and the client. This is my setupFn:

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;

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;

Am I doing something wrong? Does any one have any other ideas to accomplish the same result? And possibly, any tips on debugging the setupFn during the build process? Thanks, Justin

14 replies

Gaming

Programming