Ever found yourself muttering, \u201cWhy can\u2019t my FastAPI app just refresh the browser automatically when I make a change?\u201d Trust me, you\u2019re not alone. As a web developer working with Python ASGI frameworks like FastAPI for a full stack application, those constant manual reloads can be a real buzzkill. Enter Arel \u2013 your new best friend for adding seamless hot-reloading to your FastAPI projects. Let\u2019s dive into how you can integrate Arel into your workflow and transform your development experience!<\/p>\n\n
FastAPI is a fantastic, high-performance framework for building APIs with Python. It\u2019s built on top of ASGI (Asynchronous Server Gateway Interface) and leverages the Uvicorn web server to deliver a sleek and efficient development experience. However, out of the box, FastAPI doesn\u2019t come with built-in browser hot-reloading. That\u2019s where Arel steps in.<\/p>\n\n
Arel is a lightweight library designed to implement development-only hot-reloading for non-Python files that are not dynamically read from disk on each request. This includes:<\/p>\n\n
Arel keeps an eye on the files you specify. When it detects a change, it sends a notification to the browser via WebSocket. An injected client script then triggers a page reload, ensuring your latest changes are visible immediately. You can also register custom reload hooks for any additional server-side operations, such as refreshing cached content or re-initializing other resources.<\/p>\n\n
First things first, let\u2019s get Arel installed. Open your terminal and run:<\/p>\n\n
To ensure everything runs smoothly, make sure you have the following packages installed:<\/p>\n\n You can install them all at once like this:<\/p>\n\n Let\u2019s walk through setting up Arel in your FastAPI project. I\u2019ve also shared a GitHub repository with a complete example you can reference.<\/p>\n\n Here\u2019s a quick glance at the structure of the project: Here\u2019s how you can set up your main.py to integrate Arel with FastAPI: To activate hot reloading, you need to set the DEBUG flag to True. You can do this directly in your FastAPI application or by using an environment variable.<\/p>\n\n Setting Debug in Code:<\/p>\n\n Set the DEBUG environment variable before starting your FastAPI server:<\/p>\n\n This command tells Uvicorn to start your FastAPI app with hot-reloading enabled.<\/p>\n\n Integrating Arel into your FastAPI project is a straightforward way to boost your development workflow with browser hot-reloading. No more tedious manual refreshes\u2014just quick, automatic updates that let you focus on building awesome features.<\/p>\n\n Ready to give it a try? Check out the GitHub repository<\/a> for a complete implementation and start enhancing your FastAPI development experience today!<\/p>\n\n Happy coding! \ud83d\ude80<\/p>\n\n","category":["python","fastapi","tutorial","productivity"]}}}pip install arel<\/code><\/p>\n\n\n \n \n Package Requirements\n<\/h3>\n\n
\n
pip install arel fastapi jinja2 uvicorn[standard]<\/code><\/p>\n\n\n \n \n Setting Up Arel with FastAPI\n<\/h2>\n\n
\n \n \n Project Structure\n<\/h3>\n\n
\n<\/p>\n\n\u251c\u2500\u2500 main.py\n\u251c\u2500\u2500 templates\n\u2502 \u251c\u2500\u2500 base.html\n\u2502 \u2514\u2500\u2500 index.html\n\u2514\u2500\u2500 requirements.txt\n<\/code><\/pre>\n\n<\/div>\n\n\n\n\n \n \n Templates Configuration\n<\/h3>\n\n
base.html<\/code>: Your base template sets up the structure for your HTML pages and includes the hot-reload script when in debug mode.
\n<\/p>\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>FastAPI with Arel<\/title>\n<\/head>\n<body>\n {% block content %}{% endblock %}\n\n <!-- Hot reload script -->\n {% if DEBUG %}\n {{ hot_reload.script(url_for('hot-reload')) | safe }}\n {% endif %}\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n<\/div>\n\n\n\nindex.html<\/code>: This is a simple template that extends base.html and contains some content to demonstrate hot reloading.
\n<\/p>\n\n{% extends \"base.html\" %}\n\n{% block content %}\n <h1>Testing Hot Reloading<\/h1>\n <p>Look! Auto hot-reloading in action. It sure makes development a breeze!<\/p>\n{% endblock %}\n<\/code><\/pre>\n\n<\/div>\n\n\n\n\n \n \n Main Application Setup\n<\/h3>\n\n
\n<\/p>\n\nimport os\nimport arel\nfrom fastapi import FastAPI, Request\nfrom fastapi.templating import Jinja2Templates\n\napp = FastAPI()\ntemplates = Jinja2Templates(\"templates\")\n\nif _debug := os.getenv(\"DEBUG\"):\n hot_reload = arel.HotReload(paths=[arel.Path(\".\")])\n app.add_websocket_route(\"\/hot-reload\", route=hot_reload, name=\"hot-reload\")\n app.add_event_handler(\"startup\", hot_reload.startup)\n app.add_event_handler(\"shutdown\", hot_reload.shutdown)\n templates.env.globals[\"DEBUG\"] = _debug\n templates.env.globals[\"hot_reload\"] = hot_reload\n\n@app.get(\"\/\")\ndef index(request: Request):\n return templates.TemplateResponse(\"index.html\", context={\"request\": request})\n<\/code><\/pre>\n\n<\/div>\n\n\n\n\n \n \n Enabling Hot Reloading\n<\/h3>\n\n
app = FastAPI(debug=True)<\/code><\/p>\n\nDEBUG=true uvicorn main:app --reload<\/code><\/p>\n\n\n \n \n Wrapping Up\n<\/h2>\n\n