How to self-host Reflex with Docker on Northflank

Reflex is an open-source framework that enables you to build beautiful, interactive web applications using pure Python. While Reflex offers convenient deployment, you might prefer to host your application on your own infrastructure to reduce costs, avoid vendor lock-in, or meet specific compliance requirements.

This guide walks you through self-hosting your Reflex application on Northflank. You'll learn how to dockerize your app, and deploy it to the cloud—all while maintaining complete control over your infrastructure.

Before we begin, you'll need:

1. A working Reflex application (Use this template if needed)
2. Basic familiarity with Docker concepts and Dockerfiles
3. A Northflank account (Sign up here)

• Dockerizing your Reflex application
• Deploying your application to Northflank
  • Setting up your Northflank project
  • Adding Redis and secret group
  • Deploying backend service
  • Deploying frontend service

Northflank is a platform that allows developers to build, deploy, and scale applications, services, databases, and jobs on any cloud through a self-service approach. For DevOps and platform teams, Northflank provides a powerful abstraction layer over Kubernetes, enabling templated, standardized production releases with intelligent defaults while maintaining the configurability you need.

To containerize your Reflex application, you'll need to create three key files at the root level of your project (the same directory as your rxconfig.py file):

{app_name}/
├── .web/
├── assets/
├── {app_name}/
│   ├── __init__.py
│   └── {app_name}.py
├── backend.Dockerfile  <-- Create this file
├── frontend.Dockerfile <-- Create this file
├── nginx.conf          <-- Create this file
└── rxconfig.py

Let's examine each file and understand its purpose:

This file creates a Docker image for your Reflex backend application. It does the following:

• Uses Python 3.12 as the base image
• Sets environment variables for Redis connection and unbuffered Python output
• Copies your application code
• Installs dependencies
• Runs the Reflex backend server

FROM python:3.12

ENV REDIS_URL=redis://redis PYTHONUNBUFFERED=1

WORKDIR /app
COPY . .

RUN pip install -r requirements.txt

ENTRYPOINT ["reflex", "run", "--env", "prod", "--backend-only", "--loglevel", "debug" ]

This file builds a Docker image for your frontend using a two-stage process:

• First stage: Uses Python to build the static files for your Reflex app
• Second stage: Uses Nginx to serve these static files efficiently

FROM python:3.12 AS builder

WORKDIR /app

COPY . .
RUN pip install -r requirements.txt
RUN reflex export --frontend-only --no-zip

FROM nginx

COPY --from=builder /app/.web/_static /usr/share/nginx/html
COPY ./nginx.conf /etc/nginx/conf.d/default.conf

This configuration file tells Nginx how to serve your application:

• It listens on port 80
• Routes API requests to the backend server (backend:8000)
• Serves static files directly

server {
 listen 80;
 listen  [::]:80;
 server_name frontend;

 error_page   404  /404.html;

 location /_event {
    proxy_set_header   Connection "upgrade";
    proxy_pass http://backend:8000;
    proxy_http_version 1.1;
    proxy_set_header   Upgrade $http_upgrade;
 }

 location /ping {
    proxy_pass http://backend:8000;
 }

 location /_upload {
    proxy_pass http://backend:8000;
 }

 location / {
   # This would be the directory where your Reflex app's static files are stored at
   root /usr/share/nginx/html;
 }

}

To deploy your Reflex app on Northflank, go to your dashboard, create a new project with any name of your choice, select a region, and click Create project.

Note: In this article we will deploy our app on Northflank cloud, but you also have an option to deploy on your own cloud. To do this, check out the guide here.

After successfully creating your project, go to the Addons tab and click Create Addon. Select Redis, then enter the required information, such as the name and version, based on your needs. Finally, click the Create Addon button.

After successfully creating your Redis addon, go to the Secrets tab and click Create new secret group. Enter the required information, such as the name, click on the link addon option and link to your Redis addon. Select the REDIS_MASTER_URL secret and add an alias with the name REDIS_URL. Finally, click the Create secret group button.

After successfully creating your secrets, the next step is to deploy your Reflex app. Navigate to the Services tab and create a new service. You can name this service "backend" or choose any other descriptive name you prefer. This service will handle the deployment of your Reflex application's backend functionality. Connect this service to your Reflex application's GitHub repository.

Select Dockerfile as your build option and specify the location of your Reflex application's backend Dockerfile, which is /backend.Dockerfile. Take a moment to double-check this path is correct.

Next, select the networking option and add a new port configuration for port 8000. Make sure to mark this port as publicly accessible and select HTTP as the protocol. After confirming these settings, click on the Create service button to begin the deployment process.

After a successful deployment, your backend service dashboard will look like this.

We just deployed the backend of our Reflex app, and now we need to deploy the frontend so it can be accessible. To do this, click on the Service tab and create a new service.

You can call this "frontend" or any name of your choice. Link to your Reflex application GitHub repository.

Select Dockerfile as your build option and then add the location of your Reflex application frontend Dockerfile, which is /frontend.Dockerfile. Make sure to verify this path.

Next, click on the Environment variable option and select Runtime variables. In the advanced option, click on Add file, and enter the information below.

Mount path:

/etc/nginx/conf.d/default.conf

Content:

server {
 listen 80;
 listen  [::]:80;
 server_name frontend;

 error_page   404  /404.html;

 location /_event {
    proxy_set_header   Connection "upgrade";
    proxy_pass ${REFLEX_BACKEND};
    proxy_http_version 1.1;
    proxy_set_header   Upgrade $http_upgrade;
 }

 location /ping {
    proxy_pass ${REFLEX_BACKEND};
 }

 location /_upload {
    proxy_pass ${REFLEX_BACKEND};
 }

 location / {
   # This would be the directory where your Reflex app's static files are stored at
   root /usr/share/nginx/html;
 }

}

This configuration overwrites our existing nginx file during deployment. We also need to add the REFLEX_BACKEND variable dynamically. To do this, click on the Add variable option and input this information:

REFLEX_BACKEND=http://{your deployed backend service name}:8000

After configuring these settings, you can now click on the Create service button.

After successfully creating your service, you can access your Reflex application using your service URL.

If you want to add a custom domain to your Reflex application on Northflank, this guide will walk you through the process step by step, ensuring a smooth setup.

You've now successfully deployed your Reflex application on Northflank! This approach gives you full control over your infrastructure while keeping all the benefits of Reflex's Python-based development. As your application grows, you can easily scale components independently, add custom domains, or implement continuous deployment. The containerized setup also ensures your application remains portable if you ever need to migrate elsewhere.