Среда разработки Django порт 8000 для обслуживания React (staticfiles)

Я пытаюсь создать среду разработки для React и Django.

https://github.com/axilaris/django-react <-- Вот код моего проекта для справки. Вы можете легко запустить его, используя приведенные ниже инструкции.

Django (работает на порту 8000)

cd backend <-- to to this directory
backend> python3 -m venv backendvirtualenv && source backendvirtualenv/bin/activate
backend> pip install -r requirements.txt
backend> python manage.py makemigrations
backend> python manage.py migrate
backend> python manage.py runserver

Реакция (работает на порту 3000) 

cd frontend <-- to to this directory
frontend> npm install
frontend> npm run build
frontend> npm start

Однако я пытаюсь обслуживать статические файлы React в Django, чтобы я мог запускать React на localhost:8000.

В файле настроек:

BASE_DIR = os.path.dirname(os.path.abspath(__file__))
STATICFILES_DIRS = [os.path.join(BASE_DIR, '../frontend/build/static')]
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

и я бегу

backend> python manage.py collectstatic
backend> python manage.py runserver

Однако, когда я указываю на свой браузер (http://localhost:8000/). В нем все еще нет страниц React.

image description

Как настроить

django так, чтобы можно было запускать React и Django вместе на порту 8000 ?

Выполните следующие действия в указанном порядке.

  • Открыть консоль

  • запускаем python manage.py startapp frontend

  • войдите в frontend folder, только что созданный командой выше, и

    • создайте файл под названием urls.py
    • создайте папку templates
    • создайте папку под названием static

  • добавьте только что созданное frontend приложение в проект settings.py (в установленных приложениях, как это обычно делается) ref

    .

  • Переместите/копируйте содержимое папки react app во вновь созданную папку templates и папку static

  • Откройте views.py и создайте представление index ref - (Поместите содержимое index.js в index.html и используйте тег django static template и поместите соответствующие url для импортов app.js, app.css, index.css.)

  • Откройте urls.py и добавьте index view ref

    .

  • Откройте проект urls.py и добавьте пустую карту путей к только что созданному индексному представлению ref

    .

Django не является статическим сервером. Даже если вы можете разместить его из статической папки в разработке, в производстве он (статические файлы) должен обрабатываться CDN или nginx. Не django.

В этом ответе показано, как преобразовать приложение react в приложение django.

Думаю, это то, что вы ищете: https://fractalideas.com/blog/making-react-and-django-play-well-together-hybrid-app-model/

В нем используются whitenoise и collectstatic

Идея заключается в том, что вы можете создать свое приложение React, а после сборки HTML будет обслуживаться Django в качестве шаблона, а Whitenoise будет использоваться для статических файлов (js/css/svg и т.д.)

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