Как настроить веб-приложение Django + React с помощью Webpack

Ищете способ создать веб-приложение с надежным интерфейсом React и мощным бэкэндом Django? Не смотрите дальше! Это руководство поможет вам настроить веб-приложение менее чем за пару минут.

Django — это высокоуровневая бесплатная веб-инфраструктура Python с открытым исходным кодом, которая способствует быстрой разработке и чистому прагматичному дизайну. React — это бесплатная внешняя библиотека JavaScript с открытым исходным кодом для создания пользовательских интерфейсов на основе компонентов пользовательского интерфейса, что упрощает разработку интерактивных пользовательских интерфейсов. Объединив две технологии с помощью инструмента для связывания под названием Webpack, мы можем без особых усилий создать надежное веб-приложение. Давайте начнем!

Предпосылки

Для этого руководства не так уж много вещей, которые вам нужно знать заранее, но, безусловно, было бы полезно получить базовое представление о Python и JavaScript до начала этого проекта.

Установите Python, Virtualenv и Django.

Поскольку Django — это веб-фреймворк на основе Python, нам необходимо убедиться, что Python установлен на нашем устройстве, прежде чем мы продолжим. Вот несколько статей, которые помогут вам установить Python на соответствующую платформу, если она у вас еще не установлена: Mac, Windows, Linux.

Мы будем использовать инструмент Python под названием virtualenv, который поможет нам отслеживать и управлять зависимостями для нашего проекта Django в виртуальной среде. Подробнее об этом можно узнать здесь. Мы можем установить его, запустив pip install virtualenv в окне терминала. Давайте также установим Django, запустив pip install django в окне терминала.

Настройте виртуальную среду и создайте проект Django

  • Беги django-admin startproject djangoreact

Это создаст папку с именем djangoreact, содержащую все файлы, необходимые для запуска проекта Django. Перейдите в эту папку с помощью cd djangoreact

  • Беги python -m virtualenv <path-to-env>

Это создаст новую виртуальную среду и сохранит ее в месте, указанном в разделе <path-to-env> . Вы можете указать любой путь для этой команды, но обязательно запомните этот путь, так как он понадобится вам для активации виртуальной среды каждый раз, когда вы работаете над этим проектом.

  • Запустите source <path-to-env>/bin/activate на Mac или <path-to-env>/Scripts/activate на Windows

Это активирует виртуальную среду, которую мы создали на предыдущем шаге. Вам нужно будет запускать эту команду каждый раз перед работой над этим проектом, чтобы убедиться, что ваша виртуальная среда активирована.

Вы можете запустить deactivate, чтобы деактивировать виртуальную среду в любой момент в будущем.

  • Выполнить pip install django

Это установит Django в виртуальную среду, чтобы мы могли правильно запустить наше веб-приложение.

Создание и настройка внешнего интерфейса

  • В корневом каталоге djangoreact запустите django-admin startapp frontend

Это создаст каталог frontend внутри корневого каталога djangoreact.

  • Откройте файл djangoreact/djangoreact/settings.py и добавьте 'frontend' в массив INSTALLED_APPS.

Это зарегистрирует вновь созданное приложение в веб-приложении.

  • Измените файл djangoreact/djangoreact/urls.py, чтобы он выглядел следующим образом:
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('frontend.urls')),
]
  • Создайте папку templates в каталоге djangoreact/frontend и внутри этого каталога templates создайте каталог frontend
  • Внутри каталога djangoreact/frontend/templates/frontend создайте файл index.html и вставьте в него следующее:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Django React</title>
    {% load static %}
  </head>
  <body>
    <div id="root"></div>
    <script src="{% static "js/main.js" %}"></script>
  </body>
</html>
  • Создайте каталог static в каталоге djangoreact/frontend и внутри него создайте 2 подкаталога: js и images

Здесь все ваши статические файлы, такие как файлы JavaScript и изображения, будут объединены и выведены в

  • Откройте файл djangoreact/djangoreact/settings.py и измените переменную STATIC_URL с /static/ на /frontend/static/.
  • Измените djangoreact/frontend/views.py, чтобы он выглядел следующим образом:
from django.shortcuts import render

