Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: include server assets for Vercel serverless functions #10979

Merged
merged 66 commits into from
Jan 15, 2024
Merged
Changes from 1 commit
Commits
Show all changes
66 commits
Select commit Hold shift + click to select a range
cbed243
add ability to copy server assets per route
eltigerchino Nov 4, 2023
4915822
changeset
eltigerchino Nov 4, 2023
fc081d0
fix test
eltigerchino Nov 4, 2023
e45f4ce
fix doc
eltigerchino Nov 4, 2023
045f343
fix asset copying
eltigerchino Nov 4, 2023
eeb1cf5
change process dir when using vite preview
eltigerchino Nov 4, 2023
9ec0f82
remove process.chdir from vite preview
eltigerchino Nov 5, 2023
ac6f3f7
include assets used by default error pages
eltigerchino Nov 6, 2023
9ce6edb
fix doc link
eltigerchino Nov 6, 2023
d8aec4b
better doc example
eltigerchino Nov 6, 2023
ad67ee2
fix doc type
eltigerchino Nov 6, 2023
407af73
ok for real
eltigerchino Nov 6, 2023
df45d57
add tests for vercel adapter
eltigerchino Nov 12, 2023
efa240d
prettier
eltigerchino Nov 12, 2023
816fe44
fix tests
eltigerchino Nov 12, 2023
09a28fb
Merge branch 'master' into feat-server-assets
eltigerchino Nov 12, 2023
7390ed8
fix types
eltigerchino Nov 12, 2023
2c9e86c
more type fixes
eltigerchino Nov 12, 2023
957dc06
try this
eltigerchino Nov 12, 2023
396d48c
documentation
eltigerchino Nov 12, 2023
bb1d891
skip adapter-vercel tests if on node v20
eltigerchino Nov 12, 2023
3449ca2
oopsie wrong PR
eltigerchino Nov 12, 2023
8fbc1aa
move server asset metadata resolving to function
eltigerchino Nov 12, 2023
306dcde
update changesets
eltigerchino Nov 12, 2023
71a722c
revert builder test fixes
eltigerchino Nov 12, 2023
5e09b0b
Merge branch 'main' into feat-server-assets
eltigerchino Dec 21, 2023
7625adb
fix lockfile
eltigerchino Dec 21, 2023
028f35e
prettier
eltigerchino Dec 21, 2023
9401f07
lint
eltigerchino Dec 21, 2023
abafe51
fix vercel tsc errors
eltigerchino Dec 21, 2023
7312bd9
prepublish only
eltigerchino Dec 21, 2023
010081f
fix: avoid running load functions when prerendering if no server load…
eltigerchino Dec 21, 2023
d8dbb21
chore: upgrade eslint-plugin-unicorn (#11432)
benmccann Dec 21, 2023
d75ad7c
Version Packages (#11420)
github-actions[bot] Dec 21, 2023
9d0e3a4
chore(deps): update dependency worktop to v0.8.0-next.16 (#11437)
renovate[bot] Dec 21, 2023
9d93465
i don't think we need this any more (#11439)
Rich-Harris Dec 21, 2023
2355ef6
fix: only disallow dynamic env access when prerendering (#11436)
Rich-Harris Dec 21, 2023
ea274ec
docs: fix links to sveltesociety.dev (#11441)
benmccann Dec 21, 2023
2784729
Version Packages (#11442)
github-actions[bot] Dec 21, 2023
82488f6
fix: set ESLint config type to `Config` instead of `FlatConfig` (#11453)
eltigerchino Dec 23, 2023
928d53b
Version Packages (#11457)
github-actions[bot] Dec 23, 2023
39745e6
fix: improve warning when encountering import.meta.env (#11440)
benmccann Dec 26, 2023
cde2295
empty commit (#11469)
Rich-Harris Dec 26, 2023
7699bfd
fix form actions docs (#11470)
Rich-Harris Dec 26, 2023
c4ee169
Version Packages (#11468)
github-actions[bot] Dec 26, 2023
627cce8
chore(deps): update pnpm to v8.13.1 (#11471)
renovate[bot] Dec 26, 2023
3ac5e78
docs: add performance page (#11424)
benmccann Dec 26, 2023
0e78235
chore(deps): update pnpm to v8.14.0 (#11504)
renovate[bot] Jan 3, 2024
084d97b
feat: use latest Azure adapter in adapter-auto (#11496)
geoffrich Jan 3, 2024
c2f8c84
fix: update @vercel/nft to 0.26.1 (#11508)
benmccann Jan 3, 2024
80a6bab
Version Packages (#11507)
github-actions[bot] Jan 3, 2024
068ded2
exclude universal nodes
eltigerchino Jan 9, 2024
557e4e1
include assets imported by server hooks
eltigerchino Jan 9, 2024
8dcb57c
Merge branch 'main' into feat-server-assets
eltigerchino Jan 9, 2024
125ac3f
update adapter-vercel tests
eltigerchino Jan 11, 2024
fc09cb7
fix tests
eltigerchino Jan 13, 2024
821c673
fix and add test for server hooks assets
eltigerchino Jan 13, 2024
c96c33d
Merge branch 'main' into feat-server-assets
eltigerchino Jan 13, 2024
3b7127a
update adapter-vercel test app packages
eltigerchino Jan 13, 2024
463ffb9
im gonna lose my mind
eltigerchino Jan 13, 2024
cb58b72
ignore hashes for filenames in tests
eltigerchino Jan 13, 2024
6f0fcc0
oops
eltigerchino Jan 13, 2024
88b6800
fix tests?
eltigerchino Jan 13, 2024
3a0929c
revert adapter-vercel types fix
eltigerchino Jan 15, 2024
509a698
improve readability of route asset for loop
eltigerchino Jan 15, 2024
9f03b6b
simplify file reading in serverless functions example
eltigerchino Jan 15, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
better doc example
  • Loading branch information
eltigerchino committed Nov 6, 2023
commit d8aec4b296a8e9211b446c5ec544be285b1c3a20
42 changes: 27 additions & 15 deletions documentation/docs/25-build-and-deploy/90-adapter-vercel.md
Original file line number Diff line number Diff line change
Expand Up @@ -147,21 +147,33 @@ You can [use files in Serverless Functions on Vercel](https://vercel.com/guides/

```js
// @errors: 2307
import path from 'node:path';
import { FFmpeg } from '@ffmpeg.wasm/main';
import core from '@ffmpeg.wasm/core-mt';
import wasmPathAb from '@ffmpeg.wasm/core-mt/dist/core.wasm?url';

export async function GET() {
let wasmPath = path.join(process.cwd(), wasmPathAb);

const ffmpeg = await FFmpeg.create({
core,
coreOptions: {
wasmPath,
},
});
/// file: api/pdf/+server.js
import fs from "node:fs";
import path from "node:path";
import { json } from '@sveltejs/kit';
import PDFDocument from "pdfkit";
import PalatinoBoldFont from "$lib/fonts/PalatinoBold.ttf";
eltigerchino marked this conversation as resolved.
Show resolved Hide resolved

const font = path.join(process.cwd(), PalatinoBoldFont);

export async function POST({ url }) {
const title = url.searchParams.get('title');
const filename = url.searchParams.get('filename');

const doc = new PDFDocument();
// use the tmp serverless function folder to create the write stream for the pdf
const file = `/tmp/${filename}.pdf`;
let writeStream = fs.createWriteStream(file);
doc.pipe(writeStream);
doc.font(font).fontSize(25).text(title, 100, 100);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the use-case for having a font rendered with a PDF is great, but perhaps something simpler like just serving up a .txt file is more concise example. This example sort-of requires understanding of how PDFs are rendered, and includes both streaming code and use of temporary intermediate files (which is also good to have documented somewhere, but conflating the two concepts here might be a bit much).

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Vite inlines the imported text file so it doesn’t get copied as an asset. I couldn’t think of another example and followed the one provided by Vercel. I’ll try to think up of something else

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you just not import it? My use case was that i'm compiling mjml - I import the templates with ?raw which is great, but the mjml compiler needs to know about an "includes" dir which it grabs files from when it compiles the mjml to html. I spent hours, and hours trying to get this to work on Vercel.

As I mentioned before it might be esoteric, but I'm sure there is another use-case - I've struggled with static files before when trying to grab compiled runtimes out of the "sharp" package and forcing them to deploy to Vercel as it does an fs.readFile at runtime to grab the compiled bundle.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it has to be imported so Vite’s asset handling kicks in and we grab the processed asset urls off the vite manifest https://vitejs.dev/guide/assets could you share a code example of how your use case is being implemented?

Copy link
Member

@antony antony Jan 15, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interesting - so I guess my question is, would this work if I wanted to include a directory full of assets, without specifically importing each one. My code looks like this:

// postbuild.js <- run after `vercel build` to deposit files into output dir
import { cp, mkdir } from 'node:fs/promises'
import { join } from 'node:path'

const includesDir = join(
'.',
'.vercel',
'output',
'functions',
'fn.func',
'apps',
'comms',
'includes',
)

const options = { recursive: true }

Promise.all([
  mkdir(includesDir, options),
  cp(
    join('node_modules', '@beyonk', 'email', 'lib', 'includes'),
    includesDir,
    options
  )
])

and then in my code I can reference this dir so that the mjml knows where to find its files. No imports required.

const includesDir = join(process.cwd(), 'apps', 'comms', 'includes')

function compile (template, substitutions) {
  const { html: htmlSource, errors } = toHtml(template.mjml, {
    filePath: includesDir
  })
})

Copy link
Member Author

@eltigerchino eltigerchino Jan 15, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, that post-build script should work great #10594 (comment) . Someone tried something similar here https://github.com/syntaxfm/website/pull/1179/files#diff-d3309f83fe6f5a74a8d1dde6c819338f4550d93f9308702c018eeb3692955f14 This PR is more of convenience, and especially if split functions are enabled.

You could also use the glob import to get multiple file paths https://vitejs.dev/guide/features.html#glob-import

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The post-build feels brittle, but I guess until there is more demand for this sort of thing, it's a fine solution.

doc.end();

return new Response(wasmPath);
writeStream.on("finish", () => {
const fileContent = fs.readFileSync(file);

// upload file to storage bucket

return json({ response: `File ${filename} saved` });
});
}
```
Loading