Путь не найден при интеграции приложения React с Django

Я использую Django 4 и хочу интегрировать приложение ReactJS в Django framework.

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

Вот список установленных компонентов и версий:

├── @babel/core@7.20.12
├── @babel/preset-env@7.20.2
├── @babel/preset-react@7.18.6
├── babel-loader@9.1.2
├── clean-webpack-plugin@4.0.0
├── css-loader@6.7.3
├── react-dom@18.2.0
├── react@18.2.0
├── style-loader@3.3.1
├── webpack-bundle-tracker@0.4.3
├── webpack-cli@5.0.1
└── webpack@5.75.0

Я не хочу публиковать здесь весь мой код, так как он на 100% идентичен коду, приведенному в ссылке выше.

К сожалению, я получаю странную ошибку в консоли:

GET http://127.0.0.1:8001/frontend/static/frontend/frontend-dc3188e75be82e0a01e0.js net::ERR_ABORTED 404 (Not Found)

127.0.0.1/:1 Refused to execute script from 'http://127.0.0.1:8001/frontend/static/frontend/frontend-dc3188e75be82e0a01e0.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

Похоже, что это связано с путем, но имя файла JS в ссылке написано правильно и существует точно по указанному пути.

На консоли сервера также отображается аналогичная ошибка:

Not Found: /frontend/static/frontend/frontend-dc3188e75be82e0a01e0.js

Сообщение об ошибке "GET http://127.0.0.1:8001/frontend/static/frontend/frontend-dc3188e75be82e0a01e0.js net::ERR_ABORTED 404 (Not Found)" говорит о том, что JavaScript файл 'frontend-dc3188e75be82e0a01e0.js' не может быть найден по указанному пути '/frontend/static/frontend/'. Это может быть вызвано несколькими различными проблемами:

  1. Неправильный путь к файлу: Убедитесь, что путь к файлу, указанный в HTML-файле, верен и что файл действительно существует в этом месте.

  2. Конфигурация webpack: Убедитесь, что конфигурация webpack настроена правильно и что путь вывода установлен в правильное место.

  3. Статические файлы Django: Проверьте настройки вашего проекта Django, чтобы убедиться, что статические файлы обслуживаются правильно. Убедитесь, что путь к статическим файлам правильный, и что команда 'collectstatic' была запущена.

    .

  4. Имя файла: дважды проверьте имя файла в HTML-файле, оно должно совпадать с именем файла в пути, если нет, измените его на правильное.

  5. Разрешение файла: Убедитесь, что файл имеет правильные разрешения и что у сервера есть разрешение на чтение файла.

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

Представленная вами ссылка является старым учебником. Вы всегда должны следовать документации. На основе документации

Вы должны сгенерировать внешний пакет с помощью webpack-bundle-tracker перед использованием django-webpack-loader. Вы можете скомпилировать активы и сгенерировать пакеты, выполнив:

npx webpack --config webpack.config.js --watch

это настройки конфигурации webpack, связанные с webpack-bundle-tracker. Он выплевывает файл webpack-stats.json и выглядит как django webpack-loader читает из этого .json файла

const path = require('path');
const webpack = require('webpack');
const BundleTracker = require('webpack-bundle-tracker');

module.exports = {
  context: __dirname,
  entry: './assets/js/index',
  output: {
    path: path.resolve('./assets/webpack_bundles/'),
    filename: "[name]-[hash].js"
  },
  plugins: [
    new BundleTracker({filename: './webpack-stats.json'})
  ],
}

и затем:

WEBPACK_LOADER = {
  'DEFAULT': {
    'CACHE': not DEBUG,
    'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
    'POLL_INTERVAL': 0.1,
    'IGNORE': [r'.+\.hot-update.js', r'.+\.map'],
  }

Спасибо за отзыв. Вот как я в итоге выполнил эту интеграцию, полностью используя комбинацию онлайн-учебников, отзывов здесь и github-репо для django-webpack-loader.

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

A: Установка приложения Django и зависимостей

  1. Создайте фронтенд-приложение в Django
python manage.py startapp frontend
  1. Обновите список установленных приложений в settings.py или base.py:
INSTALLED_APPS = [
  'frontend',
  ...
]

  1. Создайте папку templates для приложения frontend. В моем случае каталог Templates находится в корне проекта, поэтому в папку 'frontend' я добавил: ./templates/frontend

    .

  2. Создайте шаблон во вновь созданной папке frontend: ./templates/frontend/index.html

    .

  3. Добавьте следующее в index.html, который содержит теги Django для последующего использования для рендеринга пакета:

<!DOCTYPE html>
{% load render_bundle from webpack_loader %}
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Site</title>
</head>
<body>
  <div id="app"></div>
  <p>hello</p>
  {% render_bundle 'frontend' %}
</body>
</html>
  1. Создайте представление в приложении frontend/views.py
    2. . 
from django.shortcuts import render

def index(request):
  return render(request, 'frontend/index.html')
  1. Обновите шаблон URL в urls.py на уровне проекта: config/urls.py. В данном случае приложение react загружается из корня домена. Я рекомендую использовать эту конфигурацию (описанную в шаге 7 и 8), иначе вы будете получать ошибки пути. Это можно изменить позже.
path('', include('frontend.urls'))
  1. Обновите шаблоны URL в urls.py на уровне приложения:
path('', views.index)
  1. На этом этапе вы можете протестировать и запустить сервер или продолжить. Если вы тестируете, помните, что в Шаге 5 загружаются 2 тега Django, которые вам нужно будет закомментировать.
    2. . 
python manage.py runserver

B: Установите React & Babel

  1. В корне проекта выполните следующую команду для создания файла package.json.
npm init -y
  1. Установите Babel.
npm install --save-dev @babel/core
  1. Установите плагины Babel:
npm install --save-dev @babel/preset-env @babel/preset-react
  1. Создайте файл .babelrc в корне вашего проекта и добавьте в него следующее:
{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

C: Install & Configure Webpack

  1. Установите Webpack и дополнительные пакеты.
npm install --save-dev webpack webpack-cli webpack-bundle-tracker babel-loader css-loader style-loader clean-webpack-plugin
  1. Создайте файл webpack.config.js в корне проекта.
    2. . 
const path = require('path');
const webpack = require('webpack');
const BundleTracker = require('webpack-bundle-tracker');
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
    context: __dirname,
    entry: {
        frontend: './frontend/src/index.js',

    },
    output: {
        path: path.resolve('./frontend/static/frontend/'),
        filename: '[name]-[hash].js',
        publicPath: 'static/frontend/',
    },
    plugins: [
        new CleanWebpackPlugin(),
        new BundleTracker({ filename: './webpack-stats.json' })
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: ['babel-loader'],
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
        ],
    },
}
  1. Добавьте следующие скрипты в файл package.json, расположенный в корне проекта. У вас уже должны быть скрипты в этом файле; просто добавьте две новые строки кода для "dev" и "build".:
{
  ...,
  "scripts": {
    ...,
    "dev": "webpack --config webpack.config.js --watch --mode development",
    "build": "webpack --config webpack.config.js --mode production"
  }
}

C: Создание базового React APP для тестирования

  1. В папке frontend app создайте папку src.

  2. В папке src создайте файл App.js. Обязательно соблюдайте капитализацию. И добавьте в него следующее:

import React from 'react'

const App = () => {
  return (
    <div>Hello, World!</div>
  )
}

export default App
  1. В папке src создайте файл index.js и добавьте в него следующее:
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(
  <App />,
  document.getElementById('app')
)

D: Install Webpack Loader & Configure

  1. Выполните следующую команду:
pip install django-webpack-loader
  1. Обновите список установленных приложений в settings.py или base.py:
INSTALLED_APPS = (
  ...
  'webpack_loader',
  ...
)
  1. Также обновите конфигурации Webpack Loader в файле settings.py или base.py:
WEBPACK_LOADER = {
  'DEFAULT': {
    'CACHE': not DEBUG,
    'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
    'POLL_INTERVAL': 0.1,
    'IGNORE': [r'.+\.hot-update.js', r'.+\.map'],
  }
}

Если вы получаете ошибку, связанную с DEBUG, проверьте доступные опции в инструкции django-webpack-loader (ссылку смотрите ниже).

E: Компиляция файлов активов фронтенда и тестирование

  1. Если вы закомментировали теги django в шаге A9, удалите комментарий, прежде чем продолжить.

  2. Выполните следующую команду:

npx webpack --config webpack.config.js --watch
  1. Запустите свой сервер: 
python manage.py runserver
  1. Откройте браузер и перейдите в корень вашего сайта. Вы должны получить на экране распечатку Hello World. Если это не так, и вы получаете только пустой белый экран, то активы react не загружаются. Проверьте консоль сервера и/или консоль браузера на наличие ошибок.

Ссылки: Устаревший учебник https://dev.to/zachtylr21/how-to-serve-a-react-single-page-app-with-django-1a1l

django-webpack-loader repo https://github.com/django-webpack/django-webpack-loader

Вернуться на верх