DEV Community: Serdar Shefketov

FastAPI and Svelte: Local Docker Compose Setup

Serdar Shefketov — Wed, 22 Jan 2025 07:21:11 +0000

In this guide, we’ll walk through setting up a FastAPI backend and a Svelte frontend using Docker Compose for seamless local development. We’ll also integrate an external cloud-hosted MongoDB database accessed via a connection URL.

Project Structure

Here’s the general structure of the project:

project-root/
├── backend/
│   ├── Dockerfile
│   ├── requirements.txt
│   └── main.py
├── web/
│   ├── Dockerfile
│   ├── package.json
│   ├── svelte.config.js
│   └── src/
└── docker-compose.yml

Backend: FastAPI

The backend is a FastAPI app with a Dockerfile that sets up the environment and runs the app.

Backend Dockerfile

# Backend Dockerfile
FROM python:3.11-slim

WORKDIR /

COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt

COPY . .

CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "9001"]

Example `requirements.txt`

Make sure to include the necessary dependencies for your FastAPI app:

fastapi
uvicorn

Example `main.py`

Here’s a simple example of your FastAPI app:

from typing import  Dict
import json
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

# Allow your Svelte app origin
origins = [
    "http://localhost:3000",  # Replace with your local dev URL or production URL
    "http://localhost:5173"
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],  # Allows all HTTP methods (GET, POST, etc.)
    allow_headers=["*"],  # Allows all headers
)

@app.get("/", response_model=Dict[str, str])
async def root():
    return {"title": "Hello you successfully connected to the backend!", "subtitle": "You learn how to set up a docker compose file and use FastAPi with Svelte app."}

Frontend: Svelte

The frontend is built with Svelte, using the Node.js adapter for deployment.

Frontend Dockerfile

# Use a Node.js Alpine image for the builder stage
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
RUN npm prune --production

# Use another Node.js Alpine image for the final stage
FROM node:20-alpine
WORKDIR /app
COPY --from=builder /app/build build/
COPY --from=builder /app/node_modules node_modules/
COPY package.json .
EXPOSE 3000
ENV NODE_ENV=production
CMD [ "node", "build/index.js" ]

Svelte Configuration

Your svelte.config.js should use the Node.js adapter:

import adapter from '@sveltejs/adapter-node';

export default {
  kit: {
    adapter: adapter(),
    prerender: {
      // if your prerender is enabled
      enabled: false,
    },
  },
};

Docker Compose Configuration

Here’s the docker-compose.yml file that ties everything together:

version: '3.8'

services:
  backend:
    build:
      context: ./backend
      dockerfile: Dockerfile
    container_name: fastapi-backend
    ports:
      - '9001:9001'
    environment:
      - MONGO_URI=your_mongo_connection_string

  frontend:
    build:
      context: ./web
      dockerfile: Dockerfile
    container_name: svelte-frontend
    ports:
      - '3000:3000'
    depends_on:
      - backend

Running the Project Locally

Build the Docker images:

   docker-compose build

Start the containers:

   docker-compose up

Access the services:

Frontend: http://localhost:3000
Backend: http://localhost:9001

Troubleshooting Common Issues

Issue: Frontend Not Communicating with Backend

Error: “Network Error” or CORS issues.
Solution: Make sure the frontend points to the backend URL (e.g., http://localhost:9001). If needed, add CORS middleware to FastAPI:

from fastapi.middleware.cors import CORSMiddleware

app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_methods=["*"],
    allow_headers=["*"],
)

Conclusion

With this setup, you’ve successfully dockerized a FastAPI backend and Svelte frontend, integrating them locally using Docker Compose. This approach ensures a smooth development workflow and consistent environment across systems.

You can check out the GitHub repository !

🚀 Learning by Doing: Building an Incident Alert System 🛠️

Serdar Shefketov — Mon, 23 Dec 2024 11:12:51 +0000

👋 Introduction
Learning new technologies is always exciting, but applying them to a real-world project is where the magic happens. ✨ Recently, I took on the challenge of building an Incident Alert System, and it turned into an incredible learning journey. 🚧

This project helped me dive deep into:
🎯 Kafka Messaging
🔍 Go Microservices
🐳 Kubernetes Orchestration
📧 SMTP Email Alerts

Here’s what I built, what I learned, and how you can check it out for yourself! 📝

🛠️ What I Built: Incident Alert System
The Incident Alert System is a microservice-based application designed to detect and alert users when specific metrics (e.g., memory usage, CPU usage) exceed predefined thresholds. It’s built on Kafka for messaging, Go for backend services, and Kubernetes for deployment. 🧩

You can explore the full project here:
👉 GitHub Repository: go-alert-system

