Servir ensemble React et Django

Reactjs est un cadre agréable pour frontend et Cadre Django REST (DRF) est un autre excellent cadre pour le développement d’API. Je me demande comment servir les projets React et Django sur le même serveur et le même port! Enfin, j’ai trouvé une solution et je vais en discuter aujourd’hui.

Dans cet article, nous allons créer une API utilisant Django REST Framework et un projet React (frontend) qui utilisera l’API. L’idée est très simple, React va extraire des noms de livres du backend (Django) et les restituer.

Projet Backend (Django)

J’utilise Django 2 pour ce projet. Dans un premier temps, créez un projet Django nommé book.
Installez django-rest-framework à l’aide de pip install django-rest-framework et ajoutez rest_framework à la liste INSTALLED_APPS dans settings.py.
Créez deux applications nommées api et core à l’aide de python manage.py startapp, appliquez les applications api et python manage.py startapp core, puis ajoutez les noms des applications à la liste INSTALLED_APPS dans settings.py.

Voici notre liste INSTALLED_APPS dans settings.py:

https://medium.com/media/c66198483de30a010b180b27d4d79d91/href

Éditez /api/views.py et ajoutez les codes suivants:

https://medium.com/media/b3f1ebcf6a9d26585e1aaca7b648d57e/href

Configurez l’URL dans book / urls.py (la configuration de l’URL peut être faite de manière plus élégante, mais je la saute par souci de brièveté):

https://medium.com/media/e48f30418df59019de790c3b514bc19c/href

Démarrez le serveur en utilisant python manage.py runserver (il exécutera le serveur sur le port par défaut 8000).

Testez notre API

Postman est un excellent outil pour tester les API. Ouvrez Postman et accédez à «http://127.0.0.1:8000/book/»:

Notre API fonctionne bien! Nous allons maintenant développer l’interface en utilisant React.

Projet Frontend (React)

Nous allons utiliser le package create-react-app pour créer le projet React. Tout d’abord, installez le paquet «create-react-app» à l’aide de npm install create-react-app.

Créez maintenant l’application de réaction nommée «book-frontend» dans le répertoire du projet (book).

Changez le répertoire courant en "book-frontend" et lancez npm start.

Il exécutera notre serveur frontal au port 3000 par défaut.

Accédez à localhost: 3000 dans votre navigateur préféré (j’utilise Google Chrome):

Nous allons utiliser deux autres paquets dans le frontend. Commençons par les installer:
axios: npm installer axios
react-router-dom: npm installer react-router-dom

Créez un dossier nommé Component dans le dossier src, puis dans le dossier Component, créez un dossier nommé Book. Dans le livre, créez un fichier javascript index.js (c’est-à-dire /src/Component/Book/index.js).
Placez le code suivant dans index.js (ce code va extraire les données du backend et les rendre au frontend).

Notre index.js:

https://medium.com/media/b60407433c593973599e0e247f8b6446/href

Et modifiez App.js comme ceci:

https://medium.com/media/f7fb2113e477790cff10f4c406f06316/href

Toutes les fonctionnalités de notre application pour livres à un million de dollars sont complètes!
Accédez à localhost: 3000 pour voir la sortie:

OPS! Rien ne montre sans le mot «livres», non?

Ouvrez la console de votre navigateur:

Nous devons résoudre le problème de la SCRO.
Nous pouvons résoudre ce problème en utilisant django-cors-headers bibliothèque.

Mon fichier settings.py résolvant le problème CORS:

https://medium.com/media/df121c214c3abfce7fd242456932df38/href

Maintenant, accédez à localhost: 3000 et voyez notre sortie désirée!

Servir ensemble React et Django

C’est l’essentiel de cet article: nous servirons ces deux applications ensemble sur le même serveur.

Créer la version "build" de notre application frontend

Accédez au répertoire book-frontend et exécutez npm run build. Cela va créer un répertoire de construction.

Ensuite, allez dans setting.pyet ajoutez les lignes suivantes:

https://medium.com/media/e5e50460207b5a0510b728e669b68064/hrefhttps://medium.com/media/652e40f5c788522916e95de35feb2515/href

Allez maintenant / view.py, nous allons servir notre vue frontale à partir d’ici. Mettez-le à jour comme ceci:

https://medium.com/media/6af73633a8937b48e3e56d4187fed691/href

Mettre à jour /book/urls.py:

https://medium.com/media/ba3c7d45aa4396df36cb4c4abaf799da/href

Fermez maintenant tous les serveurs précédents (s’ils sont actifs jusqu’à présent). Exécutez le serveur Django en utilisant le serveur d’exécution python manage.py. Accédez à votre navigateur et accédez à http://127.0.0.1:8000/ et BOOM! Nous servons nos applications Django et React sur le même serveur!

Vous pouvez aussi lire:

  1. Comprendre les décorateurs Python
  2. Fonctionne comme objet de première classe en Python
  3. Jouer avec l’héritage en Python
  4. Fermeture en Python et Javascript
  5. Développer notre premier PWA en utilisant React
  6. Feuille de triche de navigation React
  7. Min priority_queue en C ++
  8. Nommer vos variables
  9. Servir ensemble React et Koa


Servir ensemble React et Django a été publié à l’origine dans Hacker midi sur Medium, où les gens poursuivent la conversation en soulignant et en répondant à cette histoire.

Source

A propos newstrotteur-fr

Découvrez également

StormSensor obtient plus de financement pour aider les villes à gérer les inondations et les problèmes de débordement des eaux usées – Newstrotteur

Erin Rothman, cofondatrice et PDG de StormSensor. (Photo StormSensor) StormSensor continue de recueillir des fonds …

Laisser un commentaire

Do NOT follow this link or you will be banned from the site!