Use JSDOM alternative for deploying to Vercel #95

Josehower · 2023-06-27T09:36:35Z

Handover TODO's

Solve Conflicts and update the branch
Research if the problem with js-dom has been solved or new workarounds have been found for the community
Verify the solution is still valid
Update PR based on research
Define if the PR is meant to be merged or maybe requires a different repo or just an independent branch than the main
Polish and send to Peer review

This branch has been deployed here:

https://vuln-examples-next-postgres-jose-7nzgag60s-josehower.vercel.app/

When trying to deploy to Vercel multiple issues appear when using JSDOM.

1. JSDOM makes the Serverless function exceed the maximum size

Failed to process build result for "example-6-cross-site-scripting/solution-2.rsc". Data: {"type":"Lambda"}.
Error: The Serverless Function "example-6-cross-site-scripting/solution-2" is 54.64mb which exceeds the maximum size limit of 50mb. Learn More: https://vercel.link/serverless-function-size
NOW_SANDBOX_WORKER_MAX_LAMBDA_SIZE: The Serverless Function "example-6-cross-site-scripting/solution-2" is 54.64mb which exceeds the maximum size limit of 50mb.

This problem was solved by using a lightweight version of JSDOM like https://www.npmjs.com/package/jsdom-light

2. JSDOM using canvas missing dependencies in serverless environments

Error: /lib64/libz.so.1: version `ZLIB_1.2.9' not found (required by /vercel/path0/node_modules/.pnpm/canvas@2.11.2/node_modules/canvas/build/Release/libpng16.so.16)

Error: /lib64/libc.so.6: version `GLIBC_2.28' not found (required by /vercel/path0/node_modules/canvas/build/Release/libglib-2.0.so.0)

The way we solve it this was by using a JSDOM solution that was implementing a canvas version that was compatible with serverless environments:

https://www.npmjs.com/package/jsdom-napi-rs-canvas (published from Miggogee/jsdom)

Related Links:

ley.config.js

database/connect.ts

karlhorky · 2023-06-30T12:30:02Z

database/connect.ts

