Wasp•4w ago

Is it possible to dynamically import a static client asset from the server?

Let's say I have a ts/js file that exports some JSON that I would like a server query/action to have access to, but I want to pass the file name to the query/action. Currently I have query code like this:

const getContractABI: GetContractABI = async ({address}, context) => {
  const {default: contract} = await import(`contracts/${address}.js`);

  return contract.abi;
};

const getContractABI: GetContractABI = async ({address}, context) => {
  const {default: contract} = await import(`contracts/${address}.js`);

  return contract.abi;
};

Where would I put that ts/js file and is it even possible to do what I'm trying here?

7 Replies

kapa.ai•4w ago

Hi @Webby Vanderhack. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources, there are some challenges with what you're trying to do. Let me explain the current state of static assets in Wasp and how they're handled differently on the client and server. Client vs Server Static Assets In Wasp, static assets are primarily designed to work on the client side. You can import assets like images directly in your client code, and they'll be properly bundled and served:

import imgUrl from './img.png'  
  
function App() {  
  return <img src={imgUrl} alt="img" />  
}

import imgUrl from './img.png'  
  
function App() {  
  return <img src={imgUrl} alt="img" />  
}

For the client, you also have the option to use the public directory for assets that need to be served at the root path The public Directory. Server-Side Static Assets Challenge However, there's a known limitation with server-side static assets. As mentioned in a GitHub issue, when deploying a Wasp app, static files in the server code often get skipped by the TypeScript compiler and don't make it into the final build Support for static assets in Wasp project. The dynamic import approach you're trying to use (import(contracts/${address}.js)) is problematic on the server side because: 1. The server build process might not include these files 2. Dynamic imports with template literals may not work as expected in the Node.js environment that Wasp uses for the server Possible Solutions There have been discussions about adding a special directory like server/assets/ that would be copied to the built server code during wasp build, but this doesn't appear to be implemented yet. For your specific use case, you might consider: 1. Using a fixed set of imports: Instead of dynamic imports, import all possible contract files explicitly at the top of your file and then select the right one based on the address. 2. Store the contract ABIs in your database: This would allow you to retrieve them by address without needing file imports. 3. Use the file system directly: Instead of imports, you could use Node.js's fs module to read the files at runtime, but you'd need to ensure the files are included in your deployment. There's also an open issue specifically about importing JSON files and reading static files on the server side in Wasp Explain in docs how to import JSON files / read static files in Wasp on the server, which indicates this is a known pain point that the Wasp team is aware of. If you need more specific guidance, you might want to ask in the Wasp Discord community where team members have previously provided workarounds for similar issues. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Webby Vanderhack, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

miho•4w ago

I wouldn't use import here as the source files might not be available when you build the app for deployment. I'd use something as simple as fs.readFile and parse the JSON with JSON.parse. The problem to solve is "where are the files located" and this is an open issue for Wasp to have a recommeded way of doing it: https://github.com/wasp-lang/wasp/issues/1564 You can have a folder on your server that your app has access to e.g. you fetch the static files in a certain folder from S3 if the folder doesn't exist on the server. Ideally, you'd mount the volume for that folder so it's presistent and the files survive app restarts (if using cloud providers to host the app) @kapa.ai anything else to add?

GitHub

Explain in docs how to import JSON files / read static files in Was...

Right now it is a bit tricky because you can't directly import .json with node (at least 18), and people get surprised with it because error message is confusing (claims there is no file). I ex...

kapa.ai•4w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You're absolutely right about the challenges with using import for dynamic server-side assets. Your approach using fs.readFile is a good alternative for accessing static files on the server. Regarding file location, there are a few additional considerations: 1. Volume persistence: Your suggestion about mounting a volume for persistent storage is spot on. This aligns with discussions in the Wasp community about handling persistent data. As mentioned in one GitHub issue, using mount binds to specific locations in the project directory could be a good starting point for persistence GitHub Issue #173. 2. Server assets location: For Wasp 0.12+, you can place assets at the src/ level if they're not client-specific (meaning you might use them on the server) GitHub Issue #1919. 3. Express static files: If you need to serve these files to clients, you could use Express's static file serving capabilities through Wasp's serverSetup function. As mentioned in a Discord thread, you can do something like:

app.use(express.static('public'))

