Disclaimer
There are multiple possible ways of using React with a backend framework -- steps presented below are showing one possible way of connecting those on PythonAnywhere to make rather a starting point for further adjustments.
Prerequisites
It's assumed that you have a working Node.js environment on your PythonAnywhere account -- otherwise follow steps mentioned on this help page.
Creating a scaffold React frontend app
Assuming your web app (Django or Flask) is at ~/mysite directory:
cd ~/mysite
npx create-react-app frontend
If that works fine, enter the frontend directory and create a production build of the React app:
cd frontend
npm run build
That will add a build directory with a static subdirectory inside. Have a look where index.html as well as css and js resources are located:
~/mysite/frontend $ tree -I node_modules
...
├── build
│ ├── asset-manifest.json
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ ├── robots.txt
│ └── static
│ ├── css
│ │ ├── main.073c9b0a.css
│ │ └── main.073c9b0a.css.map
│ ├── js
│ │ ├── 787.cda612ba.chunk.js
│ │ ├── 787.cda612ba.chunk.js.map
│ │ ├── main.b7ea7086.js
│ │ ├── main.b7ea7086.js.LICENSE.txt
│ │ └── main.b7ea7086.js.map
│ └── media
│ └── logo.6ce24c58023cc2f8fd88fe9d219db6c6.svg
...
Django
It's assumed you created a Django web app in ~/mysite with our wizard on the Web app page.
settings.py
Open ~/mysite/mysite/settings.py.
Assuming that BASE_DIR is a pathlib.Path object (you may need to adjust the syntax if you use os.path instead), tell Django where to look for the basic index.html template provided by React:
FRONTEND_DIR = BASE_DIR / "frontend"
TEMPLATES = [
{
...
"DIRS": [
FRONTEND_DIR / "build",
],
...
},
]
Next, point Django to the static resources provided by the React build:
STATIC_URL = "/static/"
STATICFILES_DIRS = [
FRONTEND_DIR / "build/static",
]
urls.py
Let's use a simple TemplateView serving index.html provided by the frontend app:
from django.views.generic import TemplateView
urlpatterns = [
path("admin/", admin.site.urls),
path("", TemplateView.as_view(template_name="index.html")),
]
Set static files mappings
Adjust the static files mappings to serve the React ones (use your username instead of "username"):
| URL | Directory |
|---|---|
| /static/ | /home/username/mysite/frontend/build/static |
If you want your admin to have a proper CSS, add this as well:
| /static/admin | /home/username/mysite/static/admin |
Flask
It's assumed you created a Flask web app in ~/mysite with our wizard on the Web app page.
flask_app.py
Open ~/mysite/flask_app.py and edit it so it contains:
from flask import Flask
app = Flask(__name__, static_folder="./frontend/build", static_url_path="/")
@app.route('/')
def index():
return app.send_static_file('index.html')
Static files mappings
Adjust the static files mappings to serve the React ones (use your username instead of "username"):
| URL | Directory |
|---|---|
| /static/ | /home/username/mysite/frontend/build/static |
Go live!
Reload the web app and you should see the default React page when you visit it. It may display a message "Edit src/App.js and save to reload" -- note that that will not work automatically on PythonAnywhere, since it is not possible to run a development server on PythonAnywhere, you'd need to build React files again instead.