Post Top Ad

Your Ad Spot

jueves, 15 de octubre de 2020

Construyendo aplicaciones modernas con Django, Vue.js y Auth0: Parte 2

 Esta serie de tutoriales se creó primero para el blog Auth0. Las partes 2 y 3 se publicarán en mi blog con el permiso de Auth0. A partir de la parte 1, puede leerlo en el blog Auth0 una vez que esté publicado.

En este tutorial aprenderás

  • ¿Qué es Webpack y por qué debería usarlo?
  • La plantilla de Webpack utilizada por la CLI de Vue para generar aplicaciones de Vue basadas en Webpack
  • cómo integrar Vue con Django para que pueda servir la aplicación front-end usando Django en lugar de tener aplicaciones front-end y back-end completamente separadas
  • cómo arreglar Hot Code Reloading cuando se usa Django para servir la aplicación Vue
  • cómo actualizar la URL de devolución de llamada para la autenticación Auth0

Introducción a Webpack

En esta sección, le presentamos brevemente Webpack (¿y por qué debería usar Webpack?)

Básicamente, webpack es un paquete de módulos estáticos para aplicaciones JavaScript modernas que se convierte en una herramienta fundamental con el auge de los marcos frontales de JavaScript modernos como Angular, React y Vue. También se puede configurar fácilmente para agrupar otros activos como HTML, CSS e imágenes a través de cargadores. Le ayudará a reducir la cantidad de solicitudes y viajes de ida y vuelta a sus servidores web, utilizar estándares modernos como ES6 y le permitirá utilizar módulos npm en sus aplicaciones de front-end.

Webpack básicamente funciona procesando su aplicación, luego construye un árbol de dependencias que contiene todos los módulos utilizados por la aplicación y finalmente agrupa todos esos módulos en uno o varios paquetes (dependiendo de su configuración)

Webpack ofrece una gran cantidad de funciones para agrupar activos estáticos (JavaScript, CSS, imágenes, etc.) para desarrolladores web front-end como:

  • la división de dependencias en trozos
  • el soporte de una gran cantidad de complementos
  • es altamente configurable
  • es muy personalizable
  • es muy flexible gracias a los cargadores
  • puede interactuar con Webpack desde su CLI o API .

Webpack tiene cuatro conceptos básicos de entrada , salida , cargadores y complementos

La propiedad de entrada le permite definir los puntos de entrada para la configuración de su paquete web. Puede ser un valor de cadena única, una matriz de valores o un objeto.

La propiedad de salida le permite definir la información que Webpack necesita para escribir los archivos empaquetados en la unidad, como el nombre del archivo y la ruta (mínimo dos propiedades)

Los cargadores son una característica poderosa de Webpack, ya que se utilizan para enseñar a Webpack cómo transformar activos de otros lenguajes además de JavaScript, como TypeScript, CSS, Sass, etc.

Los complementos se utilizan para ampliar Webpack de cualquier cosa más allá de lo que se puede lograr utilizando cargadores.

Webpack es una herramienta poderosa que, una vez dominada, puede ayudarlo a mejorar su flujo de trabajo de desarrollo de front-end.

Configuración de Vue Webpack

En esta sección hablaremos brevemente sobre la configuración de Webpack para Vue

Vue usa su propio formato de archivo con la extensión .vuepara encapsular el código HTML, CSS y JavaScript (usando <template>, <style>, and <script>etiquetas respectivamente) para construir componentes. También puede agregar sus bloques personalizados.

Vue admite el formato de archivo personalizado mediante el uso de su propio cargador. vue-loaderanaliza los .vuearchivos, extrae bloques dentro de las etiquetas de nivel superior ( <template>, <style>, and <script>y posiblemente etiquetas personalizadas) y luego los convierte en módulos CommonJS.

También puede usar lenguajes que necesitan preprocesamiento como Sass o lenguajes de plantilla que se compilan en HTML como Jade simplemente agregando el atributo lang a un bloque de idioma (por ejemplo <style lang="sass"></style>)

La plantilla de Webpack (que ha utilizado para crear un andamio en el proyecto de Vue mediante la CLI de Vue vue init webpack vueapp) se puede utilizar para proyectos grandes. Se basa vue-loadery asume que está familiarizado con Webpack.

Esta es la estructura de su aplicación Vue basada en Webpack

Aplicación Vue

Hay muchas carpetas y archivos en el proyecto, como:

package.json: este es el archivo npm que contiene metainformación sobre el paquete (como el nombre, descripción, autor y licencia, etc.). Este archivo también contiene el nombre y la versión de cada dependencia que usa el paquete / proyecto y los comandos de compilación personalizados.

index.html: este es el archivo HTML principal para la aplicación de una sola página de Vue. Este archivo se genera en la carpeta dist tanto en las compilaciones de desarrollo como en las de producción, y los enlaces a todos los activos generados se inyectarán en este archivo (puede usarlo para ejecutar su aplicación Vue, pero como va a crear su propia plantilla para Django, inyecta dinámicamente los activos estáticos usando el cargador Django Webpack, en realidad no necesita este archivo)

