4. Get all Pages and Artboards from the design file

So, what data do we actually need for this app? We need to know all of the Pages and Artboards that are in the design and their relationships. We'll also need to render all of the Artboards as static PNGs. All of these actions will be exposed as API endpoints.

Get all Pages

Let's start by creating an API to get all Pages in the design:

1. Create a pages.js file in the api folder with the following contents:

2. Call the API at http://localhost:3000/api/pages?designId=YOUR_DESIGN_ID. You should see something like:

   

Get all Artboards

1. Create an artboards.js file in the api folder with the following contents:

   This script is basically the same as before. The only change is that instead of the design.getPages() method, we call the design.getArtboards() method.

2. Now call the API at http://localhost:3000/api/artboards?designId=YOUR_DESIGN_ID and you should see something like this:

   
   
   

Refactor SDK initialization logic

The SDK initialization is repeated in each file (pages.js, artboards.js, upload-design.js). To avoid having to create the SDK over and over again, let's refactor the common logic out:

1. Create a lib folder in the root directory.

2. Create a opendesign.js file in the new lib directory with the following contents:

3. Now, refactor the files inside the api folder to use it. This is what the new artboards.js file looks like:

4. Make the same change in pages.js and upload-design.js.

Next: Render all artboards as PNGs