如何使用 webpack 将现有的 Django 应用程序与现有的反应应用程序连接起来答案

【问题标题】：How to connect existing Django app with existing react app using webpack如何使用 webpack 将现有的 Django 应用程序与现有的反应应用程序连接起来
【发布时间】：2018-09-22 23:11:07
【问题描述】：

所以我有一个充当后端 REST 服务器的 Django 项目，我想将它与一个现有的 React 项目集成，该项目对该 REST 服务器进行 AJAX 调用。同样，这两个项目都已经存在，我只想将它们连接起来。假设我的 Django 项目的根是 DJANGOROOT，这就是 manage.py 所在的位置。我的 Django 项目有几个 Django 应用程序是项目的一部分。假设我的 Django 项目名为“mydjangoproj”，两个 Django 应用程序名为“myapp1”和“myapp2”，React 项目名为“myreactproj”。这两个项目（带有两个应用程序的 Django 项目和 React 项目）中的每一个都存储在一个单独的 GIT 存储库中，为了将它们连接到我的服务器上，我有以下目录结构：

DJANGOROOT/
DJANGOROOT/mydjangoproj
DJANGOROOT/mydjangoproj/settings.py
DJANGOROOT/mydjangoproj/urls.py
DJANGOROOT/mydjangoproj/static/
DJANGOROOT/mydjangoproj/templates/
DJANGOROOT/myapp1
DJANGOROOT/myapp2
DJANGOROOT/myreactproj
DJANGOROOT/myreactproj/package.json
DJANGOROOT/myreactproj/src
DJANGOROOT/myreactproj/src/index.js
etc

请注意，React 应用程序根文件夹位于 DJANGOROOT 内，并且与我的 django 项目和应用程序文件夹平行。

React 应用程序使用一个名为 react-scripts 的 npm 模块（参见 https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build），它有一个构建脚本，可以构建 DJANGOROOT/myreactproj/src 中的所有内容（以 index.js 为目标）并将所有这些内容放入一个名为 DJANGOROOT/myreactproj/build 的文件夹。当我运行构建（使用“npm run build”）时，它会像这样填充文件夹 DJANGOROOT/myreactproj/build：

DJANGOROOT/myreactproj/build
DJANGOROOT/myreactproj/build/index.html
DJANGOROOT/myreactproj/build/{several other files}
DJANGOROOT/myreactproj/build/static
DJANGOROOT/myreactproj/build/static/css
DJANGOROOT/myreactproj/build/static/js
DJANGOROOT/myreactproj/build/static/media

看来要将 Django 连接到我的 React 应用程序，我必须找到一种方法让 Django (mydomain.com/) 的根路径指向 DJANGOROOT/myreactproj/build/index.html。我知道我必须创建一个由在 mydomain.com/ 上运行的 Django 视图启动的“主页”模板，并且该主页模板必须像这样启动 React 应用程序：

{% load render_bundle from webpack_loader %}
{% render_bundle 'main' 'js' 'DEFAULT' %}

但我不确定我需要如何告诉 Django 在哪里查找 main.js（或者是 index.js），并且我不确定如何让 Django 查看 DJANGOROOT/ 中的所有静态内容myreactproj/build/static.

我还在 DJANGOROOT/myreactproj 中运行了“npm list webpack”来获取 webpack 的版本，它显示如下：

└─┬ react-scripts@1.0.11
  └── webpack@3.5.1

我认为这意味着 webpack 3.5.1 正在被使用，并且以某种方式与 react-scripts v 1.0.11 捆绑在一起

另外请注意，Django 应用程序已经在 NGINX 和 UWSGI 下的 HTTPS 下运行，所以这是一个真正的服务器而不是开发服务器。

经历过这个过程的人能否解释一下我需要做些什么才能正确连接这一切？

【问题讨论】：

标签： django reactjs webpack react-scripts

【解决方案1】：

如果您的 react 应用程序使用 django 只是为了通过 REST 获取数据，为什么要在 django 模板中使用 react？我认为这里的首选方法是分离而不是集成。创建独立的 react 应用使用自己的服务器（当然两者都可以在一台物理服务器上运行） - 这样您的 react 应用和 django 应用将仅通过休息调用进行通信，不需要其他任何东西。如果您在 django 应用程序中有一些资产 - 将它们移动到前端反应应用程序。

【讨论】：