app.use(express.static('public'))

This would allow you to set up a static file download API Discord support thread. 4. File watching considerations: Be aware that creating files programmatically on the server might trigger reloading due to how Wasp watches for file changes. This is a known issue that might affect your workflow if you're dynamically generating files GitHub Issue #1881. The approach of fetching from S3 as a fallback is a good pattern, especially since Wasp apps are typically deployed to environments where local file storage isn't guaranteed to be persistent. One thing to note is that if you're working with a lot of files, you might hit file descriptor limits, which has been reported by some Wasp users. In that case, you might need to adjust your system's open file limits GitHub Issue #1919. I think your approach is solid given the current state of static asset handling in Wasp! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @miho, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

Kynetix•5d ago

@kapa.ai I'm building a chatbot where the api handles the heavy load (LLM setup, etc), and I have the system prompts in a text file on the server. I tried fs.readFile(dirname + 'instructions.txt'), but it says that "dirname is not defined". After doing the following import { fileURLToPath } from 'url'; const __dirname = path.dirname(fileURLToPath(import.meta.url)); that fixed it, however it seems that the file isn't deployed when testing, because it's looking in .wasp/out/server/bundle/.... and the file isn't there. What's the best way to go about this?

kapa.ai•5d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You're encountering a common challenge with server-side static assets in Wasp. This is a known issue that several Wasp users have faced. The Problem The issue you're experiencing happens because: 1. When Wasp builds your app for deployment, it doesn't automatically include static files like your instructions.txt in the server bundle 2. The TypeScript compiler skips these non-code files during the build process 3. As a result, your file isn't available at the expected path in the deployed environment This is documented in a GitHub issue about server-side static assets in Wasp: Support for static assets in Wasp project. Possible Solutions Here are a few approaches you could take: 1. Custom Dockerfile You can create a custom Dockerfile in your project root that copies your static files into the build:

# In your project root, create a Dockerfile that copies your file
COPY ./instructions.txt .wasp/build/server/bundle/instructions.txt

# In your project root, create a Dockerfile that copies your file
COPY ./instructions.txt .wasp/build/server/bundle/instructions.txt

Wasp will use this custom Dockerfile instead of the default one when building your server Customizing the Dockerfile. 2. Store Content in Database Instead of using a file, consider storing your system prompts in your database. This ensures they're always available regardless of deployment environment. 3. Environment Variables For shorter prompts, you could use environment variables to store the content. 4. Server Setup Function You could fetch the content from an external source (like S3) during server startup:

// In your server setup function
export const mySetupFunction = async ({ app, server }) => {
  // Fetch your instructions from S3 or another external source
  // Store them in memory or in a location that persists
}

// In your server setup function
export const mySetupFunction = async ({ app, server }) => {
  // Fetch your instructions from S3 or another external source
  // Store them in memory or in a location that persists
}

Then configure this in your main.wasp:

app MyApp {
  title: "My app",
  server: {
    setupFn: import { mySetupFunction } from "@src/myServerSetupCode.js",
  }
}

app MyApp {
  title: "My app",
  server: {
    setupFn: import { mySetupFunction } from "@src/myServerSetupCode.js",
  }
}

As mentioned in the Server Config documentation. Future Improvements The Wasp team is aware of this limitation. There's an open issue specifically about handling static files on the server side: Explain in docs how to import JSON files / read static files in Wasp on the server. They've discussed potentially adding a special directory like server/assets/ that would be automatically copied to the built server code during wasp build, but this feature isn't implemented yet. For now, the custom Dockerfile approach is likely your most straightforward solution if you need to keep using a text file. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Kynetix, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

toticozeni•3d ago

If you want to keep your instructions server side, another workaround might be to hold instructions inside of template strings in typescript/javascript. That way they will be compiled with rest of the project. E.g. instructions.ts

export const GLOBAL_SYSTEM_PROMPT = `You are an professional blog post writer...`

export const GLOBAL_SYSTEM_PROMPT = `You are an professional blog post writer...`

There is also this old thread which discussed it a bit: https://discord.com/channels/686873244791210014/1171780998699171841

Kynetix•2d ago

@franjo thanks, that's what I ended up doing.

Gaming

Programming

Is it possible to dynamically import a static client asset from the server?

Did you find this page helpful?