How to serve assets from a dynamic location in addition to static/*

[michael]

Hi there!

I'm using SvelteKit with Node and want to implement good old Node.js file upload (using fs.writeFile). Uploaded files go into data/assets. Now I want to serve assets from both locations static/* (checked into Git) and data/assets/* (where the uploaded files are stored).

Is there a way, because files.assets in the SvelteKit config only allows specifying one value. Thanks for your help!

[ghostdevv]

In your node adapter handler you can use polka/express to serve that file path.

import { handler } from './build/handler.js';
import express from 'express';
import desm from 'desm';

// Get absolute path to assets folder, "./data/assets" might work fine and you can remove this line/dep
const assetsPath = desm.join(import.meta.url, './data/assets');

const app = express();

// Serve your "data/assets" folder
app.use(express.static(assetsPath))

// let SvelteKit handle everything else, including serving prerendered pages and static assets
app.use(handler);

app.listen(3000, () => {
    console.log('listening on port 3000');
});

[michael]

Thank you that works! :)

Any chance I can use this within the npm run dev (vite dev) workflow?

[jaycliff]

This will work for npm run dev (vite dev) and npm run preview (vite preview)

Create a Vite plugin

See the documentation for more info.

// my-vite-plugin.js

import express from 'express';
const assets = express.static('data/assets');
const configureServer = (server) => {
    server.middlewares.use(assets);
};
export const myVitePlugin = () => ({
    name: 'my-vite-plugin',
    configureServer,
    configurePreviewServer: configureServer
});

Add the plugin to your project's vite.config.js

See the documentation for more info.

// vite.config.js

import { sveltekit } from '@sveltejs/kit/vite';
import { myVitePlugin } from './my-vite-plugin';
import { defineConfig } from "vite";
export default defineConfig(({ command, mode, ssrBuild }) => {
    return {
        plugins: [sveltekit(), myVitePlugin()],
        server: {
            port: 8000,
            strictPort: false
        },
        preview: {
            port: 8001,
            strictPort: false
        }
    };
});

[andreigoea]

Hey guys, I'm a bit of a noob, apologies. I have a similar issue: I want to be able to upload files to the server that hosts the App, and serve them from there. The process works fine in dev, where I upload to /static/uploads, but, when built, and then run through PM2, the files upload correctly (I change the upload path to /build/client/uploads based on the node env variable) the server doesn't see the file until it's reset.

I've taken your suggestion and placed it in server.js in root. Is there anything else I need to do for PM2 to correctly pick up this server file?

[catinrage]

@andreigoea
As answered above, you have to add the custom-server.js (you can get it from this repo) file to your project, and after you build your project, instead of running build/index.js, you run node custom-server.js, as it server the public folder in the build dir, so files are accesible, be careful if you are using sveltekit, the path to serve is build/client instead of build/public, good luck.

[ayuancool]

Once 'upload' is mentioned in sveltekit, express comes out

[david-plugge]

For no reason though. There are better more modern alternative ways