django-webpack-loader 不使用 react-app-rewired 渲染反应应用程序答案

【问题标题】：django-webpack-loader not rendering react app using react-app-rewireddjango-webpack-loader 不使用 react-app-rewired 渲染反应应用程序
【发布时间】：2019-01-17 18:01:50
【问题描述】：

我正在努力将我的 react(16.6.3) 和 Django(2.0) 应用程序捆绑在一起。现在我正在努力让开发服务器正常工作，稍后将专注于生产。我一直在关注这个过程的一些指南，但它们都有点不同（而且大多数似乎已经过时），而且我无法找到正确的组合来实现这个过程。我的最终目标是希望能够从 1 个终端窗口运行开发服务器。

我使用 react-app-rewired 是因为我不想弹出。我的理解是，最好不要弹出而不是手动配置所有 Webpack 配置。这对我来说尤其如此，因为我还在学习 react/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"),
    }
}
...

config-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 时，我看到的只是一个基本页面：

项目结构：

.
├── 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

【问题讨论】：

标签： python django reactjs webpack django-webpack-loader

【解决方案1】：

Django 不知道该提供什么。您需要构建应用程序，然后将构建的应用程序与 django 作为静态服务。

或者，在开发过程中，使用 npm start run 为 react 应用程序提供服务，并使用 python manage.py runserver 分别为 Django 提供服务。不确定两个系统之间有什么相互依赖关系，但您应该能够根据端口号动态指定 npm/django 之间的路由。

对于生产，资产的服务应该使用专用的网络服务器（例如 Nginx）并建立路由，以便 Nginx 充当路由到 Django 端点（例如 API）的反向代理。

使用您当前的方法，下面的这一行试图让 Django 使用 Django 模板呈现 html 文件，而不是响应模板，因此您得到错误的输出。

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

您必须构建源代码以便通过 react 解析这些模板，或者通过 npm 提供 react 代码。

虽然可以通过 django 提供服务，但将 react 和 django 分开提供服务要简单得多。这种方式的一个好处是您已经将前端（react）与后端（django）分离，如果您对其中任何一个进行更改，您只需重新启动该服务（前端或后端）

【讨论】：

所以我每次在开发过程中进行更改时都需要运行 npm run build 以便 Django 接受更改？
我应该补充一点，我对使用 django-webpack-loader 和 webpack-bundle-tracker 的理解是热重载会起作用，因此我不必采取手动步骤。这是我一直关注的指南之一，其中提到了这一点：techiediaries.com/django-react-rest
绝对。我刚刚浏览了教程，看起来他们正在使用 npm (npm run start) 为反应前端提供服务，而 django 正在单独运行 api。这是一个非常常见的设置，意味着您可以在 react 中热重载代码。虽然可以通过 django 提供 react 资产，但他们这样做的方式很好。
我的目标是不必打开 2 个单独的终端窗口来进行我的开发。 1 表示反应，1 表示 Django。听起来你在说这是不可能的。
@brewcrazy 请标记为已回答，如果有帮助请点赞。

【解决方案2】：

其实这是一个语法相关的问题，Django 标签语法看起来像{% tag %} 而不是{ % tag % }（大括号和百分号之间没有空格）。

更多信息请参考Django template language。

【讨论】：