Rendering whitepaper data

To post whitepapers to the website, the whitepaper data is defined and prepared on the website to display these documents. First, create a new \data folder at the project root. The information on available whitepapers comes from a new file named data.json, which is put in the data folder.

To give the web app a nice, polished look, install the Bootstrap and Font Awesome front-end libraries.

npm install bootstrap
npm install font-awesome

Open the app.js file and include these directories as sources for static files, placing them after the existing `express.static` line.

app.use(express.static(path.join(__dirname, '/node_modules/bootstrap/dist')));
app.use(express.static(path.join(__dirname, '/node_modules/font-awesome')));

To include the PDF documents, create a folder named \pdfs under the project’s \public folder. Instead of creating the PDFs and the thumbnails by yourself, you can copy them from this GitHub repository folder to the \pdfs and \image folders.

The \public\pdfs folder now contains the PDF documents:

Screenshot of PDF file icons

While the \public\images folder should contain the thumbnails for each of the PDF documents:

Screenshot of PDF thumbnails

Now, open the \routes\index.js file, which contains the logic for routing the home page. To use the whitepaper data from the data.json file, you must load the Node.js module responsible for accessing and interacting with the file system. Then, declare the fs constant in the first line of the \routes\index.js file, as follows:

const fs = require('fs');

Then, read and parse the data.json file and store them in the papers variable:

let rawdata = fs.readFileSync('data/data.json');
let papers = JSON.parse(rawdata);

Now modify the line to invoke the render method for the index view, passing the papers collection as the model for the index view.

res.render('index', { title: 'Embedding PDF', papers: papers });

To render the collection of whitepapers on the homepage, open the \views\index.ejs file and replace the existing code with the code from your project’s index file.

Now, rerun npm start and open http://localhost:3000 to view your collection of available whitepapers.

Screenshot of thumbnails for whitepapers

In the next sections involve enhancing the website and using PDF Embed API to display the PDF documents the web page. PDF Embed API is free to use — you just need to obtain an API credential.

Getting a PDF Embed API credential

To get a free PDF Embed API credential, visit the Get Started page after signing up for a new account or logging in to your existing account.

Click Create New Credentials and then Get Started:

Screenshot of how to create new credentials

At this point, you are asked to register for a free account if you don’t have one.

Select PDF Embed API, then type your credentials name and application domain. Use the localhost domain because of testing the web app locally.

Screenshot of creating new credentials for PDF Embed API

Click the Create Credentials button to access your PDF credentials and get the Client ID (API KEY).

Screenshot of how to copy new credentials

In your Node.js project, create a file named .ENV in the application’s root folder and declare the environment variable for your PDF Embed Client ID with the value of the API KEY credential from the previous step.

PDF_EMBED_CLIENT_ID=**********************************************

Later you use this client ID to access PDF Embed API. Install the dotenv package to access this environment variable using Node.js code.

npm install dotenv

Now, open the app.js file and add the following line at the top of the file so Node.js can load the dotenv module:

require('dotenv').config();

Displaying PDFs in the Web App

Now use PDF Embed API to display PDFs on the site. Open the live PDF Embed API Demo.

Screenshot of live PDF Embed API Demo

On the left panel, you can choose the embed mode that best fits your website needs:

  • Full Window: the PDF covers all the web page space

  • Sized Container: the PDF displays inside the webpage, one page at a time, in a div with limited size

  • In-Line: the entire PDF displays in a div inside the webpage

  • Lightbox: the PDF displays as a layer on top of your webpage

It is recommended to use the in-line embed mode for whitepapers and the code generator later to embed a PDF in the application.