Create a simple website using StreamX CLI

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

This tutorial covers the following topics:

publishing web resources (HTML, CSS, JS, image) to StreamX Mesh

Prerequisites

To complete this guide, you will need:

Roughly 10 minutes
StreamX CLI installed
Git installed
A web browser of your choice

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

To serve web resources using StreamX, you need a StreamX Mesh that receives ingested data and delivers processed data to the web server. Despite 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.

Open the terminal and navigate to create-simple-website-tutorial inside the cloned project directory.
Run the StreamX Mesh using command:
```
streamx run
```

Wait for the following output:

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

Step 3: Feed StreamX Mesh with web resources

Now let’s feed our StreamX Mesh with web resources. You must handle it by publishing HTML pages to the pages channel and static resources to the assets channel. Accepted data is forwarded by StreamX Mesh to the web server.

Publish the index.html page using the following command
```
streamx publish -s 'content.bytes=file://site/index.html' pages index.html
```
-s flag indicates that an external plain text file is used as the source of published content.
Open a web browser and navigate to http://localhost:8081. The page looks quite raw, because it has no styling and no background.
Publish the resource main.css with the command:
```
streamx publish -s 'content.bytes=file://site/css/main.css' assets css/main.css
```
Refresh http://localhost:8081 - now the page should have basic styling.
Publish background.webp:
```
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.

Refresh http://localhost:8081 and verify it now has a background image.
Finally, publish main.js to add some dynamism to the page.
```
streamx publish -s 'content.bytes=file://site/javascript/main.js' assets javascript/main.js
```
Refresh http://localhost:8081 and check that the part of the title is now dynamic.

Summary

Congratulations! You have learned how to populate StreamX Mesh to a build simple website. But that’s not all, there are many more ways to feed StreamX. To learn more about them, follow the StreamX CLI reference.