Как настроить веб-приложение 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 и найдите прекрасную работу