Hola amigos de CodigoJS, Desarrollo web en Sevilla. Hoy quiero compartir la experiencia que he tenido desarrollando un sitio web de ofertas de empleo para trabajar desde casa utilizando Quasar Framework en modo SSR y Django en el backend.
Durante el mes de diciembre tuve un espacio y como hacia mucho tiempo tenía deseos de experimentar con algún desarrollo en modo SSR utilizando Quasar, no dejé pasar la oportunidad y me puse manos a la obra.
Inicialmente todo comenzó como un experimento, incluso en el backend probé con Strapi, que nunca lo había tocado, pero como después me tomé más en serio el proyecto si continuaba con Strapi no terminaría en un mes debido a que tendría que experimentar con dos tecnologías nuevas para mi. Así que cambie el backend a Django con Rest Framework.
La web que desarrollé durante el mes de diciembre es https://mitrabajodesde.casa, un sitio de ofertas de empleo para trabajar desde casa que tiene como objetivos: Ayudar a los profesiones de las tecnologías a encontrar un trabajo en remoto y Ayudar a las empresas a contratar los mejores talentos del mundo para trabajar en remoto.
Esta guía estará dividida en cinco partes que publicaré en las próximas semanas. Me centraré mayormente en el frontend y explicaré los aspectos más importantes que he tenido cuenta a la hora de crear el sitio web. No soy un experto en el desarrollo con SSR, es mi primera ves, y lo que pretendo con esta guía es dar un punto de partida a quienes opten por este tipo de tecnología y como no, continuar aprendiendo.
• Instalación y configuración de los proyecto.
• Renderizando la primera página en modo SSR Quasar.
• Persistencia de estados y autenticación en SSR con Quasar.
• Optimización SEO en SSR con Quasar.
• Despliegue de la aplicación en modo SSR con Quasar.
• Conclusiones
Instalación y configuración del proyecto.
En esta primera parte vamos a ver como configurar el proyecto, voy a dar por seguro que tienes experiencia mínima con Django y Quasar.
Para el desarrollo este proyecto cree un directorio llamado remotejobs donde estará tanto el backend como el frontend.
Para el backend he creado un proyecto con Django 3 llamado backend que se encargará de servir todos los datos que vamos a pintar en el frontend a través de Django Rest Framework. Te dejo a continuación dos artículos de nuestro blog donde podrás ver como instalar y configurar un proyecto con Django:
• Creando el backend con Django Framework
• Como integrar Django 3 con Vue 3 y no morir en el intento
Para el frontend, he creado un proyecto Quasar llamado frontend. Te dejo a continuación una artículo donde explico como crear un proyecto con Quasar:
• Creando nuestro primer proyecto con Quasar Framework
La estructura principal del proyecto debe quedar como sigue:
├── remotejobs
├── backend
├── frontend
Si todo ha ido bien, debemos tener corriendo el proyecto Django en una terminal y el proyecto de Quasar en otra terminal.
Preparando el proyecto para SSR
Necesitamos establecer el proyecto Quasar en modo SSR, es muy sencillo, nos vamos a la terminal donde tenemos el proyecto corriendo y ejecutamos el siguiente comando:
$ quasar mode add ssrEste comando creará las configuraciones necesarias para usarlo en modo SSR.
Ahora cada ves que ejecutemos el proyecto debemos hacerlo con el siguiente comando:
$ quasar dev -m ssrSi nos fijamos en el proyecto podemos ver que se ha creado un nuevo directorio con la siguiente estructura:
└── src-ssr/
├── index.js # Archivo encargado de servir nuestra app en producción
└── extension.js # Codigo común para desarrollo y producción.
Con esto ya tenemos nuestra aplicación configurada de forma correcta para desarrollar en modo SSR.
Hasta aquí esta primera parte, la próxima semana vamos a ver como acceder a los datos del backend y pintarlos en los componentes para que se rendericen en el servidor.
Si no quieres perdeter ningua entrada, recuerda subscribirte a nuestro boletín.
Si tienes alguna duda, dejame saber en los comentarios.