src: esta es obviamente la carpeta de origen de su aplicación Vue. La mayor parte del desarrollo se llevará a cabo dentro de esta carpeta porque es donde reside el código real de la aplicación.

build: esta carpeta contiene los archivos de configuración de Webpack para desarrollo y producción, es decir, webpack.dev.conf.jswebpack.prod.conf.jsAquí es donde va a trabajar para arreglar Hot Code Reloading y también para indicarle a Webpack que genere un webpack-stats.jsonarchivo usando un complemento.

build/config: esta es la carpeta de configuración que contiene los ajustes de configuración para el desarrollo y la producción. No tocará esta carpeta en esta parte, pero la usará en la siguiente parte para establecer algunas variables necesarias para la producción, como assetsPublicPath

static: esta es la carpeta estática, ¡no se confunda con su nombre! Solo se usa para colocar activos estáticos que no necesitan ser procesados ​​por Webpack. Los archivos de esta carpeta se copiarán tal cual, donde se generan los demás activos.

La demostración de la aplicación

En la parte anterior, comenzó a compilar la demostración de Django y Vue. Ha generado la aplicación front-end con Vue CLI y el proyecto Django. También agregó la autenticación JWT a través de Auth0, luego configuró el front-end para conectarse al back-end e hizo una llamada básica que está asegurada con Auth0.

En esta segunda parte, continuará construyendo la aplicación de demostración integrando tanto la aplicación front-end como la aplicación back-end. Básicamente, desea hacer que Django sirva a la aplicación Vue, por lo que deberá hacer que Django pueda conocer los activos estáticos que genera Webpack y también actualizar la configuración de Webpack para corregir HCR (Hot Code Reloading) del Webpack Dev Server.

Integrando Vue y Django

En esta sección te mostraré paso a paso cómo integrar Vue y Django

Primero diríjase a su terminal o símbolo del sistema, luego deberá clonar el proyecto que hemos construido previamente

git clone https://github.com/techiediaries/djangovue 

También puede omitir este paso y simplemente continuar con el proyecto que ha construido usted mismo en la parte anterior.

Tenga en cuenta que debe tener activado su entorno virtual creado previamente antes de instalar los paquetes de Django.

Puede activar un entorno virtual emitiendo el siguiente comando

source env/bin/activate

Donde env es el nombre del entorno virtual.

Supongo que ha seguido previamente los pasos de la parte 1 para instalar los paquetes de Django. si este no es el caso, utilice requirements.txtpara instalar los requisitos

cd djangovue
pip install -r requirements.txt

También necesita instalar las dependencias de la aplicación Vue, navegar dentro de la frontendcarpeta y ejecutar:

npm install

A continuación, ejecute el siguiente comando para instalar el paquete de cargador de Webpack para integrar Webpack con Django

pip install django-webpack-loader

Luego vaya a su settings.pyarchivo de proyecto y agregue webpack_loaderINSTALLED_APPS:

INSTALLED_APPS = [
    #...
    'webpack_loader',
    'catalog',
    #...
]

A continuación, debe agregar el siguiente objeto settings.pypara configurar el cargador de Webpack

WEBPACK_LOADER = {
    'DEFAULT': {
        'BUNDLE_DIR_NAME': '',
        'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
    }
}

Esto le dice al cargador de Webpack que busque webpack-stats.jsonen la carpeta raíz del proyecto. Este archivo contiene información sobre los activos estáticos que ha generado Webpack (verá a continuación cómo generar este archivo).

Entrega de la plantilla de índice

Ahora necesita crear y entregar un index.htmlarchivo, donde puede montar la aplicación Vue, usando una vista de Django

Primero cree la index.htmlplantilla y catalog/templates/index.htmlluego agregue el siguiente contenido.

{ % load render_bundle from webpack_loader % }

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Django - Auth0 - Vue</title>

</head>
<body>
<div id="app">
</div>
{ % render_bundle 'app' % }
</body>
</html>

La página contiene una aplicación<div> con la identificación donde puede montar la aplicación Vue.

La render_bundleetiqueta (con la aplicación como argumento) se utiliza para incluir los archivos del paquete de aplicaciones .

Después de crear la plantilla, puede usar TemplateView para servirla. Vaya al urls.pyarchivo de su proyecto y luego agregue lo siguiente:

from django.contrib import admin
from django.urls import path
from django.views.generic import TemplateView
from django.conf.urls import url

from catalog import views

urlpatterns = [
    url(r'^api/public/', views.public),
    url(r'^api/private/', views.private),
    url(r'^$', TemplateView.as_view(template_name='index.html'), name='index'),    
    path('admin/', admin.site.urls),
]

Ahora recargue su aplicación Django, obtendrá la página amarilla con un error con Django quejándose de no encontrar el webpack-stats.jsonarchivo que necesita el cargador de Webpack.

Error al leer /xxxx/xxxx/xxxx/django-auth0-vue-part-2/webpack-stats.json. ¿Estás seguro de que webpack ha generado el archivo y la ruta es correcta?