@@ -15,6 +14,7 @@ declare module globalThis {
 function connectOneTimeToDatabase() {
  if (!globalThis.postgresSqlClient) {
    globalThis.postgresSqlClient = postgres({
+      ssl: !!process.env.POSTGRES_URL,


can we use Boolean() here for expressiveness?

karlhorky · 2023-06-30T12:32:55Z

types/index.d.ts

I guess the contents of types/base.d.ts could be merged into this file?

the filename can be jsdom-napi-rs-canvas.d.ts

the file can be in the root of the project - until we have a more types

but not a big deal to make this super polished yet, we're not sure if we are staying with Vercel for this project

socket-security · 2023-06-30T12:39:45Z

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Packages	Version	New capabilities	Transitives	Size	Publisher
server-only	0.0.1	None	`+0`	611 B	sebmarkbage
jsdom-napi-rs-canvas	19.0.0	eval, network, filesystem, shell	`+18`	6.06 MB	miggog

🚮 Removed packages: @types/jsdom@21.1.1, canvas@2.11.2, jsdom@22.1.0

Josehower

suggestions applied

karlhorky · 2023-08-23T15:00:58Z

Edit: The link below has problems, I changed it to https://vuln-examples-next-postgres-jose.vercel.app/

Seems like the Railway link ( https://vuln-examples-next-postgres-jose-production.up.railway.app ) that was in the About section doesn't currently work, so I used the Vercel link above instead ( https://vuln-examples-next-postgres-jose-7nzgag60s-josehower.vercel.app/ )

The deployed version on Fly.io ( https://security-vulnerability-examples-next-js-postgres.fly.dev/ ) has been crashing up until this point, but this may improve in the future

karlhorky · 2023-10-29T17:00:29Z

The deployed version on Fly.io ( security-vulnerability-examples-next-js-postgres.fly.dev ) has been crashing up until this point, but this may improve in the future

The version deployed on Fly.io is not crashing currently

https://security-vulnerability-examples-next-js-postgres.fly.dev/

karlhorky · 2023-10-29T17:53:46Z

@Josehower the JSDOM + DOMPurify example doesn't seem to work on Vercel currently - so maybe the approach in this PR doesn't work?

https://vuln-examples-next-postgres-jose-7nzgag60s-josehower.vercel.app/example-6-cross-site-scripting/solution-2

karlhorky · 2023-10-30T08:36:39Z

Oh, it seems there is another deployment at https://vuln-examples-next-postgres-jose.vercel.app/

The Example 6, Solution 2 page here works fine:

https://vuln-examples-next-postgres-jose.vercel.app/example-6-cross-site-scripting/solution-2

Josehower · 2023-11-08T14:57:25Z

Handover Comment for the PR:

What work has been done

Update the content of the example to be deployed in Vercel
Use a configuration that replaces js-dom for a version that supports serverless environments

What work is still open

Handover TODO's section

who to take over

This can be handover by either @ProchaLu or @Eprince-hub

Where to start

A good place to start would be to get familiar with the changes in the PR and understand what is trying to be achieved. Get a conversation with @karlhorky to define if a PR to main is the best place to contain this deploy alternative or maybe it just needs another repo or just a branch.

Other details that you know that are not captured already in the issue / PR

Not really sure if this is a PR that wants to get merged to the main or have it as a backup in case fly.io doesn't work

This PR is an alternative to deploy the example on serverless environments. This was created since the version on fly.io was not working due to memory issues with Next.js

Josehower added 27 commits June 19, 2023 15:49

Update next

5360fc9

Remove Fly deploy

896f69e

Configure for railway

99f045e

Update webpack config

21cfc53

Use canvas externals in webpack

5513174

Use ENV variable from vercel

73f34ad

Use ligth JSDOM lib

9e70757

Update lock

4074dd3

Remove extra webpack config

fe22997

Add vercel fix suggestion

d90acd5

Update to use different canvas

af6f979

Use different dom lib

dd55c34

Remove canvas

281ba8f

Use new JSDOM lib

d9ebf98

Update to trigger deploy

aa1c96e

Use ESM

61d93f6

Use ESM

27a6367

Update object

f900e10

Update ssl

8b14159

Use default export

53e81a3

Update next

25bb8b5

Remove Fly deploy

fd69555

Configure for railway

a8482d9

Update sass

f8e9a7f

Update dependencies

afc6f2f

Update lock

b2957c1

Merge branch 'main' into vercel-deploy

3fc307f

Josehower changed the title ~~Add setup to deploy to Vercel~~ Use JSDOM alternative for deploying to Vercel Jun 27, 2023

karlhorky reviewed Jun 27, 2023

View reviewed changes

ley.config.js Outdated Show resolved Hide resolved

karlhorky reviewed Jun 27, 2023

View reviewed changes

database/connect.ts Outdated Show resolved Hide resolved

karlhorky and others added 7 commits June 30, 2023 14:20

Add back removed deploy step

d3d60bc

Rename lint-check-types-build.yml to lint-check-types-build-deploy.yml

32f0518

Create fly-io-start.sh

5c96612

Create fly.toml

fe782aa

Fix dockerfile

e661e69

Delete ley.config.js

afc7e2b

Update connect

b5b186c

karlhorky reviewed Jun 30, 2023

View reviewed changes

Josehower added 2 commits June 30, 2023 14:33

Merge branch 'main' into vercel-deploy

bc86540

Update lock

181b96b

Josehower added 2 commits June 30, 2023 14:42

Use Boolean constructor instead of !!

c39d258

Use sinfle file for jsdom types

a4be47b

Josehower commented Jun 30, 2023

View reviewed changes

Josehower and others added 2 commits June 30, 2023 14:48

Remove unnecesary configuration

baa4d62

Merge branch 'main' into vercel-deploy

7bc5af8

karlhorky marked this pull request as ready for review June 30, 2023 13:30

karlhorky approved these changes Jun 30, 2023

View reviewed changes

Update tsconfig.json

be48c35

karlhorky closed this Jun 30, 2023

karlhorky reopened this Jun 30, 2023

Merge branch 'main' into vercel-deploy

31abf21

karlhorky marked this pull request as draft June 30, 2023 13:35

karlhorky mentioned this pull request Jul 1, 2023

Reduce the size of jsdom (and its dependencies) jsdom/jsdom#2390

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use JSDOM alternative for deploying to Vercel #95

Use JSDOM alternative for deploying to Vercel #95

Josehower commented Jun 27, 2023 •

edited

Loading

karlhorky Jun 30, 2023

Josehower Jun 30, 2023

karlhorky Jun 30, 2023

Josehower Jun 30, 2023

socket-security bot commented Jun 30, 2023

Josehower left a comment

karlhorky commented Aug 23, 2023 •

edited

Loading

karlhorky commented Oct 29, 2023

karlhorky commented Oct 29, 2023

karlhorky commented Oct 30, 2023

Josehower commented Nov 8, 2023 •

edited

Loading

Use JSDOM alternative for deploying to Vercel #95

Are you sure you want to change the base?

Use JSDOM alternative for deploying to Vercel #95

Conversation

Josehower commented Jun 27, 2023 • edited Loading

Handover TODO's

1. JSDOM makes the Serverless function exceed the maximum size

2. JSDOM using canvas missing dependencies in serverless environments

karlhorky Jun 30, 2023

Choose a reason for hiding this comment

Josehower Jun 30, 2023

Choose a reason for hiding this comment

karlhorky Jun 30, 2023

Choose a reason for hiding this comment

Josehower Jun 30, 2023

Choose a reason for hiding this comment

socket-security bot commented Jun 30, 2023

Josehower left a comment

Choose a reason for hiding this comment

karlhorky commented Aug 23, 2023 • edited Loading

karlhorky commented Oct 29, 2023

karlhorky commented Oct 29, 2023

karlhorky commented Oct 30, 2023

Josehower commented Nov 8, 2023 • edited Loading

What work has been done

What work is still open

who to take over

Where to start

Other details that you know that are not captured already in the issue / PR

Josehower commented Jun 27, 2023 •

edited

Loading

karlhorky commented Aug 23, 2023 •

edited

Loading

Josehower commented Nov 8, 2023 •

edited

Loading