How to deploy Puppeteer with node on Render.com

Hello everyone, today I want to share my experience with everyone it’s a very challenging to deploy puppeteer on render because after a lot of search and I did not find an solution and chatgpt as well failed to give me a complete and proper solution after 3 days a lot searches I found the solution and successfully deploy my puppeteer node app on render. Today we will discuss how to deploy apps on render. I’ll try to explain everything in this post.

Hopefully this will be in your code as well and I had the issue when I deployed my app on render then on the “Launch” line my code was broken and said that chrome is not supported on it.

My package.json file. Install the puppeteer latest version

After that create a new file with the name of “render-build.sh” on the root of the project. Like that

In the “render-build.sh” file Add these codes.

!/usr/bin/env bash

exit on error

set -o errexit

Install dependencies

npm install

Uncomment this line if you need to build your project

npm run build

Ensure the Puppeteer cache directory exists

PUPPETEER_CACHE_DIR=/opt/render/.cache/puppeteer
mkdir -p $PUPPETEER_CACHE_DIR

Install Puppeteer and download Chrome

npx puppeteer browsers install chrome

Store/pull Puppeteer cache with build cache

if [[ ! -d $PUPPETEER_CACHE_DIR ]]; then
echo "...Copying Puppeteer Cache from Build Cache"
# Copying from the actual path where Puppeteer stores its Chrome binary
cp -R /opt/render/project/src/.cache/puppeteer/chrome/ $PUPPETEER_CACHE_DIR
else
echo "...Storing Puppeteer Cache in Build Cache"
cp -R $PUPPETEER_CACHE_DIR /opt/render/project/src/.cache/puppeteer/chrome/
fi

This is the screenshot of the code.

After that push these changes to the github and then go to the render dashboard and add the build command to the render dashboard. Go to your service and then go to the Environment tab and then scroll down to the build section and add the line.

“./render-build.sh”

After adding just save and deploy again your changes. Now hopefully your changes will be deloyed and puppeteer will work successfully. If you face any route issue in the logs like

Said that any route issue then check your logs and if your opt routes is not match this below route then change your render-build file route and push changes and deploy again.

Hopefully this post will be helpful for you. If you face any issue please comment below I’ll try to help you.

Thanks

Comments

[Stephen Oyekan]

May God bless you and your family, you don't know how much this means to me.

I've literally spent over 4days researching the internet till I found your fix.

Add on:
The cache dir can be different for your deployment you can check your logs in render inspect where the chrome is been cached. Copy the path and use it as the catch dir in the render.build.sh file.

If have any questions drop please ask.

[Christian Leguiz]

❌ Puppeteer failed: Browser was not found at the configured executablePath (/opt/render/.cache/puppeteer/chrome/linux-133.0.6943.126/chrome-linux64/chrome)
Launching Puppeteer...
Executable Path: /opt/render/.cache/puppeteer/chrome/linux-133.0.6943.126/chrome-linux64/chrome
❌ Puppeteer failed: Browser was not found at the configured executablePath (/opt/render/.cache/puppeteer/chrome/linux-133.0.6943.126/chrome-linux64/chrome)

const browser = await puppeteer.launch({
  executablePath: "/opt/render/.cache/puppeteer/chrome/linux-133.0.6943.126/chrome-linux64/chrome",
  headless: true,
  args: ["--no-sandbox", "--disable-setuid-sandbox"],
});

is it ok to use it on free onrender? i still get this

[Md. Robiul Alam]

You can follow this video: youtube.com/watch?v=6cm6G78ZDmM