Despliegue de Proyectos Web con Netlify y GitHub

Contenido del curso

Introducción a Webpack

Proyecto inicial

Loaders y Plugins en Webpack

Deploy del proyecto

Herramientas de desarrollo complementarias

Integración básica de React.js

Próximos pasos

28
Configuración y Uso de Webpack con React
00:48 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0014:24

Despliegue de Proyectos Web con Netlify y GitHub

Curso de Webpack

Clase 18 de 28

Clase 18 / 28

Recursos

¿Cómo desplegar un proyecto con Netlify?

Desplegar un proyecto web es un paso crucial en el desarrollo, y hacerlo de manera eficiente y sencilla es lo que busca cualquier desarrollador. Netlify es una excelente opción para esto, ya que ofrece una manera amigable y práctica de llevar tus proyectos al entorno de producción. Aunque existen varias plataformas, en esta ocasión, utilizaremos Netlify por su facilidad para integrarse con repositorios como GitHub, GitLab o Bitbucket y su capacidad de realizar despliegues automáticos tras los cambios en tu código.

¿Cómo prepararse antes de usar Netlify?

Antes de comenzar con Netlify, necesitas crear una cuenta. Una vez registrado, es fundamental conectar tu repositorio en la nube. Esto significa subir el proyecto que estás trabajando a plataformas como GitHub, GitLab o Bitbucket. Después de hacerlo, puedes configurar un hook en Netlify que permita despliegues automáticos cada vez que realices cambios.

Creación de archivos de configuración

Para que Netlify despliegue correctamente tu proyecto, es necesario crear un archivo de configuración llamado netlify.toml. Aquí puedes especificar detalles como la carpeta que se publicará y los comandos a ejecutar durante el despliegue. Un ejemplo de estas configuraciones podría ser:

[build]
  publish = "dist"
  command = "npm run build"

¿Cómo subir cambios a tu repositorio?

Los cambios que realices deben subirse a tu repositorio de forma ordenada. Primero verifica si tienes cambios pendientes con git status. Si es así, agréguelos y haz un commit usando una herramienta como Gitmoji, que permite clasificar tus commits con iconos para una mejor visualización. Un ejemplo podría ser:

git add .
git commit -m "Añadir configuración de Netlify 🚀"
git push origin <tu-rama>

¿Qué hacer en caso de errores durante el despliegue?

Desgraciadamente, los errores son parte del proceso, pero puedes aprender mucho de ellos. Por ejemplo, si Netlify indica que hay un problema con un módulo como Stylus, puedes solucionarlo instalándolo dentro de tu proyecto:

npm install stylus --save

También es importante asegurarte de que todos los recursos necesarios del proyecto, como las variables de entorno, están correctamente configuradas. Esto se hace creando un script personalizado que genere estas variables en el servidor antes del build.

¿Cómo configurar variables de entorno en Netlify?

Para gestionar variables de entorno críticas como API keys, crea un script que genere un archivo .env en el servidor, y configúralas en Netlify en la sección de Environment dentro de Deploy Settings. Añades la variable con su correspondiente valor, asegurando que solo Netlify tenga acceso a esa información.

Ejemplo de Script en Node.js para Variables de Entorno

const fs = require('fs');

fs.writeFileSync('.env', `API=${process.env.API}\n`);

¿Cómo automatizar el despliegue en Netlify?

Una vez que tengas configurado todo, Netlify puede realizar automáticamente el despliegue cada vez que se detecten cambios en tu rama principal. Revisa en la interfaz de Netlify para comprobar que tus cambios se han aplicado correctamente y que el proceso de despliegue se completó con éxito.

Finalmente, al concluir, puedes previsualizar el sitio desde el enlace proporcionado por Netlify, asegurándote de que todo esté funcionando según lo esperado.

Explorar más opciones dentro de Netlify puede abrirte un espectro de posibilidades para gestionar tus proyectos de manera eficiente, mantén siempre la curiosidad y el deseo de optimizar tus procesos. ¡Es hora de que tus proyectos luzcan con todo su potencial en la web!

Juan Pablo Jimenez

Hace 5 años

18.-Deploy a Netlify

. Permite desplegar los sitios de manera amigable, conectándonos con el repo que estemos usando, aceptar permisos, etc.

