Deploy de aplicación React con Now

Despliega con confianza una aplicación preparada para producción: crea el build de webpack, configura Serve como servidor estático y define el script start de NPM que Now exige para iniciar en hosting. Aquí verás el flujo completo, con comandos, ajustes y verificación final en la URL única del deploy.

¿Cómo preparar el build de webpack para producción?

En desarrollo usamos webpack dev server, pero en producción necesitamos una compilación optimizada que los navegadores puedan soportar. El objetivo es generar archivos listos para ser hosteados y servidos por un servidor web estático.

¿Qué diferencia hay entre desarrollo y producción con webpack?

• En desarrollo: webpack dev server compila en tiempo real y sirve la app. No generamos archivos finales.
• En producción: ejecutamos el build de webpack que aplica opciones específicas. Minifica, ofusca (uglify) y comprime el código. No necesitamos hacer debug.
• Resultado esperado: una salida estable para browsers, sin herramientas de desarrollo activas.

¿Cómo generar la carpeta dist y qué contiene?

• Ejecuta el build:

npm run build

• Se crea la carpeta dist con los archivos finales: componentes, punto view, SAS y JS empaquetados. Si hay imágenes o SVG, pueden quedar allí también.
• Estos archivos representan la aplicación completa lista para servir.

¿Se debe versionar dist en el repositorio?

• Abre .gitignore y quita la carpeta dist para incluirla en el repositorio.
• No es ni bueno ni malo commitear dist, pero para este deploy es necesario.

¿Cómo configurar Serve y el script start de NPM?

Necesitamos un servidor web estático en producción. Usaremos Serve de NPM, instalado como dependencia normal porque actuará en el entorno final. Además, Now exige el comando start para saber cómo iniciar la app.

¿Cómo instalar Serve como dependencia de producción?

• Instala Serve:

npm i -S serve

• Se agrega como dependencia (no de desarrollo) porque será el servidor web en producción.

¿Qué debe contener el script start para Now?

• Define el script start en package.json con Serve y el modo single:

{
  "scripts": {
    "start": "serve --single"
  }
}

• Recuerda: start y test no requieren “run”. Puedes usar:

npm start
npm test

• En cambio, para otros scripts se usa “run”:

npm run dev
npm run build

¿Cómo ejecutar el build y preparar el deploy?

• Asegúrate de que Serve quedó instalado.
• Ejecuta el build para generar dist:

npm run build

• Verifica que dist esté en el repositorio si vas a desplegar ahora.

¿Cómo hacer el deploy con Now y verificar la aplicación?

Con todo listo, es momento del deploy con Now. Cada ejecución genera una URL única para seguir el proceso y, al finalizar, esa URL se convierte en tu app en producción.

¿Qué ocurre al ejecutar el comando de deploy?

• Ejecuta:

now

• Now inicia el deploy y muestra una URL única en la línea que dice ready.
• La URL se copia al clipboard. También puedes abrir el enlace para seguir el estado en tiempo real.
• El primer deploy puede tardar más. Luego, Now cachea dependencias y optimiza tiempos.

¿Cómo saber que quedó en producción?

• Cuando Now completa el build, el deploy y corre npm start, el proceso termina y la app queda hosteada satisfactoriamente.
• La URL que mostraba el estado ahora abre la aplicación funcional en producción.
• La URL toma el nombre desde package.json (por ejemplo, “plachymusic”) como identificador visible.
• Prueba la funcionalidad: busca una canción, espera la carga, selecciónala y reprodúcela. Debe comportarse igual que en desarrollo, pero servida desde Now.

¿Te gustaría comentar qué parte te costó más del deploy con Now o qué paso te gustaría automatizar?