django-webpack-loader не рендерит реагирующее приложение с помощью response-app-rewired - PullRequest
Новая
       33

django-webpack-loader не рендерит реагирующее приложение с помощью response-app-rewired

0 голосов
/ 17 января 2019

Я работаю над тем, чтобы связать мои приложения реакции (16.6.3) и Django (2.0) вместе. Сейчас я просто работаю над тем, чтобы заставить работать сервер dev, и позже сосредоточусь на производстве. Я следовал горстке руководств по этому процессу, но все они немного отличаются (и большинство кажется устаревшими), и я не смог найти правильную комбинацию, чтобы заставить это работать. Моя конечная цель - чтобы я мог запускать серверы разработки из 1 окна терминала.

Я использую response-app-rewired, потому что я не хотел бы извлекать. Насколько я понимаю, более желательно не извлекать, а вручную настраивать все конфигурации Webpack. Это может быть особенно верно для меня, так как я все еще учусь реагировать / webpack.

Это мое понимание того, что, как только это настроено, мне просто нужно запустить сервер Django, и он должен отобразить мое приложение. Я не запускаю collectstatic или какие-либо npm start или команды сборки.

Вот что я настроил:

base.py 

...    
STATICFILES_DIRS = [
        # os.path.join(os.path.join(BASE_DIR, 'frontend'), 'build', 'static')
        os.path.join(BASE_DIR, "frontend", "build", "static"),
    ]
...

local.py 

...
WEBPACK_LOADER = {
    "DEFAULT": {
        "CACHE": not DEBUG,
        "BUNDLE_DIR_NAME": "frontend/build/static/",  # must end with slash
        "STATS_FILE": os.path.join(BASE_DIR, "frontend", "build", "webpack-stats.json"),
    }
}
...

конфиг-overrides.js 

var BundleTracker = require('webpack-bundle-tracker');

module.exports = {
  webpack: (config, env) => {

    config.plugins.push(
      new BundleTracker({
        path: __dirname,
        filename: './build/webpack-stats.json'
      }),
    );

    return config;
  },
};

main.html 

{ % load render_bundle from webpack_loader % }

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Django + React CRUD</title>
  </head>
  <body>
    <div id="root">
     This is where React will be mounted
    </div>
    { % render_bundle 'main' % }
  </body>
</html>

urls.py 

from django.contrib import admin
from django.urls import path, include
from django.views.generic import TemplateView

urlpatterns = [
    path('admin/', admin.site.urls),
    path(r'', include('api.urls')),
    path(r'', TemplateView.as_view(template_name="main.html"))
]

При такой конфигурации и работающем сервере Django, когда я перехожу на localhost: 8000, я вижу только базовую страницу:

enter image description here

Структура проекта: 

.
├── api
│   ├── __init__.py
│   ├── __pycache__
│   ├── admin.py
│   ├── apps.py
│   ├── migrations
│   ├── models.py
│   ├── serializers.py
│   ├── tests.py
│   ├── urls.py
│   └── views.py
├── financeApp
│   ├── __init__.py
│   ├── __pycache__
│   └── templates
├── build
│   └── webpack-stats.json
├── config
│   ├── __init__.py
│   ├── __pycache__
│   ├── settings
│   ├── urls.py
│   └── wsgi.py
├── database20181022.json
├── db.sqlite3
├── docker-compose-dev.yml
├── docker-compose.yml
├── docker_compose
│   ├── django
│   ├── nginx
│   ├── node
│   └── postgres
├── frontend
│   ├── README.md
│   ├── build
│   ├── config-overrides.js
│   ├── node_modules
│   ├── package-lock.json
│   ├── package.json
│   ├── package0.json
│   ├── public
│   └── src
├── manage.py
├── requirements
│   ├── base.txt
│   ├── local.txt
│   └── production.txt
├── static
│   ├── builds
│   ├── builds-development
│   └── js
├── templates
    └── main.html

Ответы [ 2 ]

0 голосов
/ 06 июня 2019

На самом деле это проблема, связанная с синтаксисом, синтаксис тегов Django выглядит как {% tag %} вместо { % tag % } (без пробела между фигурной скобкой и знаком процента).

Для получения дополнительной информации, пожалуйста, обратитесь к языку шаблонов Django .

0 голосов
/ 17 января 2019

Джанго не будет знать, что служить.Вам необходимо создать приложение, а затем использовать встроенное приложение с django в качестве статического.

В качестве альтернативы, при разработке обслуживайте приложение реагировать, используя npm start run, а Django отдельно - python manage.py runserver.Не уверен, какие у вас взаимозависимости между двумя системами, но вы должны иметь возможность динамически определять маршрутизацию между npm / django на основе номера порта.

Для производства обслуживание ресурсов должно выполняться с выделеннымвеб-сервер (например, Nginx) и маршрутизация установлены так, что Nginx действует как обратный прокси-сервер для маршрутизации к конечным точкам Django (например, API).

При вашем текущем подходе эта строка ниже пытается получить Djangoдля рендеринга html-файла с использованием шаблонов Django вместо шаблонов реагирования, чтобы получить неверный вывод. 

TemplateView.as_view(template_name="main.html")

Вы должны либо создать исходный код, чтобы эти шаблоны разрешались по реакции, либо обслуживать код реагирования.через нпм.

Хотя возможно служить через Джанго, но гораздо проще обслуживать Реагировать и Джанго по отдельности.Преимущество этого способа заключается в том, что вы отсоединили интерфейс (реакцию) от бэкэнда (django), и если вы вносите изменения в любой из них, вам нужно только перезапустить этот сервис (фронт или бэкэнд)

...