plugins/static

[giscus[bot]]

plugins/static

Plugin for Elysia that adds support for serving static files/folders for Elysia Server. Start by installing the plugin with "bun add @elysiajs/static".

https://elysiajs.com/plugins/static

[blackfyre]

Can I have the static pluging serve content for the site root?

[RobertHernandezArenas]

I achieved this by making the following configuration:

import { Elysia, file } from 'elysia';
import { staticPlugin } from '@elysiajs/static';

export const API = new Elysia()

  .get('/', () => file('./public/index.html'))

  .use(staticPlugin())

  .listen(3000);

I hope it will be of help to you...

[Serhioromano]

I used like this

app.use(staticPlugin({ assets: "ui", prefix: "" }))

my SPA is in ui folder of the root project. Works so far.

[kelarov]

@Serhioromano, do you mean your ui folder is at the same level as src or inside src?
Also, are you using React for the frontend? The example that we have in the Elysia repo uses React, Tanstack Query, etc., but I wouldn't like to use React. Even something else like Svelte or Solid would do, but following that example didn't really work, so...

[Serhioromano]

@Serhioromano, do you mean your ui folder is at the same level as src or inside src? Also, are you using React for the frontend? The example that we have in the Elysia repo uses React, Tanstack Query, etc., but I wouldn't like to use React. Even something else like Svelte or Solid would do, but following that example didn't really work, so...

No, it is in root directory. I use Quazar to build frontend SPA. Right now thought Elysia alter all files in that folder, i'll look for way not to later when I really need it. Right now it is only proof of concept.

[deckyfx]

Seems this plugin doesn't work for newly uploaded files,
A fresh upload will always give Not found
need to restart the server for the image to appear,

[Mohamed-El-Sharqawy]

i'm facing the same issue currently and getting NOT_FOUND while the file is stored normally.

[shiqocred]

🦊 Elysia is running at localhost:3002
164 |         if (shouldIgnore(pathName)) throw new NotFoundError();
165 |         const cache = fileCache.get(pathName);
166 |         if (cache) return cache.clone();
167 |         try {
168 |           const fileStat = await fs.stat(pathName).catch(() => null);
169 |           if (!fileStat) throw new NotFoundError();
                                     ^
error: NOT_FOUND
 status: 404,
   code: "NOT_FOUND"

      at <anonymous> (/Users/macbookpro/Documents/project/monorepo/sci-master/node_modules/.pnpm/@elysiajs+static@1.4.7_elysia@1.4.22_@sinclair+typebox@0.34.48_exact-mirror@0.2.6_@sinc_894428d145c519d7fe4e3799772fabe9/node_modules/@elysiajs/static/dist/index.mjs:169:32)
      at async handle (file:///Users/macbookpro/Documents/project/monorepo/sci-master/node_modules/.pnpm/elysia@1.4.22_@sinclair+typebox@0.34.48_exact-mirror@0.2.6_@sinclair+typebox@0.34.48__f_22fc0dc8ac9c2b02f26b937f6751f981/node_modules/elysia/dist/bun/index.js:7:37)

does anyone have any suggestions?

new Elysia().use(staticPlugin({ prefix: "/" }))

i can display image but server give that log and the url cannot display with another website, like i need display in my nextjs website and give 400 error code "url" parameter is not allowed

I'm still in development mode, if development mode is like this i am not sure about production mode

[Serhioromano]

Try new Elysia().use(staticPlugin({ assets: "public", prefix: "" })). Create public/index.html file in project root not in src.

[shiqocred]

yups, but there is no change still same error

[Serhioromano]

yups, but there is no change still same error

How do you run that? Do you run or compile? It won't work with compilation since you need to move static folder to build directory.

[ssrqm]

How i config for a SPA ？

We konw bun can do that:

Single Page Apps (SPA)
When you pass a single .html file to Bun, Bun will use it as a fallback route for all paths. This makes it perfect for single page apps that use client-side routing:

 bun index.html 

[molszanski]

In latest bun/elysia/static plugin versions you need to add bunFullstack: true, to options

import { staticPlugin } from "@elysiajs/static"
import { Elysia } from "elysia"

export const tools = new Elysia()
  .get("/", ({ redirect }) => redirect("/tools", 302))
  .use(
    staticPlugin({
      // URL where app is hosted by Elysia
      prefix: "/tools",

      // path location to the app source folder
      assets: "src/frontend/",

      // new option for latest bun and Elysia Static plugin
      // Use bun bundler to package SPA app on the fly
      bunFullstack: true,
    }),
  )

[ChrisTN-SM1]

When i try to fetch a file/image from a docker container, it returns a 404 error.
Starting the application without docker works flawlessly, can someone help me?