React

A continuación se muestran ejemplos de cómo configurar un sitio estático React y un sitio estático React con Vite para desplegarlos en los servicios de Alojamiento de Sitios Estáticos de Kinsta desde un repositorio de GitHub.

React es una popular biblioteca JavaScript para construir 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.

También puedes utilizar esta plantilla de inicio rápido en el Alojamiento de Aplicaciones de Kinsta sin ninguna configuración adicional. Si utilizas el Alojamiento de Aplicaciones, el comando de Inicio puede dejarse en blanco para el proceso web, ya que Kinsta detecta automáticamente el comando necesario durante el primer despliegue.

Requisitos Previos

• Las plantillas de inicio rápido de Kinsta se almacenan y gestionan en GitHub; por lo tanto, necesitas una cuenta de GitHub para acceder a ellas.
• Necesitas crear una cuenta MyKinsta para desplegar la aplicación.

Desplegar un Sitio Estático React

1. Accede a GitHub y crea un nuevo repositorio a partir de esta plantilla (Utilizar esta plantilla > Crear un nuevo repositorio): Kinsta – Hello World – React.
2. En MyKinsta, haz clic en Sitios Estáticos > Añadir sitio > selecciona GitHub, haz clic en Conectar proveedor git > Autorizar, e inicia sesión en tu cuenta de GitHub.
3. Elige el repositorio Hello World – React, haz clic en Continuar, e introduce lo siguiente en la Configuración de construcción:
   • Comando de construcción: npm run build
   • Versión de node: 18.16.0
   • Directorio de publicación: build

Kinsta instala automáticamente las dependencias definidas en tu archivo package.json durante el proceso de despliegue. El sitio estará disponible en cuanto finalice el despliegue, y la página de bienvenida de Kinsta se cargará en la URL de tu sitio.

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.

React con Vite

Este es un ejemplo de cómo configurar un sitio estático React con Vite para desplegarlo en los servicios de Alojamiento de Sitios Estáticos de Kinsta desde un repositorio de GitHub.

Vite es una herramienta que te ayuda a crear aplicaciones descentralizadas; proporciona herramientas para desarrolladores y API para simplificar el proceso de desarrollo y es compatible con múltiples lenguajes de programación. Puedes encontrar más información en el sitio web de Vite.

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

1. Accede a GitHub y crea un nuevo repositorio a partir de esta plantilla (Utilizar esta plantilla > Crear un nuevo repositorio): Kinsta – Hello World – Vite + React.
2. En MyKinsta, añade un sitio estático con el repositorio Hello World – Vite + 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: dist
3. El sitio estará disponible en cuanto finalice la construcción y se cargue la página de bienvenida de Kinsta en la URL de tu sitio.

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 install y npm build.