Esta es una captura de pantalla del error que obtendrá

Error de Django

Para deshacerse de este error, debe generar el webpack-stats.jsonarchivo usando el complemento Webpack, webpack-bundle-trackerasí que primero instálelo desde npm usando (asegúrese de estar dentro de la aplicación Vue):

cd frontend 
npm install webpack-bundle-tracker --save

Al frontend/build/webpack.dev.conf.jsimportar webpack-bundle-trackere incluir BundleTracker en complementos de Webpack

const BundleTracker = require('webpack-bundle-tracker')
/*...*/

  plugins: [
    /*...*/
    new BundleTracker({filename: '../webpack-stats.json'})
  ]

Esto le dice webpack-bundle-trackerque genere el archivo de estadísticas en la carpeta raíz de su proyecto.

Si vuelve a ejecutar su servidor de desarrollo Webpack, tendrá el webpack-stats.jsonarchivo generado en la raíz de su proyecto

webpack-stats.json

Si visita su aplicación Django ahora, obtendrá este error en la consola

Error al cargar el <script>con fuente "http://127.0.0.1:8000/app.js".

Puede corregir este error yendo a la frontend/config/index.jssiguiente ubicación de la assetsPublicPathconfiguración y cambiando su valor de /ahttp://localhost:8080/

/*...*/
module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: 'http://localhost:8080/',
    proxyTable: {},
    /*...*/

A continuación, vuelva a ejecutar su aplicación frontend usando

npm run dev

Ahora debería poder ver su página principal de Vue navegando con su navegador a http: // localhost: 8000

página principal de Vue

Arreglando la recarga de Hot Code

Esto es lo que dicen los documentos sobre Hot Code Reload:

"Hot Reload" no es simplemente volver a cargar la página cuando edita un archivo. Con la recarga en caliente habilitada, cuando edita un archivo * .vue, todas las instancias de ese componente se intercambiarán sin volver a cargar la página. ¡Incluso conserva el estado actual de su aplicación y estos componentes intercambiados! Esto mejora drásticamente la experiencia de desarrollo cuando modifica las plantillas o el estilo de sus componentes.

Recarga de Hot Code

Ahora frontend/build/webpack.dev.conf.js, debe configurar el servidor Webpack Dev para aceptar solicitudes de otros orígenes, como http://localhost:8000porque el servidor Django enviará solicitudes XHR http://localhost:8080para obtener los cambios en el archivo fuente.

Agregue un objeto de encabezados en devServer . javascript devServer: { headers: { 'Access-Control-Allow-Origin': '\*' }, },

Esto solucionará la recarga de código caliente al usar el servidor Django para servir archivos Vue. Para probar eso, simplemente cambie algo en su aplicación Vue y podrá ver su página web recargada en caliente para ver los cambios sin tener que volver a cargarla manualmente.

Eso es todo lo que necesitas hacer. Ahora vuelva a ejecutar el servidor de desarrollo de Vue y luego navegue con su navegador a http://localhost:8000/Ahora podrá interactuar con su aplicación servida desde el servidor de desarrollo de Django.

Actualización de la URL de devolución de llamada de Auth0

Anteriormente, usó la autenticación Auth0 desde la página servida desde el servidor Vue. Entonces, si hace clic en el botón Iniciar sesión , será redirigido a esta página de incompatibilidad de URL de devolución de llamada

No coincide la URL de devolución de llamada

Porque ahora está utilizando el servidor Django para servir esa página, por lo que deberá actualizar (o agregar la URL de devolución de llamada Auth0) http://localhost:8000/para que la autenticación funcione

URL de devolución de llamada de Auth0

También debe establecer esta dirección en su frontend/src/auth/AuthService.jsarchivo comoredirectUri

  auth0 = new auth0.WebAuth({
    domain: '<YOUR_DOMAIN>',
    clientID: '<YOUR_CLIENT_ID>',
    redirectUri: 'http://localhost:8000/',
    audience: '<YOUR_AUDIENCE>,
    responseType: 'token id_token',
    scope: 'openid profile'
  });

Ahora podrá autenticarse usando Auth0 para ver esta página y hacer una llamada API privada

hacer una llamada API privada

Conclusión

En esta segunda parte, ha integrado su aplicación Vue con Django, por lo que ahora puede usar su aplicación web navegando con su navegador a http: // localhost: 8000 la dirección del servidor de desarrollo Django (Django ahora está sirviendo la aplicación Vue en lugar de solo exponer los puntos finales de la API).

En desarrollo, todavía tiene que ejecutar y usar el servidor de desarrollo Vue / Webpack, por lo que ha visto cómo solucionar Hot Code Reloading para que pueda tener su página web recargada en caliente incluso si está usando la dirección del servidor Django.

En la siguiente parte, continuará desarrollando la aplicación de demostración al crear vistas de Vue y conectarlas utilizando el enrutador Vue para la interfaz. Para el back-end, verá cómo crear puntos finales de API utilizando el marco Django REST y verá cómo puede preparar esta configuración (Django y Vue) para la producción.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas