2

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

我正在使用 react-app-rewired 因为我不想弹出。我的理解是，最好不要弹出而不是手动配置所有 Webpack 配置。这对我来说尤其如此，因为我还在学习 react/webpack。

我的理解是，一旦配置完成，我只需要运行 Django 服务器，它就会显示我的应用程序。我没有运行collectstatic或任何npm start或构建命令。

这是我配置的内容：

基础.py

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

本地.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"),
    }
}
...

配置覆盖.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>

网址.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
4

2 回答 2

1

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

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

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

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

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

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

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

于 2019-01-17T19:21:11.343 回答
0

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

更多信息请参考Django 模板语言。

于 2019-06-06T14:33:08.957 回答