Comment configurer une application Web Django + React à l'aide de Webpack

Jan 19 2023

Vous cherchez un moyen de créer une application Web avec un frontend React robuste et un backend Django puissant ? Cherchez pas plus loin! Ce guide vous aidera à configurer votre application Web en moins de quelques minutes. Django est un framework Web Python de haut niveau, gratuit et open source qui encourage un développement rapide et une conception propre et pragmatique.

Vous cherchez un moyen de créer une application Web avec un frontend React robuste et un backend Django puissant ? Cherchez pas plus loin! Ce guide vous aidera à configurer votre application Web en moins de quelques minutes.

Django est un framework Web Python de haut niveau, gratuit et open source qui encourage un développement rapide et une conception propre et pragmatique. React est une bibliothèque JavaScript frontale gratuite et open source permettant de créer des interfaces utilisateur basées sur des composants d'interface utilisateur, ce qui facilite le développement d'interfaces utilisateur interactives. En combinant les deux technologies à l'aide d'un outil de regroupement appelé Webpack , nous sommes en mesure de créer sans effort une application Web solide. Commençons!

Conditions préalables

Il n'y a pas trop de choses que vous devez savoir à l'avance pour ce guide, mais il serait certainement utile d'avoir une compréhension de base de Python et JavaScript avant de commencer ce projet.

Installer Python, Virtualenv et Django

Étant donné que Django est un framework Web basé sur Python, nous devons nous assurer que Python est installé sur notre appareil avant de continuer. Voici quelques articles pour vous aider à installer Python sur votre plateforme respective si vous ne l'avez pas déjà : Mac , Windows , Linux

Nous utiliserons un outil Python appelé virtualenvpour nous aider à suivre et à gérer les dépendances de notre projet Django dans un environnement virtuel. Vous pouvez en savoir plus ici . Nous pouvons l'installer en l'exécutant pip install virtualenvdans une fenêtre de terminal. Installons également Django en l'exécutant pip install djangodans une fenêtre de terminal.

Configurer l'environnement virtuel et créer un projet Django

Courirdjango-admin startproject djangoreact

Courirpython -m virtualenv <path-to-env>

Exécuter source <path-to-env>/bin/activatesur un Mac ou <path-to-env>/Scripts/activatesur Windows

Vous pouvez exécuter deactivatepour désactiver l'environnement virtuel à tout moment dans le futur.

Courirpip install django

Créer et configurer le frontend

Dans le djangoreactrépertoire racine, exécutezdjango-admin startapp frontend

Ouvrez le djangoreact/djangoreact/settings.pyfichier et ajoutez-le 'frontend'au INSTALLED_APPStableau

Modifiez djangoreact/djangoreact/urls.pyle fichier pour qu'il ressemble à ce qui suit :

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('frontend.urls')),
]

Dans le djangoreact/frontend/templates/frontendrépertoire, créez un index.htmlfichier et collez-y ce qui suit :

<!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>

Ouvrez djangoreact/djangoreact/settings.pyle fichier et changez la STATIC_URLvariable de /static/à/frontend/static/
Modifiez djangoreact/frontend/views.pypour ressembler à ce qui suit :

from django.shortcuts import render

def index(request):
    return render(request, 'frontend/index.html')

from django.urls import path
from .views import index

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

Pour pouvoir exécuter React et Webpack, nous devons installer Node sur notre appareil. Vous pouvez vous référer au site officiel ici pour en savoir plus sur la façon dont vous pouvez l'installer sur votre type d'appareil.

Installer et configurer React

Créer un srcrépertoire dans le djangoreact/frontendrépertoire et un componentsrépertoire dans ce djangoreact/frontend/srcrépertoire

Pour les étapes suivantes, assurez-vous que vous travaillez actuellement dans le djangoreact/frontendrépertoire

Initialiser un projet npm avecnpm init -y
Installez toutes les dépendances de notre frontend React avec les commandes suivantes :

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

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "10"
        }
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

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": {
    "dev": "webpack --mode development --watch",
    "build": "webpack --mode production"
 },

import React from "react";

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

export default App;

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>
);

Accédez au djangoreactrépertoire racine et exécutez :

python manage.py migrate && python manage.py runserver

Dans une nouvelle fenêtre de terminal, accédez au djangoreact/frontendrépertoire et exécuteznpm run dev
Ouvrez un navigateur Web et visitez http://localhost:8000et vous devriez voir "Django React Setup Works"

Vous pouvez également ajouter une autre application à l'aide d'une commande telle que django-admin startapp apiet modifier le INSTALLED_APPStableau pour créer une application Django pour la partie backend de l'application Web. Les détails de cela sortent cependant du cadre de ce didacticiel et vous pouvez vous référer à un autre didacticiel Django en ligne pour vous aider à y parvenir.