Header Ads Widget

Ticker

6/recent/ticker-posts

Construyendo una aplicación moderna con Django y React

 React es una biblioteca de JavaScript para crear potentes interfaces de usuario. Está desarrollado por Facebook y utilizado por desarrolladores de todo el mundo.

Create React App es una herramienta npm para generar aplicaciones React sin ninguna configuración de compilación para herramientas como Webpack o Babel. Eso no significa que estas herramientas no se utilicen, sino que simplemente están ocultas para que pueda concentrarse en crear su aplicación React en lugar de configurar construir entornos.

Al emitir algunos comandos, puede generar una aplicación React y comenzar a construir su próxima idea en el registro de tiempo, pero si necesita integrar su aplicación con un marco de servidor como Django en nuestro caso, todavía necesitamos hacer una pequeña configuración para que pueda implementar su Reacciona la aplicación como una interfaz estática para tu proyecto Django.

En este tutorial de cómo hacerlo, veremos cómo usar Create React App con Django para crear nuestro front-end de la aplicación Django usando React en entornos de desarrollo y producción.

Comencemos generando un proyecto Django desde cero:

$ virtualenv env 
$ source env/bin/activate 
$ pip install django
$ django-admin.py startproject django-react-demo 
$ cd django-react-demo   

Cree algunos puntos finales de API con Django Rest Framework

Dado que la comunicación entre React y Django ocurre a través de una API, necesitamos crear algunos puntos finales de la API de Django para fines de reposo. No vamos a reinventar la rueda aquí, he creado previamente una API de administrador de producto simple con Django y Django Rest Framework, así que Voy a usarlo. También puede seguir el tutorial para crear sus puntos finales de API.

Crear aplicación React

A continuación, cree la aplicación React dentro de la carpeta raíz de su proyecto Django

$ npm install -g create-react-app
$ create-react-app frontend

Poner la aplicación React dentro de la carpeta raíz de Django no es el final del problema, todavía necesitamos abordar estos dos problemas:

¿Cómo servir sin problemas la aplicación React con Django (como interfaz)?

¿Cómo hacer que la aplicación React hable con Django sobre algunos puntos finales de API?

Resolver estos dos problemas depende de si estamos en un entorno de desarrollo o de producción.

Así que comencemos por el entorno de desarrollo.

Integración de la aplicación React con Django en desarrollo

En desarrollo, no tiene ningún problema para ejecutar dos servidores, por lo que puede Django y React servidores de desarrollo locales para ejecutar ambas aplicaciones

Abra una primera terminal y luego ejecute:

cd django-react-demo
python manage.py runserver

Luego abre una segunda terminal y ejecuta:

cd ./frontend 
npm start 

Envío de llamadas GET api

Primero vamos a agregar un botón para enviar una solicitud GET http al hacer clic

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
render() {
    return (
    <div>
    <button type="button" onClick={this.onClick}>Send GET /products </button>
    </div>
    );
}

onClick(ev) {
    console.log("Sending a GET API Call !!!");
}

}

export default App;

¿Cómo enviar solicitudes http con React?

Ahora, ¿cómo enviar solicitudes http?

React no tiene ningún soporte integrado para enviar solicitudes http, ya que es solo una biblioteca de vista, no un marco completo, por lo que vamos a usar axios: una biblioteca para enviar solicitudes http en el navegador.

Comencemos por instalarlo a través de npm:

npm install axios --save 

Luego impórtelo:

import React, { Component } from 'react';
import axios from 'axios';
import logo from './logo.svg';
import './App.css';

Y luego envíe una solicitud GET cuando se haga clic en el botón a http: // localhost: 8000 / products endpoint:

onClick(ev) {
    console.log("Sending a GET API Call !!!");
    axios.get('http://localhost:8000/products')
    .then(res => {
            console.log(res.json())
    }).then(response => {
        console.log(JSON.stringify(response));
    })    
}     

Al hacer clic en el botón, debería aparecer un error de origen cruzado en la consola del navegador que dice:

XMLHttpRequest cannot load http://localhost:8000/products. 
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://127.0.0.1:3000' is therefore not allowed access.

