首页 文章

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

提问于
浏览 次
2

所以我有一个Django项目作为后端REST服务器，我想将它与现有的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（参见https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build）的npm模块，该模块具有构建脚本，该脚本将构建DJANGOROOT / myreactproj / src中的所有内容（使用index.js进行监视）并将所有这些放在名为DJANGOROOT /的文件夹中myreactproj /编译 . 当我运行构建（使用"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中的所有静态内容/静态的 .

我还在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 回答

  • 0

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

    回复于

相关问题