Настройка разработки Django + React для гибридного приложения

Я использую гибридную установку Django + React. Django не просто выступает в качестве бэкенда для API, а фактически рендерит страницы. Эта настройка работает в продакшене, при этом некоторые запросы направляются в систему шаблонов Django, а другие (начиная с 'app/') рендерятся из index.html + статические файлы из React build.

Это работает в продакшене. Однако я пытаюсь заставить сервер разработки Django (localhost:8000) работать с сервером разработки react (localhost:3000) следующим образом.

Django backend

Urls.py

urlpatterns = [
    # React urls
    re_path(r'^app/.*',views.application,name='application'),
    # Django urls
    path("", include("my_app.urls")),
]

Views.py

def application(request, upstream='http://127.0.0.1:3000'):
    upstream_url = upstream + request.path
    with urllib.request.urlopen(upstream_url) as response:
        content_type = response.headers.get('Content-Type')
        # print('CONTENT TYPE: ',content_type)
        if content_type == 'text/html; charset=UTF-8':
            response_text = response.read().decode()
            content = engines['django'].from_string(response_text).render()
        else:
            content = response.read()
        return HttpResponse(
            content,
            content_type=content_type,
            status=response.status,
            reason=response.reason,
        )

Реакция фронтенда

App.js

function App() {
  const HomePage = () => {
  return (<h1>Home Page</h1>);
  }
  const TestPage= () => {
    return (<h1>Test Page</h1>);
  };
  return (
    <BrowserRouter>
      <Routes>
        <Route path="app/" element = {<HomePage/>}/>
        <Route path="app/test" element = {<TestPage/>}/>
      </Routes>
    </BrowserRouter>
  );
};

.env

PUBLIC_URL = app

Оба адреса /app и app/test доступны на порту 3000. Однако на порту 8000, где запущен сервер разработки Django, я могу получить только /app, а app/test возвращает HTTP Error 404: Not Found. Установка PUBLIC_URL в app/test позволяет получить доступ к этому url, но не /app.

Есть идеи, как это можно правильно настроить?

Вернуться на верх