Este es un ejemplo de cómo configurar una aplicación React o un sitio estático para desplegar en los servicios de Alojamiento de Aplicaciones o Sitios Estáticos de Kinsta desde un repositorio de GitHub.

React es una popular biblioteca JavaScript para crear interfaces de usuario. Permite a los desarrolladores crear componentes de interfaz de usuario reutilizables y actualizar eficazmente la interfaz de usuario en respuesta a los cambios de datos. Puedes obtener más información en el sitio web de React.

Kinsta instala automáticamente las dependencias definidas en tu archivo package.json durante el proceso de despliegue.

Alojamiento de Sitios Estáticos

  1. Inicia sesión en GitHub y crea un nuevo repositorio a partir de esta plantilla (Usar esta plantilla > Crear un nuevo repositorio): Kinsta – Hello World – React.
  2. En MyKinsta, añade un sitio estático con el repositorio Hello World – React y la siguiente Configuración de construcción:
    • Comando de construcción: npm run build
    • Versión de Node: 18.16.0
    • Directorio de publicación: build
  3. El sitio estará disponible en cuanto finalice la construcción, y la página de Bienvenida de Kinsta se cargará en la URL de tu sitio.

Alojamiento de la Aplicación

  1. Accede a GitHub y crea un nuevo repositorio a partir de esta plantilla (Utilizar esta plantilla > Crear un nuevo repositorio): Kinsta — Hola Mundo — React.
  2. En MyKinsta, añade una aplicación con el repositorio Hola Mundo — React. El Comando Iniciar puede dejarse en blanco para el proceso web, ya que Kinsta detecta automáticamente el comando necesario durante el primer despliegue.
  3. La aplicación estará disponible tan pronto como finalice la construcción y la página de Bienvenida de Kinsta se cargue en la URL de tu aplicación.

Configuración del Servidor Web

Puerto

Kinsta establece automáticamente la variable de entorno PORT. No debes definirla tú mismo, ni tampoco programarla en la aplicación.

Comando de Inicio

Kinsta crea automáticamente un proceso web basado en el comando npm start del archivo package.json al desplegar una aplicación.

Ciclo de Vida del Despliegue

Cada vez que se inicia un despliegue (mediante la creación de una aplicación o el redespliegue debido a un commit entrante), se ejecutan los comandos npm start y npm build.

Página de Bienvenida

La aplicación o sitio está disponible tan pronto como finaliza la construcción, y la página de Bienvenida de Kinsta se carga en la URL de tu aplicación o en la URL de tu sitio estático.

Página de Bienvenida de Kinsta después del despliegue exitoso de React.
Página de Bienvenida de Kinsta después del despliegue exitoso de React.