Browser hot-reloading for Python ASGI web apps using arel

ashleymavericks

Anurag Singh

Posted on June 30, 2024

Browser hot-reloading for Python ASGI web apps using arel

One day I was just frustrated from this fact that while doing web development using Python ASGI frameworks like FastAPI there is no browser hot-reloading functionality available. I dig deeper and found about arel. This tutorial will you to implement arel in your development workflow for a better experience.

Browser hot reloading is a popular feature for developers that allows for rapid iteration and debugging of web applications. It allows for changes made to the codebase to be reflected instantly in the browser, eliminating the need for manual reloading or rebuilding.

One framework that makes use of hot reloading is FastAPI, a high-performance web framework for building APIs. FastAPI is built on top of ASGI (Asyncronous Server Gateway Interface) and utilizes the Uvicorn web server to provide a smooth and efficient development experience.

To enable hot reloading in FastAPI, we can use the arel library. Arel is a lightweight library that provides hot reloading functionality for Python web applications. It works by automatically detecting changes to the codebase and reloading the server whenever a change is detected.

pip install arel
Enter fullscreen mode Exit fullscreen mode

Package Requirements

  • arel
  • fastapi
  • jinja2
  • unicorn[standard] or
  • webhook

With these changes, our FastAPI app will now have hot reloading enabled. Any changes made to the codebase will be reflected in the browser instantly, without the need for manual reloading.

There are a few additional configuration options available for arel. For example, we can specify the directories that arel should watch for changes, or we can disable hot reloading in certain environments (such as production).

Overall, using arel to enable hot reloading in FastAPI can greatly improve the development experience, allowing for faster iteration and debugging of our web application. It is a useful tool for any FastAPI developer looking to streamline their workflow and improve their productivity.

debug flag needs to be set to True in order for hot reloading to work in FastAPI. The debug flag can be set in the FastAPI application object, like so:

app = FastAPI(debug=True)
Enter fullscreen mode Exit fullscreen mode

Alternatively, you can also set the debug flag using an environment variable. In this case, you would need to set the UVICORN_DEBUG environment variable to 1 before starting the FastAPI server.

Implementation: https://github.com/ashleymavericks/browser-hot-reloading

💖 💪 🙅 🚩
ashleymavericks
Anurag Singh

Posted on June 30, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related