DEV Community

Cover image for Seamless Integration: Dockerizing FastAPI and Streamlit Together
Rafa Rafael
Rafa Rafael

Posted on

Seamless Integration: Dockerizing FastAPI and Streamlit Together

I’m cooking up a snazzy REST API using Python’s FastAPI, and guess what? I’m getting a helping hand from OpenAI’s API for those fancy embeddings and chat finishes.

Now, Swagger UI is like that one guest who dozes off after a hearty meal — it gets sluggish with too much data. So, I brought in Streamlit! It’s like the quick and witty friend who always has a tool up their sleeve, and the best part? It speaks Python, just like us.

To keep things neat and not mix my spaghetti with my meatballs, I’ve given the backend and frontend their own cozy rooms (folders) with their Dockerfile luggage. And just to jazz things up, there’s a snappy docker-compose.yml tune at the project’s entrance to keep the party running without a hitch!

directory structure image

Think of it this way: both have their own localhost homes, but if you knock on the 0.0.0.0 door, you’ll be greeted by the first container — probably with a virtual cup of tea! So doing this is like setting up a playdate for our two containers! In our local development playground, they can chit-chat seamlessly.

At first glance, it might seem like we’re diving into a plot twist in a mystery novel. But fear not! As you flip through each page (or, in our case, code file), you’ll soon realize it’s more like a light-hearted comedy — easy to follow and fun to understand!

Alright, grab your coding apron! Below are some ‘recipes’ for each file. Feel free to add a pinch of this or a dash of that to tailor them to your gourmet coding tastes.

Before we whip up our docker-compose masterpiece, make sure your directories are named backend and frontend or change them if you want to suit your palate. Think of it as prepping your ingredients before a big bake-off! Once that’s sorted, snag the recipe below and let’s get mixing.

docker-compose.yml image

And for the backend dish — just follow grandma’s secret recipe below. Copy and you’re one step closer to culinary coding magic!

dockerfile backend image

Moving on to the frontend course — let’s keep the culinary coding spree going!

dockerfile frontend image

Voilà! Once you’ve prepped everything, simply fire up the kitchen with docker-compose up --build to get all those ingredients mingling in each directory. Then, for a taste of your backend, pop over to 0.0.0.0:8001, and for a slice of the frontend action, it's 0.0.0.0:8501.

Bon Appétit to your coding dish!

Top comments (0)