This version is still in development and is not considered stable yet. For the latest stable version, please use StreamX Guides 1.1.0!

Create a simple website with StreamX CLI

Building a website involves managing multiple resources, including HTML, CSS, JavaScript, and images. Deploying and serving these assets efficiently can be challenging, especially when scaling. StreamX simplifies this process by providing a unified platform for managing and publishing web content.

In this tutorial, you will learn how to create a simple website and serve it with StreamX Mesh.

This tutorial covers the following topics:

  • Publish web resources (HTML, CSS, JavaScript, and images) to StreamX Mesh.

Prerequisites

To complete this guide, you will need:

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

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

To serve web resources with StreamX, you need a StreamX Mesh that receives ingested data and delivers processed data to the web server. Although StreamX is designed to handle advanced data pipelines, in this tutorial, the processing of data is limited to routing from source to the delivery service.

StreamX delivery can route processed data to different services (including those outside StreamX Mesh), however in this tutorial we deliver data to the web server embed within our Delivery Service.

  1. Open the terminal and go to create-simple-website-tutorial inside the cloned project directory.

  2. Run the StreamX Mesh by using the following command:

    streamx run

  3. Wait for the following output:

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

Step 3: Feed StreamX Mesh with web resources

Now let’s feed the StreamX Mesh with web resources. You’ll publish:

  • HTML pages to the pages channel.

  • Static resources (CSS, JavaScript, images) to the assets channel.

Once published, StreamX Mesh forwards the content to the web server.

Publish the index.html page

  1. Run the following command to publish your main HTML file:

    streamx publish -s 'content.bytes=file://site/index.html' pages index.html
    The`-s` flag indicates that the content comes from an external plain text file.

  2. Open a web browser and go to: http://localhost:8081.

  3. Check the page. It looks plain since it has no styling.

Publish the resource main.css stylesheet

  1. To apply basic styling, publish the CSS file with the command:

    streamx publish -s 'content.bytes=file://site/css/main.css' assets css/main.css

  2. Refresh http://localhost:8081.

  3. Check the page. Now it should have basic styling.

Publish background.webp

  1. To publish a background, use the command:

    streamx publish -b 'content.bytes=file://site/assets/images/background.webp' assets assets/images/background.webp
    Image is binary content, so -b flag is used instead of -s.

  2. Refresh http://localhost:8081.

  3. Verify the page. Now it has a background image.

Publish main.js

  1. Use the command:

    streamx publish -s 'content.bytes=file://site/javascript/main.js' assets javascript/main.js

  2. Refresh http://localhost:8081.

  3. Check the page. Now a part of the title is dynamic.

Summary

Congratulations! You have learned how to populate StreamX Mesh to build a simple website.

To explore more features and capabilities, refer to the related content below.

Related content