def index(request):
    return render(request, 'frontend/index.html')
  • Внутри каталога djangoreact/frontend создайте файл urls.py и вставьте в него следующее:
from django.urls import path
from .views import index

urlpatterns = [
    path('', index),
]

Теперь давайте погрузимся в материал React и Webpack!

Установите узел и NPM

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

Установите и настройте React

  • Создайте каталог src внутри каталога djangoreact/frontend и каталог components внутри этого каталога djangoreact/frontend/src

В папке src будут находиться все ваши исходные файлы для вашего внешнего интерфейса React. В папке src/components будут находиться все компоненты, используемые в вашем интерфейсе React.

Для следующих шагов убедитесь, что вы сейчас работаете в каталоге djangoreact/frontend

  • Инициализировать проект npm с помощью npm init -y
  • Установите все зависимости для нашего интерфейса React с помощью следующих команд:
npm install webpack webpack-cli --save-dev
npm install @babel/core babel-loader --save-dev
npm install @babel/preset-env @babel/preset-react --save-dev
npm install @babel/plugin-proposal-class-properties
npm install react react-dom --save-dev
  • Создайте файл babel.config.json внутри каталога djangoreact/frontend и вставьте в него следующее:
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "10"
        }
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}
  • Создайте файл webpack.config.js внутри каталога djangoreact/frontend и вставьте в него следующее:
const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./static/js"),
    filename: "[name].js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },
  optimization: {
    minimize: true
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env": {
        // This has effect on the react lib size
        NODE_ENV: JSON.stringify("production")
      }
    })
  ]
};
  • Измените словарь "scripts" внутри файла djangoreact/frontend/package.json, чтобы он выглядел следующим образом:
"scripts": {
    "dev": "webpack --mode development --watch",
    "build": "webpack --mode production"
 },
  • Создайте файл App.js внутри каталога djangoreact/frontend/src/components и вставьте в него следующее:
import React from "react";

const App = (props) => {
  return (
    <div className="App">
      <h1>Django React Setup Works</h1>
    </div>
  );
};

export default App;
  • Создайте файл index.js внутри каталога djangoreact/frontend/src и вставьте в него следующее:
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./components/App/App";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
 <React.StrictMode>
  <App />
 </React.StrictMode>
);

Наконец-то мы закончили все настройки! 🎉 Похлопайте себя по плечу, это действительно была немалая работа. Давайте попробуем и посмотрим на результаты!

Запуск веб-приложения локально

  • Перейдите в корневой каталог djangoreact и запустите:
python manage.py migrate && python manage.py runserver

ПРИМЕЧАНИЕ. Чтобы запустить сервер в будущем, вам нужно запустить только python manage.py runserver. Команда migrate помогает только перенести изменения, внесенные в конфигурацию базы данных, в реальную базу данных. Мы запускаем его здесь, потому что нам нужно перенести конфигурацию базы данных при первом запуске сервера.

  • В новом окне терминала перейдите в каталог djangoreact/frontend и запустите npm run dev
  • Откройте веб-браузер и посетите http://localhost:8000, и вы должны увидеть «Django React Setup Works».

Теперь вы можете изменить вещи в каталоге djangoreact/frontend/src так, как вы хотите, чтобы ваш интерфейс выглядел так, сохраните свои изменения, и вы сможете увидеть свои изменения при обновлении страницы в браузере.

Вы также можете добавить другое приложение с помощью команды, например django-admin startapp api, и изменить массив INSTALLED_APPS, чтобы создать приложение Django для серверной части веб-приложения. Однако детали этого выходят за рамки этого руководства, и вы можете обратиться к другому онлайн-руководству по Django, чтобы помочь вам в этом.

Теперь все готово для создания сумасшедшего интерфейса React с мощным бэкэндом Django! Удачного кодирования!

Ресурсы

Повышение уровня кодирования

Спасибо, что являетесь частью нашего сообщества! Перед тем, как ты уйдешь:

  • 👏 Хлопайте за историю и подписывайтесь на автора 👉
  • 📰 Смотрите больше контента в публикации Level Up Coding
  • 🔔 Подписывайтесь на нас: Twitter | ЛинкедИн | "Новостная рассылка"

🚀👉 Присоединяйтесь к коллективу талантов Level Up и найдите прекрасную работу