Hey everyone, I’m pretty new to this stuff so please bear with me.
I’ve got a basic setup running where I use Express and Node to host my Polymer application. My server configuration looks like this:
const express = require('express');
const server = express();
const path = require('path');
// Static file serving from dist folder
server.use(express.static(path.join(__dirname, '/dist/bundled')));
// Main route handler
server.get('/', (request, response) => {
response.sendFile('index.html', {root: './dist/bundled'});
});
// Start server on port 8080
server.listen(8080, () => {
console.log('Server running on port 8080');
});
Everything works fine when I run node app.js and visit localhost:8080.
Now I want to add a feature where users can click a button and generate a PDF using Puppeteer. I tried adding this function to my Polymer component:
generatePDF() {
const puppeteer = require('puppeteer');
(async () => {
const browserInstance = await puppeteer.launch();
const newPage = await browserInstance.newPage();
await newPage.goto('https://example.com', { waitUntil: 'networkidle2' });
await newPage.pdf({ path: 'document.pdf', format: 'A4' });
await browserInstance.close();
})();
}
But I get an error saying ‘require is not defined’. I think I’m approaching this wrong. Should I move this logic to my Express server and create an API endpoint instead? How do I properly connect the frontend button click to the PDF generation? Any guidance would be awesome!
You’re correct; that approach won’t work since browsers can’t run Node.js modules like Puppeteer due to security restrictions. I encountered this same issue when starting PDF generation in web apps. You should move your PDF logic to the server and create an API endpoint instead. Add this code to your Express server: javascript const puppeteer = require('puppeteer'); server.post('/generate-pdf', async (req, res) => { try { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto('http://localhost:8080', { waitUntil: 'networkidle2' }); const pdf = await page.pdf({ format: 'A4' }); await browser.close(); res.contentType('application/pdf'); res.send(pdf); } catch (error) { res.status(500).send('PDF generation failed'); } }); Afterward, replace your generatePDF function in the Polymer component with a fetch call to this endpoint. This way, the server will handle the processing where Puppeteer can function properly.
yeah, that’s def a client vs server issue. puppeteer runs on node, not in the browser. i created an /api/pdf endpoint in my express server for pdf stuff. just fetch that in polymer. oh, and make sure you npm install puppeteer on the server side!
The require error occurs because Puppeteer is a server-side library and cannot be used directly in a browser environment. I faced a similar problem when implementing PDF generation in my app. To resolve this, you should create a separate route in your Express server specifically for handling the PDF generation. Ensure Puppeteer is installed on your server and set up an API endpoint for this purpose. On the Polymer side, modify your generatePDF function to make a fetch request to this endpoint. Additionally, consider implementing loading indicators, as generating PDFs may take some time based on the complexity of the content.