Crear cuenta.
Conectar nuestro repositorio. No sin antes mandar el proyecto al repositorio en cuestión.
Para configurarlo hacemos lo siguiente:
- Creamos un archivo que nos ayude a tener la configuración. El archivo se llamara netlify.toml y dentro ponemos lo siguiente.
```
[build]
  publish = "dist"  //Que carpeta desplegamos
  command = "npm run build"  //Que comando usamos
```
- Subimos los cambios al repo haciendo el push correspondiente.
Configuración en netlify:
- Seleccionamos "new site from git".
- Elegimos la herramienta que usamos para guardar el repo.
- Escogemos el repositorio.
- Llenamos las opciones: owner, branch to deploy, build command, publish directory.
- Deploy site.
- Esperamos que se asigne un server para que se ejecute el servicio. Durante este momento netlify habilita una máquina virtual que descarga el repo y corre las instrucciones necesarias para tener node y una instancia que ejecute el proyecto. Después ejecuta el comando que asignamos y toma la carpeta resultante para ponerla en la página.
En el tiempo de compilación en el server, no tiene acceso a .env, por lo que no está accediendo a las variables de entorno, las cuales afectan la página. Para solucionar esto vamos a:
- Crear una carpeta llamada "scripts" (podemos crear todos los que necesitemos).
- Creamos un archivo llamado "create-env.js" que corre sobre node
```
const fs = require("fs");
//Requiere de file system que nos permite trabajar con el SO
//Nos permite hacer, guardar o enviar datos en archivos de nuestra computadora

fs.writeFileSync("./.env", `API=${process.env.API}\n`);
//Creamos el archivo y lo llenamos con la información que necesitamos
//Este script se corre en el server.
```
- Lo asignamos en netlify →deploy settings → Environment → Edit variables
  
  key: API value:
  
  Y lo guardamos. Esta variable solo se la estoy compartiendo a netlify.
- Antes de enviar los cambios ejecutamos el script antes del build. Modificamos el package.json. NOTA: Podemos anidar diferentes elementos en el script, aquí el primero es ejecutar el script y el segundo mandarlo a producción. Si uno de estos elementos se queda procesando un elemento que no termina no continua con el siguiente script.
- Netlify automáticamente escucha el cambio, y ya no tenemos que decirle nada.
- Por defecto instala las dependencias.

Comentarios (162)162 comentarios

Rony Porraz Vargas

Hace 6 años

Omar Gabriel Aguilar Moscoso

Richard Fernando Jiménez

Fernando Quinteros Gutierrez

Christian Velázquez

Carlos Mazzaroli

Nicolas Esteban Prieto Sarmiento

Orangel Gonzalez

Andres Evaristo Ruiz Gonzalez

Omar García Betanzos

Jaiber Leonardo Flor Navia

Enrique Mendez Roger

Rodrigo Martinez

Joseph Manuel Salen Pantoja

Ramiro Godoy

Hace 4 años

José Antonio Sterling Sánchez

Juan José Gelves González

Jose Anibal Garcia Giraldo

Alonso Fabricio Samanez Nuñez

Fredy Ramirez

Edgar Lopez Arroyo

Celina Alejandra Speroni

Oscar Yunior Huarza

Lucas Aristizábal

Cindy Carolina Campos Navarro

Oscar Stevens Cuartas Bejarano

Aitor Santana Cabrera

Oscar Barajas Tavares

Team Platzi

Patricio Gómez

Juan David Reyes

Orlando Manuel Mendoza Vargas

Sebastián Buitrago

Héctor Eduardo López Carballo

Andrea Carolina Mora López

German Cavani

Introducción a Webpack

Curso Avanzado de Webpack para Producción Web

Configuración y uso de Webpack para proyectos JavaScript modernos

Proyecto inicial

Configuración y Uso de Webpack en Proyectos JavaScript

Optimización de Proyectos Web con Webpack para Producción

Configuración básica de Webpack para proyectos JavaScript

Loaders y Plugins en Webpack

Integración de Babel y Webpack para compatibilidad JavaScript

Configuración de HTML-webpack-plugin en Webpack

Configuración de Webpack para CSS y Preprocesadores

Uso de Copy Webpack Plugin para Mover Archivos en Proyectos Node.js

Importación de Imágenes con Webpack Asset Module

Optimización de Fuentes Locales con Webpack

Optimización de Proyectos con Webpack: Minificación y Hashing

Alias en Webpack: Simplifica la Importación de Módulos

Deploy del proyecto

Variables de Entorno en Webpack para Proyectos Seguros

Configuración de Webpack para Modo Desarrollo

Configuración de Webpack para Producción y Limpieza de Builds

Activar Watch Mode en Webpack para Desarrollo y Producción

Despliegue de Proyectos Web con Netlify y GitHub

Herramientas de desarrollo complementarias

Configuración de Webpack Dev Server para Desarrollo Local

Análisis de Dependencias con WebPath Bundle Analyzer

Uso de Source Maps en Webpack para Depuración de Código

Integración básica de React.js

Configuración de Webpack y React desde Cero para Producción

Configuración de Webpack en Proyecto React con Babel y JSX

Configuración de Webpack para Proyectos HTML y Servidor Local

Configurar CSS y SaaS en React con Webpack

Configuración de Webpack para Producción en React

Despliegue de Aplicaciones React en Netlify

Próximos pasos

Configuración y Uso de Webpack con React

Despliegue de Proyectos Web con Netlify y GitHub