Deploying without having to do npx playwright install-deps

Hello,
I'm deploying a node.js application that is using playwright, and it needs some dependencies in the container to run playwright well

However, I don't know how to use an image, or a setup that already has those dependencies

For now, I have this in my package.json scripts :
"start": "npx playwright install-deps && vite preview --host 0.0.0.0 --port $PORT"

However, it implies that the command is executed at every deployment, and it may just consume CPU power and slow down deployment, so I'm searching for a more elegant and efficient way of deploying with those playwright dependencies

It would be awesome if I could get some help to solve that issue !

df1ac280-a03b-4213-9495-09597046a130

honestly, the far bigger issue is that you are running a preview server on railway
but lets fix both
what kind of vite app is this?

Hello, it is a SvelteKit app, I know it's not recommended to run a preview app, but it doesn't affect performance
I could do something like
"start": "node ./build/index.js" or something like that, even if I don't exactly get in which folder my project is built

oh yes it does, it also effects costs

but I think I should do that when the first issue is fixed

my app is also taking 900 MB of RAM just on deploy, without touching anything
yes
maybe it's because I ran in preview
so you may be right on this

i am right

yes

but okay install playwright in the build phase instead of at start

how should I do that ? do i need to make a docker image ?

add this as a nixpacks.toml file to your project

[phases.playwright]
dependsOn = ['install']
cmds = ['npx playwright install-deps']

okay, i have no nixpacks.toml file for now in my project

can I just write only that in it ?

and then you can remove the playwright from the start command

Or should I init a nixpacks.toml with a specific command ?

just make that file with that contents, nothing special

okay thank you it's done
and i removed the command from my start script

okay, let me know how that goes

Okay, i'll let you know if it works well and try to solve the preview running on my own, if it works i'll mark it as solved

thank you

the solution to that would require merging two nixpacks.toml files together

Error:

╔══════════════════════════════════════════════════════╗

║ Host system is missing dependencies to run browsers. ║

║ Please install them with the following command: ║

║ ║

║ npx playwright install-deps ║

║ ║

║ Alternatively, use apt: ║

║ apt-get install libnss3\ ║

║ libnspr4\ ║

║ libatk1.0-0\ ║

║ libatk-bridge2.0-0\ ║

║ libcups2\ ║

║ libdrm2\ ║

║ libdbus-1-3\ ║

║ libxcb1\ ║

║ libxkbcommon0\ ║

║ libatspi2.0-0\ ║

║ libx11-6\ ║

║ libxcomposite1\ ║

║ libxdamage1\ ║

║ libxext6\ ║

║ libxfixes3\ ║

║ libxrandr2\ ║

║ libgbm1\ ║

║ libpango-1.0-0\ ║

║ libcairo2\ ║

║ libasound2 ║

║ ║

║ ❤️ Playwright Team ║

╚══════════════════════════════════════════════════════╝ Failed
btw
i didn't saw anything related to playwright during build time
is there a way to know if the nixpacks file was taken into account correctly ?

❤️ Playwright Team

how cute
show me the build table at the top of the build logs please

yes pretty cute XD feels heartwarming to see

I believe I missed something while creating the file

no no thats my bad, i made a typo, i have fixed it
recopy into your file

yes it's gonna run now

awesome
i see it executing the install-deps script
you talked about merging two nixpacks files together to solve it

what do you have in mind ?

I was planning on just replacing something in the "start" script in package.json, do you have a better solution ?

I do but I'm about to go cut grass, I'll send you the new nixpacks.toml file when I'm back

Okay sure, take your time and thank you for your help, I wouldn't solve this building issue this quickly without you

heres your new nixpacks.toml file
https://gist.github.com/brody192/3e83905dd4af8e0810cc1a5574d424ee
and then you will need to include this Caddyfile in your project too
https://github.com/brody192/vue-3-template/blob/main/Caddyfile
dont worry about that being a vue template, it uses vite so it should be all the same

Thank you for helping me !

I have a question : why do I need to use caddy as my server instead of using a native standalone node server ?

SvelteKit provide a way of generating that with building :
https://kit.svelte.dev/docs/adapter-node

Do you think using their Node Adapter way of hosting my app would have drawbacks instead of using Caddy ?

well of course you don't need to, but caddy is gonna use sub 20mb of ram where as the node server may use around 60-70mb
do you do any ssr? if so caddy wont work anyway

Oh okay so it's just consuming less RAM

I didn't know about that !

Yes I do use some SSR, Caddy is some sort of static hosting ?

I think 60mb is okay if it's just that, since it's gonna be a RAM intensive app when some tasks are running with Playwright

I also use SvelteKit as my "server" btw, i have routes with SvelteKit, so it may not work at all with Caddy
https://caddy.community/t/help-getting-started-with-caddyserver-sveltekit-app/19346
It's talking about the "static adapter"

yeah wont work for you, forget about the caddy stuff lol
youll want to install the node adapter and then set your start script to node build/index.js

Okay, i'll try with that

I'll notice you if it uses more RAM than expected, but that should do it

sounds good