Menu
After building a flutter web app with
flutter build web
I want to serve the app using a simple Django server. How can I do that?
379
This series of posts intends to develop a flutter signup/login app working with API calls to Django backend. The idea is to use the DRF to create APIs which can be called by the flutter application.
Chrome; debugging a web app requires the Chrome browser. Optional: An IDE that supports Flutter. You can install Android Studio, IntelliJ IDEA , or Visual Studio Code and install the Flutter and Dart plugins to enable language support and tools for refactoring, running, debugging, and reloading your web app within an editor.
If Chrome is installed, the flutter devices command outputs a Chrome device that opens the Chrome browser with your app running, and a Web Server that provides the URL serving the app. In your IDE, you should see Chrome (web) in the device pulldown.
This page covers the following steps for getting started with web support: Configure the flutter tool for web support. Create a new project with web support. Run a new project with web support. Build an app with web support. Add web support to an existing project. To create a Flutter app with web support, you need the following software:
After running the command, copy the build\web directory from the flutter project to your django project. Let's say you put it at the root and renamed it to flutter_web_app.
So we have,
djangoproject
| djangoproject
| settings.py
| urls.py
| ...
| flutter_web_app
| ...
| other apps
Now edit the base tag in flutter_web_app/index.html to give the application a prefix. Note that the prefix/base should start and end with a /.
<head>
...
<base href="/flutter_web_app/">
...
</head>
Now, in your djangoproject/urls.py, match the prefix and serve your flutter application.
from django.urls import path
from django.views.static import serve
import os
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
FLUTTER_WEB_APP = os.path.join(BASE_DIR, 'flutter_web_app')
def flutter_redirect(request, resource):
return serve(request, resource, FLUTTER_WEB_APP)
urlpatterns = [
...
path('flutter_web_app/', lambda r: flutter_redirect(r, 'index.html')),
path('flutter_web_app/<path:resource>', flutter_redirect),
]
Running this locally, url 127.0.0.1/flutter_web_app will serve our flutter_web_app/index.html.
All the files required by the flutter application are prefixed with flutter_web_app. For eg. main.dart.js is requested with a GET to flutter_web_app/main.dart.js. We extract the path after the prefix as resource and serve the corresponding file from flutter_web_app directory (flutter_redirect function).
160
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
