Share Content Between Stacks Using a Web Proxy

There can be many instances where we are required to use content stored in one stack in another stack. This sharing of data between stacks is a common practice when we have a lot of content spread across multiple stacks. In this guide, we will discuss how we can create a system that will help us achieve data sharing between stacks using a sample app and web proxy.

Process Overview: We will begin by building Two stacks: Stack A (parent Stack) and Stack B (child Stack.) The sample app will consist of a header, footer, home page, error page, and a contact page as default components from the parent stack (stack A). This app will display previews of the recent blogs added in the child stack (stack B).

Prerequisites

Steps for Execution

  1. Download the code from our GitHub repository
  2. Create Stacks and Import Content
  3. Configure the code
  4. Execute the code
  1. Download the code from our GitHub repository

    For this exercise, we will first start by downloading the code bundle from our GitHub repository. Within this code bundle, you will find the “stack-data” folder, that has Two subfolders “parent-stack-data” and “child-stack-data” from which we will import the data into the stacks that we will create in the next step.

  2. Create Stacks and Import Content

    When creating stacks for this exercise, remember that we need Two separate stacks, a parent stack and a child stack for this exercise.

    After you create the stacks, use the Contentstack CLI to import entries and assets to both the parent as well as the child stacks. Perform the following steps in order to do this:

    1. Navigate to the downloaded folder and access the folder named “stack-data.”
    2. Note: Before importing the data, make sure that you are authenticated and have added the stack management tokens for both the parent and child stack in CLI.

    3. In the command prompt window, type the following command and hit enter:
    4. csdx cm:import -a <management_token_alias>
      Mention the token name in <management_token_alias>
    5. Enter the master locale and provide the complete path to the stored content as displayed in the image below:CLIlocale.png

    Repeat the above steps to import data into the child stack.

    So far, we have created the following content types and imported entries and assets into them.

    For the parent stack (stack A) we have added the following content types:

    • Home
    • Header
    • Footer
    • Error
    • Contact

    Once you have imported entries and assets to the content types, they will look like this:

    Entry_preview.png

    For stack B, we have imported the Blogs content type and its entries. When completed, it will look like this:

    blogs_preview.png
  3. Configure the code

    Now that your stacks are ready with the content Types and the respective entries, let us now move ahead with configuring the code of the sample app.

    1. Open the downloaded code in any appropriate code editor application.
    2. Open the command prompt and move inside the project root directory. Then, run the command npm install to install the required dependencies.
    3. After installing the dependencies for your code, navigate to .env file.env_preview.png
    4. Mention the required details for Stack A:
        Port
        Proxy URL
        Stack API Key
        Stack Delivery Token
        Stack Publish Env
    5. For Stack B, mention the following details:
        Stack API Key
        Stack Delivery Token
        Stack Publish Env
    6. In the config.js file, provide the UIDs of the default content types and the blog content type, as shown below:config.png The defaultContentTypes array will contain the UIDs for the default entries from the parent Stack (Stack A) viz. “header,” “footer,” “home,” “error,” and “contact”. Whereas, blogContentTypeUid will hold the UID i.e “blog” for your blog entries from your child Stack (Stack B.)
    7. Save the code.
  4. Execute the Code

    The final step of this experiment is to execute the code. In your root directory perform the following steps:

    1. In the command terminal, execute the command npm start
    2. In your web-browser enter the following address:
      http://localhost:5000

    You will see the following result:

    Shared_data.gif

    This is how the two stacks communicate with each other. As you can see, the sample app enables the parent Stack - Stack A, to display the preview of the blogs from the child Stack - Stack B.

    The JSON response that is generated is shown below:

    {
      defaultEntries: {
        header: [ [Object] ],
        footer: [ [Object] ],
        home: [ [Object] ],
        error: [ [Object] ],
        contact: [ [Object] ]
      },
      entries: [
        {
          _version: 8,
          locale: 'en-us',
          uid: 'bltbd31fa200947d8ac',
          ACL: {},
          _in_progress: false,
          blog: [Object],
          created_at: '2020-09-30T16:48:45.943Z',
          created_by: 'blt828ab71437a69a50',
          tags: [],
          title: 'Blogs',
          updated_at: '2020-09-30T17:31:29.990Z',
          updated_by: 'blt828ab71437a69a50',
          url: '/blogs',
          publish_details: [Object]
        }
      ]
    }

    As you can observe from the above JSON response, there are no individual calls that are made to fetch entries for our sample app, therefore there is no need for individual APIs.

    Notice the default entries object from our original response consists of default entries i.e header, footer, home, error, and contact from parent Stack (Stack A)

    defaultEntries: {
        header: [ [Object] ],
        footer: [ [Object] ],
        home: [ [Object] ],
        error: [ [Object] ],
        contact: [ [Object] ]
     }

    In the following response, you can see the previews of blogs added in the child Stack (Stack B)

     entries: [
        {
          _version: 8,
          locale: 'en-us',
          uid: 'bltbd31fa200947d8ac',
          ACL: {},
          _in_progress: false,
          blog: [Object],
          created_at: '2020-09-30T16:48:45.943Z',
          created_by: 'blt828ab71437a69a50',
          tags: [],
          title: 'Blogs',
          updated_at: '2020-09-30T17:31:29.990Z',
          updated_by: 'blt828ab71437a69a50',
          url: '/blogs',
          publish_details: [Object]
        }
      ]

    This is how you get a common response for both of your entries (default and blogs) from two separate Stacks within a single JSON response using web proxy implementation.

      Was this article helpful?

      Thanks for your feedbackSmile-icon

      On This Page

      top-arrow