Set up pages generation with StreamX Rendering Engine service

Serving dynamic content has its drawbacks, including performance overhead due to server-side processing, potential scalability issues, and caching challenges. These issues can negatively impact user experience and increase hosting costs.

StreamX addresses these problems by enabling dynamic content to be pre-generated. Once you have defined the page template and the data, you simply feed them into a StreamX Mesh. There, a configured template engine merges the appropriate template with the data, resulting in page generation. The page(s) are immediately delivered to the web server.

This approach has several benefits:

  • Automatic page regeneration triggered by the publication of new data

  • Faster access to pages since they are pregenerated

In this tutorial, we will generate pages from templates and external source data using StreamX Mesh. Page generation is handled by the StreamX service which uses Pebble templates as its templating engine and accepts data in JSON format.

This tutorial covers the following topics:

  • page generation using the StreamX Rendering Engine, including:

    • managing page templates

    • managing data for the templates

Prerequisites

To complete this guide, you will need:

Verify that no other StreamX instance or any other application is using port 8081.

Step 1: Get the source files

Clone the Git repository containing source files for the example:

git clone https://github.com/streamx-dev/streamx-docs-resources.git

Step 2: Run the StreamX Mesh

  1. Open the terminal and navigate to set-up-page-generation-tutorial inside the cloned project directory.

  2. Run the StreamX Mesh using command:

    streamx run

  3. Wait for the following output:

    -------------------------------------------------------------------
STREAMX IS READY!
-------------------------------------------------------------------
...
-------------------------------------------------------------------
Network ID:
...
Mesh configuration file: ./mesh.yml
-------------------------------------------------------------------

Step 3: Publish the template and data

  1. Publish the site/template.html template to the renderers channel using the following command:

    streamx publish -s 'template.bytes=file://site/template.html' renderers template.html

    • -s indicates that an external plain text file is used as the source of the published content

    • renderers is the channel you are publishing the template to

    • template.html is the publish key

  2. The StreamX Rendering Engine requires additional context such as:

    • data that triggers page generation,

    • type of generated output is,

    • names of generated results.

    To provide the generation details, publish the data with the following command:

    streamx publish rendering-contexts pages-rendering-context rendering-contexts/pages-rendering-context.json

  3. Publish the data/product_1.json data on data channel using the following command:

    streamx publish -s 'content.bytes=file://data/product_1.json' data product:1

  4. Open your web browser and navigate to http://localhost:8081/generated/1.html. Verify that the page is accessible and contains information about the published product.

  5. Repeat steps 2 and 3 for data/product_2.json and data/product_3.json

    streamx publish -s 'content.bytes=file://data/product_2.json' data product:2
streamx publish -s 'content.bytes=file://data/product_3.json' data product:3

    Verify that the published data is accessible at the following links:

Step 4: Unpublish the data

In this step, we will unpublish some of the previously published data. Unpublishing will only affect pages generated from that data.

  1. Unpublish the data with product:3 key with the following command:

    streamx unpublish data product:3

  2. Visit http://localhost:8081/generated/3.html again. Confirm that the server responds with 404 error code.

  3. Visit http://localhost:8081/generated/1.html and http://localhost:8081/generated/2.html. Confirm that pages generated from product:1 and product:2 data are still published.

Step 5: Update the data

In this step, you will replace the previously published data items with new ones. As in the previous step, only pages generated from this data will be affected.

  1. Publish updated product:1 data using the following command:

    streamx publish -s 'content.bytes=file://data/product_1_updated.json' data product:1

    The new data item differs from the previous one by its name: "Brown Chair".

  2. Visit http://localhost:8081/generated/1.html. Confirm that page generated from product:1 data is updated.

  3. Visit http://localhost:8081/generated/2.html. Confirm that page generated from product:2 did not change.

Step 6: Update the template

Now let’s update the template. It will affect all pages generated from that template.

  1. Publish updated template with template.html key using following command:

    streamx publish -s 'template.bytes=file://site/template_updated.html' renderers template.html

    The new version is different: the title now includes the product ID, and the product category has been added to the list of properties.

  2. Visit http://localhost:8081/generated/1.html and http://localhost:8081/generated/2.html. Confirm that both pages have been updated.

Step 7: Unpublish the template

Finally, let’s remove the template. It will affect all pages generated from the template.

  1. Unpublish the template with the key template.html with the following command:

    streamx unpublish renderers template.html

  2. Visit http://localhost:8081/generated/1.html and http://localhost:8081/generated/2.html. Confirm that the server responds with a 404 status code. Both pages are unpublished because their template is unpublished.

Summary

Congratulations! You have learned how to generate pages based on templates and external sources data using StreamX CLI.

Related content