Esto se debe a que estamos haciendo solicitudes de origen cruzado desde http: // localhost: 3000 a http: // localhost: 8000 que no están permitidas de forma predeterminada en los servidores, entonces, ¿cómo resolver esto para poder continuar desarrollando nuestra aplicación React sin errores de origen cruzado? ?

Solicitudes de proxy

Simplemente agregue "proxy": "http: // localhost: 8000" a package.json a las solicitudes de proxy del servidor local de la aplicación React (: 3000) al servidor local de Django (: 8000)

{
"name": "frontend",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:8000", 
"dependencies": {
    "axios": "^0.16.2",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-scripts": "1.0.10"
},
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
}
}

Pero esto solo funciona si estamos usando URL relativas para puntos finales en nuestra aplicación React, así que cambie

axios.get('http://localhost:8000/products')

A

axios.get('/products')

Si ejecuta su aplicación y hace clic en el botón enviar OBTENER, debería obtener una respuesta del servidor Django con una variedad de productos y otra información.

En muchos casos, se utilizan direcciones URL de puntos finales absolutos, lo que hace que este proxy sea inútil, entonces, ¿cómo superar esto?

Necesitamos agregar encabezados CORS a nuestra aplicación Django

Agregar encabezados CORS a la aplicación Django

Primero comience instalando la aplicación django-cors-headers con pip:

pip install django-cors-headers

Agréguelo a las aplicaciones instaladas en settings.py:

INSTALLED_APPS = (
    ...
    'corsheaders',
    ...
)

Agregue el middleware 'corsheaders.middleware.CorsMiddleware':

MIDDLEWARE = [  
    ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...
]

Luego configure CORS ORIGIN ALLOW_ALL en True en settings.py:

CORS_ORIGIN_ALLOW_ALL = True     

Vea todas las opciones disponibles aquí

Ahora cambia tu aplicación React

onClick(ev) {
    console.log("Sending a GET API Call !!!");
    axios.get('http://127.0.0.1:8000/products')
    .then(res => {
            console.log(res);
    }).then(response => {
        console.log(JSON.stringify(response));
    })    
}

Eso es todo lo que puede continuar desarrollando su aplicación web usando Django y React y cuando esté listo para implementar su aplicación para producción, necesita cambiar su estrategia, eso es porque ejecutar dos servidores en producción no es un buen enfoque por muchas razones, así que veamos cómo use Django y React en entornos de producción:

Integración de la aplicación React con Django en producción

Primero construya su aplicación React con:

cd frontend
npm run build 

Los archivos de compilación se generarán en la carpeta frontend / build

.
├── asset-manifest.json
├── favicon.ico
├── index.html
├── manifest.json
├── service-worker.js
└── static
    ├── css
    │   ├── main.cacbacc7.css
    │   └── main.cacbacc7.css.map
    ├── js
    │   ├── main.cec8a28d.js
    │   └── main.cec8a28d.js.map
    └── media
        └── logo.5d5d9eef.svg

Ahora configuremos archivos estáticos de Django para servir JavaScript y CSS desde una carpeta estática en frontend / build

STATICFILES_DIRS = (
    os.path.join(os.path.join(BASE_DIR, 'frontend'), 'build', 'static')
)

Ahora lo siguiente es servir el archivo index.html de la aplicación React disponible en frontend / build / index.html

Así que creemos una vista de Django para eso:

Cree una aplicación Django si aún no ha creado una, entonces:

python manage.py startapp inventory 

En Inventory / views.py agregue:

from django.views.generic import View
from django.http import HttpResponse
from django.conf import settings
import os 

class ReactAppView(View):

    def get(self, request):
        try:

            with open(os.path.join(settings.REACT_APP, 'build', 'index.html')) as file:
                return HttpResponse(file.read())

        except :
            return HttpResponse(
                """
                index.html not found ! build your React app !!
                """,
                status=501,
            )

Luego, en urls.py, mapee esta vista con un patrón de URL catch-all

urlpatterns = [
    #...
    url(r'^',views.ReactAppView.as_view()),
]

Asegúrese de colocar cualquier otra URL o punto final de API antes del patrón de captura todo para que puedan seguir funcionando.

Conclusión


Hemos visto cómo crear una interfaz de React para aplicaciones web de Django usando el generador de proyectos Create React App y cómo enviar solicitudes http de React a Django.


Publicar un comentario

0 Comentarios