Reflex App with deployment, logging and user management.
Developed with the software and tools below.
Table of Contents
Video Walkthrough: https://www.youtube.com/watch?v=VYPsVksAqOM (Edit 29th May 2024: the video is slightly outdatet since we use the reflex-clerk pypi package instead of manually wrapping the clerk react component)
This Reflex Template facilitates the seamless creation and deployment of Reflex web applications with robust production environment setups. Leveraging Docker Compose and Caddy for orchestration and web content delivery, the project streamlines service configurations, database management, and secure routing. Automating deployment through GitHub Actions, the project offers an end-to-end solution for building feature-rich web apps with Clerk and Betterstack integrations. Its core functionalities span environment configuration, component creation, authentication handling, and logging customization, empowering developers to focus on crafting engaging user experiences.
► User Management via Clerk (clerk.com) using the reflex-clerk pypi package (https://github.com/kroo/reflex-clerk)
► Log Management via Betterstack (logs.betterstack.com)
► Production deployment of reflex app taken from: https://github.com/reflex-dev/reflex/blob/main/docker-example/README.md and https://www.youtube.com/watch?v=1iuefsBCHQc
► Github Action workflow adapted from https://github.com/masenf/rx_shout/blob/main/.github/workflows/deploy.yml
└── ./
├── .github
│ └── workflows
├── Caddy.Dockerfile
├── Caddyfile
├── LICENSE
├── assets
│ ├── dentro_logo.svg
│ └── favicon.ico
├── compose.prod.yaml
├── compose.yaml
├── prod.Dockerfile
├── reflex_template
│ ├── __init__.py
│ ├── components
│ ├── reflex_template.py
│ └── utils
├── requirements.txt
└── rxconfig.py.
| File | Summary |
|---|---|
| compose.prod.yaml | Enables running the app in production mode with Postgres and Redis. Defines services for database and caching, configures environment variables, and sets up dependencies. Utilizes Docker Compose to orchestrate the app components. |
| prod.Dockerfile | Generates a production-ready Docker image for a Reflex web app. Initializes, installs dependencies, deploys templates, and exports static frontend files. Copies artifacts into a lightweight container, handles signal handling, ensures database migrations, and runs the backend on production environment. |
| Caddy.Dockerfile | Copies web static files and configures Caddy server in the parent repository for serving web content. |
| requirements.txt | Enables Python dependencies management for the project, ensuring seamless integration of critical packages such as logtail, python-dotenv, reflex, and ruff. |
| rxconfig.py | Defines configuration for the reflex_template app using Reflex library and loads environment variables. |
| Caddyfile | Enables dynamic routing and reverse proxying for backend services in the site root based on specified rules to handle incoming requests efficiently. |
| compose.yaml | Deploys a production instance of the Reflex app with Caddy webserver for TLS termination and reverse proxying. Defines service configurations, environment variables, and volumes essential for secure and reliable deployment within the repositorys architecture. |
.github.workflows
| File | Summary |
|---|---|
| deploy.yaml | Automates deployment workflows with GitHub Actions for the repository. Manages continuous integration and deployment processes, ensuring seamless delivery of software updates. |
reflex_template
| File | Summary |
|---|---|
| reflex_template.py | Outlines steps to create a basic app, defines app state, and renders app content with user-specific greetings and info. Offers features like Clerk Integration, Betterstack Integration, Docker compose files, and Github Action for deployment. |
reflex_template.components
| File | Summary |
|---|---|
| navbar.py | Employs reflex and reflex-clerk to construct a sticky navbar with a logo, user button, and styling attributes for a cohesive front-end experience. |
reflex_template.utils
| File | Summary |
|---|
| logging_config.py | Defines custom log formatting for different log levels in the project, enhancing log clarity and readability by applying distinct colors and styles based on log severity. |
System Requirements:
- Python:
version 3.12
- Clone the . repository:
$ git clone https://github.com/dentro-innovation/reflex_template
- Change to the project directory:
$ cd reflex_template
- Create and source a python environment:
$ python3.12 -m venv .venv; source .venv/bin/activate
- Install the dependencies:
$ pip install -r requirements.txt
Create .env and set necessary environment variables (at least define CLERK_PUBLISHABLE_KEY and CLERK_SECRET_KEY):
$ mv cp .example.env .env; nano .envRun . using the command below:
$ reflex init; reflex run
Contributions are welcome! Here are several ways you can contribute:
- Report Issues: Submit bugs found or log feature requests for the
.project. - Submit Pull Requests: Review open PRs, and submit your own PRs.
- Join the Discussions: Share your insights, provide feedback, or ask questions.
Contributing Guidelines
- Fork the Repository: Start by forking the project repository to your local account.
- Clone Locally: Clone the forked repository to your local machine using a git client.
git clone ../.
- Create a New Branch: Always work on a new branch, giving it a descriptive name.
git checkout -b new-feature-x
- Make Your Changes: Develop and test your changes locally.
- Commit Your Changes: Commit with a clear message describing your updates.
git commit -m 'Implemented new feature x.' - Push to local: Push the changes to your forked repository.
git push origin new-feature-x
- Submit a Pull Request: Create a PR against the original project repository. Clearly describe the changes and their motivations.
- Review: Once your PR is reviewed and approved, it will be merged into the main branch. Congratulations on your contribution!
Contributor Graph
This project is protected under the MIT License. For more details, refer to the LICENSE file.
- Elliot Kroo for the reflex-clerk pypi package
- Masen for debugging the production deployment
- Alek for the initial Clerk reflex wrapper
- Lendemor for debugging advanced Clerk Setup with Carl
- Carl for providing code for the advanced clerk setup