Static front-end - docker/genai-stack

Static front-end refers to building the application separately from the back-end code using modern best practices. This approach allows for the front-end and back-end to be developed and deployed independently, providing flexibility and reducing dependencies.

One way to implement a static front-end is through the use of Docker and a static file server. Docker is a platform for developing, shipping, and running applications inside containers. It allows for the creation of lightweight, portable, and self-contained environments for running applications.

Here are some examples of how the key technologies and dependencies in the GenAI Stack project can be used to implement a static front-end:

Docker: Docker can be used to create a container for the static file server. This container can be configured to serve the static files of the front-end application. Here is an example of a Dockerfile for a static file server:

FROM nginx:alpine
COPY . /usr/share/nginx/html

This Dockerfile uses the nginx image and copies the static files of the front-end application to the nginx html directory.

Compose: Docker Compose is a tool for defining and running multi-container Docker applications. It allows for the definition of services, networks, and volumes in a single file. Here is an example of a docker-compose.yml file for a static front-end application:

version: '3'
services:
frontend:
build: .
ports:
- "80:80"

This docker-compose.yml file defines a single service, frontend, which is built using the Dockerfile in the current directory and maps port 80 of the container to port 80 of the host.

Python: Python can be used to create a simple API for the static front-end application. This API can be used to handle any dynamic functionality required by the front-end. Here is an example of a simple Python API using Flask:

from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/api/data')
def get_data():
return jsonify({'data': [1, 2, 3, 4, 5]})

if __name__ == '__main__':
app.run(debug=True, host='0.0.0.0')

This Python script creates a simple API with a single endpoint, /api/data, which returns a JSON object containing an array of numbers.

FastAPI: FastAPI is a modern, fast (high-performance), web framework for building APIs with Python 3.6+ based on standard Python type hints. Here is an example of a simple FastAPI API:

from fastapi import FastAPI

app = FastAPI()

@app.get("/items/{item_id}")
async def read_item(item_id: int, q: str = None, short: bool = False):
item = {"item_id": item_id, "q": q, "short": short}
return item

This FastAPI script creates an API with a single endpoint, /items/{item_id}, which returns a JSON object containing the item id, query parameter q, and a boolean value short.

OpenTelemetry: OpenTelemetry is a collection of tools, APIs, and SDKs. Use it to generate, collect, and export telemetry data (metrics, logs, and traces) to help you understand your software’s performance and behavior. Here is an example of using OpenTelemetry with JavaScript to instrument a web application:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/opentelemetry.min.js"></script>
<script>
const provider = new opentelemetry.ResourceProvider({
attributes: {
"service.name": "my-web-app",
},
});

const exporter = new opentelemetry.exporter.otlpHttp.OperatorExporter();
const processor = new opentelemetry.batchProcessor.BatchSpanProcessor(exporter);
const tracer = new opentelemetry.Tracer("my-web-app", {
resource: provider.getResource(),
instrumentationLibrary: {
name: "my-web-app",
version: "1.0.0",
},
spanProcessor: processor,
});

const parentSpan = tracer.startSpan("parent-span");
const childSpan = tracer.startSpan("child-span", {
parent: parentSpan,
});

childSpan.end();
parentSpan.end();
</script>

This JavaScript code creates a tracer, starts a parent span and a child span, and ends the spans. The telemetry data is then exported to an OpenTelemetry-compatible endpoint.

Sources: