Despliegue de Aplicaciones Web con Netlify y GitHub

Clase 19 de 22Curso de Webpack con Express.js, React.js y TypeScript

Resumen

¿Cómo optimizar tu proyecto antes de enviarlo a producción?

Antes de llevar tu proyecto a producción, hay ciertas optimizaciones que debes considerar para asegurar su desempeño óptimo. Aquí te ofrecemos algunos consejos prácticos para llevar a cabo estas mejoras y, en consecuencia, lograr un despliegue sin problemas.

Pasos a seguir para optimizar el proyecto

  1. Cambiar el header: Si tienes un header dentro de tu página principal, considera moverlo a un componente separado para mejorar la organización del código.

  2. Eliminar configuraciones innecesarias: Asegúrate de quitar cualquier configuración o librerías que no sean esenciales, como Ridox si ya no lo necesitas en tu proyecto.

El proceso de despliegue con Netlify

Una vez que hayas optimizado el proyecto, el siguiente paso es subirlo a un repositorio en la nube. Te recomendamos usar Netlify para implementar tu proyecto, ya que ofrece una integración fluida con sistemas de control de versiones como GitHub, GitLab o Bitbucket.

  1. Crear una cuenta en Netlify:

    • Visita Netlify.com y crea una cuenta. Puedes registrarte usando tus cuentas de GitHub, GitLab o Bitbucket.
  2. Iniciar sesión y configuración inicial:

    • Una vez que tengas una cuenta, inicia sesión y selecciona la opción de crear un nuevo sitio desde Git.
  3. Seleccionar el repositorio y la rama adecuada:

    • Autoriza a Netlify a acceder a tus repositorios. Busca el repositorio de tu proyecto (por ejemplo, "webpack react") y elige el branch donde está la configuración que deseas desplegar.
  4. Configuración de la carpeta DIS:

    • Asegúrate de que la carpeta DIS sea la que se tomará como pública para tu proyecto. Verifica que el comando npm run build esté configurado correctamente. Si deseas cambiarlo, puedes hacerlo en este paso.

Despliegue del sitio

Ahora que la configuración está terminada, realiza el despliegue del sitio. Durante este proceso, Netlify generará una máquina virtual, asignará permisos, descargará el repositorio y preparará las dependencias necesarias. El sitio se compilará y la carpeta DIS se hará pública mediante un dominio asignado por Netlify.

  • Codificación y verificación: Netlify ejecutará el comando build y verificará que no haya errores. Si se encuentra algún problema, recibirás notificaciones para arreglarlo.
  • Visualización del sitio: Una vez finalizado, podrás ver el sitio en producción con un enlace proporcionado por Netlify.

Comprobación y personalización final

Con tu aplicación desplegada, es hora de personalizarla y asegurarse de que todo esté en orden.

  1. Inspección del sitio:

    • Utiliza herramientas como Network en las DevTools de tu navegador para comprobar la carga correcta de los recursos, como el componente Header.
  2. Personaliza tu aplicación:

    • Cambia colores, fuentes o diseños según tu preferencia. Estos cambios no solo hacen único tu proyecto, sino que también te permiten explorar y aprender más sobre personalización y estilo.

Comparte tus logros

Una vez que todo funcione correctamente, te animamos a que compartas tu proyecto. Esto no solo te dará retroalimentación valiosa, sino que te permitirá mostrar tus habilidades y esfuerzo.

  • Colabora y recibe retroalimentación: Deja el enlace a tu proyecto en las secciones de comentarios y presúmelo al mundo. Mostrar lo que has logrado es una excelente manera de motivarte y seguir aprendiendo.