🌐 System Architecture
The system consists of four microservices, each playing a specific role:
1️⃣ Metrics API Service: Collects metrics and sends them to Kafka.
2️⃣ Rule Engine Service: Evaluates metrics against user-defined rules.
3️⃣ Alert Dispatcher Service: Sends email notifications when rules are violated.
4️⃣ Rule Management Service: Manages alert rules via REST APIs.

Here’s a visual of the architecture:

🌟 Key Learnings
1️⃣ Kafka Messaging Basics 📨
I explored Kafka as the backbone for communication between services. It ensures reliable and asynchronous data flow.

What I Learned:
✅ Setting up Kafka topics for metrics processing.
✅ Writing producers and consumers in Go.
✅ Managing retries and offsets for reliability.

2️⃣ Go Microservices 💻
Building microservices in Go was a rewarding experience. Its simplicity and performance made it perfect for this project.

What I Learned:
✅ Structuring microservices for scalability.
✅ Writing clean and efficient REST APIs.
✅ Leveraging Go’s concurrency model for performance.

3️⃣ Kubernetes for Deployment ☸️
Deploying the application on Kubernetes taught me how to orchestrate containers at scale. Kubernetes simplified the process of managing microservices.

Key Insights:
✅ Writing Kubernetes manifests for deployments and services.
✅ Managing service discovery between pods.
✅ Using kubectl commands for monitoring and troubleshooting.

4️⃣ SMTP for Email Alerts 📧
Integrating SMTP for email notifications was a new and fun challenge. Alerts are dispatched in real-time when rules are violated, keeping users informed.

🔑 Project Highlights
💡 Dynamic Rules: Define and manage alerting rules via REST APIs.
🔗 Kafka Integration: Ensures seamless and scalable message flow.
📩 Real-Time Alerts: Receive email notifications when thresholds are breached.

📖 Example Workflow
1️⃣ Define a Rule:

curl -X POST -H "Content-Type: application/json" \
     -d '{"metric": "cpu_usage", "threshold": 80, "operator": ">"}' \
     http://localhost:8004/api/rules

2️⃣ Send Metrics:

curl -X POST -H "Content-Type: application/json" \
     -d '{"metricName": "memory_usage", "value": 77, "timestamp": "2024-12-19T12:00:00Z"}' \
     http://localhost:8001/api/metrics

3️⃣ Receive Alerts:
🚨 Email notifications are sent when the rule is triggered!

🛠️ Tools and Tech Stack
Programming Language: 🐹 Go
Message Broker: 📡 Kafka
Orchestration: ☸️ Kubernetes
Containerization: 🐳 Docker
Email Notifications: 📧 SMTP
🎯 Final Thoughts
This project was a game-changer for my understanding of distributed systems, microservices, and tools like Kafka and Kubernetes. It was a challenging yet rewarding experience that pushed my skills to the next level. 🚀

Want to explore the project or try it yourself? Check it out on GitHub:
👉 go-alert-system

Have you worked on similar projects or explored Kafka and Kubernetes? Let’s chat in the comments below! 💬 I’d love to hear your experiences and insights.

Let me know if you'd like to tweak anything else or add more flair! 🌟

Intelligent Automation

Serdar Shefketov — Sat, 31 Aug 2024 10:45:40 +0000

This is a submission for the Nylas Challenge: AI Expedition.

What I Built and Why

I created an intelligent automation tool for managing emails and events, utilizing the Nylas API to provide context-aware interactions. The application allows users to select specific contexts (e.g., emails from the current week or upcoming events) and then engage with an AI model to generate insights and summaries. This tool aims to enhance productivity by offering a seamless way to query and analyze email and calendar data through dynamic AI-driven responses.

The motivation behind this project was to streamline email and event management by integrating advanced AI capabilities, making it easier for users to get actionable insights and summaries from their data. The ability to interact with an AI model in a context-aware manner enhances user experience and provides a more intuitive way to manage information.The integration of the LLaMA 3 model ensures that users receive accurate and relevant information based on their selected context.

Demo

Code

You can review the code for this project on GitHub: https://github.com/ssheffk/nylas-ai. The project is licensed under the MIT License.

Your Journey

Leveraging the Nylas API was central to this project. By using endpoints such as emails-current-week, emails-recent, emails-recent-unread, emails-drafts-recent, events-today, events-current-week, and events-current-month, we were able to pull relevant email and event data in real-time. This integration allowed us to build a system where users can select a context and interact with an AI model to generate precise answers and summaries.

Throughout the development, we learned how to effectively integrate Nylas’ APIs to manage and process large volumes of email and event data. We optimized data handling to ensure real-time responses and enhanced the AI’s ability to generate meaningful insights based on the context.

We are most proud of the seamless user experience we created. The ability to dynamically interact with the AI based on real-time data from the Nylas API offers a powerful tool for users to efficiently manage and gain insights from their emails and calendar events.

Thank you !