Deploy a puppeteer nodejs application on netlify

In this article, we’ll learn how we can take advantage of packages like @sparticuz/chromium and Puppeteer-core to create and deploy our puppeteer nodejs application on netlify.

If you are facing issue to run puppeteer on netlify that could be due to the fact that you are using a library called chrome-aws-lambda. And puppeteer core library which is updated very constantly. So it becomes quite a hassle to use chrome-aws-lambda because of the pace of the puppeteer updates. To resolve this issue we could use @sparticuz/chromium library as their docs say that this package is not chained to puppeteer versions.

• Let first create a simple node application.

mkdir puppeteer-node-application
cd puppeteer-node-application
npm init

• Now we can also install netlify libraries which will help us to deploy our nodejs application.

npm install netlify-cli -g

• Now create a dist folder with empty index.html file in it. This is the required netlify configuration.
• Now create a dist folder with empty index.html file in it. This is required for netlify configuration.
• Now create a file name netlify.toml file and copy the following code in it. This will help netlify recognize where the functions are stored.

[build]
    functions = "functions"

• Now create the function directory where we will keep our node puppeteer code. In this directory create a file name api.js
• Now lets install puppeteer dependencies to start using puppeteer code in our application

npm install puppeteer-core@19.6.0
npm install serverless-http
npm install @sparticuz/chromium@110

Note: In order to figure out what version of @sparticuz/chromium you will need, please visit Puppeteer's Chromium Support page.

• Finally copy the following code in the api.js file.

	const express = require('express');
	const serverless = require('serverless-http');
	const puppeteer = require('puppeteer-core');
	const chromium = require('@sparticuz/chromium');
	const cors = require('cors');
	const app = express();
	const router = express.Router();
	router.get('/test', async (req, res) => {
	const browser = await puppeteer.launch({
	args: chromium.args,
	defaultViewport: chromium.defaultViewport,
	executablePath: await chromium.executablePath(),
	headless: chromium.headless,
	ignoreHTTPSErrors: true,
	});
	const page = await browser.newPage();
	await page.goto(https://www.newtimes.co.rw/);
	const title = await page.title();
	await browser.close();
	res.send(title);
	});
	app.use(cors({
	origin: '*'
	}));
	app.use('/.netlify/functions/api', router);
	module.exports.handler = serverless(app);

view raw puppeteer-netlify-code.js hosted with ❤ by GitHub

• Now finally run following netlify commands to deploy the application and you need to select few option where you could either link this deployment to an existing site or to a new site. If you are doing it for the first time then select a new site and give it a new name.

netlify deploy --prod

Finally you could check the deployment links and don't forget to append /.netlify/functions/api at the end of the deployment url to be able to access the node application.

You can also refer the sample code for same here