Ir al contenido principal
Kinsta.comComunidadAbrir en una pestaña nuevaMyKinstaAbrir en una pestaña nueva

Frameworks JavaScript

A continuación se muestran ejemplos de cómo configurar aplicaciones que utilizan frameworks JavaScript para desplegarlas en los servicios de Alojamiento de Aplicaciones de Kinsta desde un repositorio de GitHub. Esto incluye:

También tenemos ejemplos de aplicaciones Node.js.

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.

Astro SSR

Este es un ejemplo de cómo configurar un sitio Astro con renderizado del lado del servidor (SSR) en los servicios de Alojamiento de Aplicaciones de Kinsta desde un repositorio de GitHub.

Por defecto, Astro es un constructor de sitios estáticos que se centra en sitios web ricos en contenido para ofrecer tiempos de carga más rápidos con menos JavaScript. Habilitar SSR en Astro permite añadir a tu sitio funciones dinámicas como sesiones para el inicio de sesión, conexión con una base de datos, etc. Encontrarás más información en el sitio web de Astro.

  1. Accede a GitHub y crea un nuevo repositorio a partir de esta plantilla (Utilizar esta plantilla > Crear un nuevo repositorio): Kinsta – Hello World – Sitio SSR Con Astro.
  2. En MyKinsta, haz clic en Aplicaciones > Añadir aplicación > selecciona GitHub, haz clic en Conectar proveedor git > Autorizar, e inicia sesión en tu cuenta de GitHub.
  3. Elige el repositorio Hello World Astro SSR y una Ubicación para el centro de datos. Deja el resto de ajustes por defecto y haz clic en Continuar en cada paso.
  4. En el paso Resumen, haz clic en Desplegar ahora.

Durante el despliegue, Kinsta detecta automáticamente el comando de Inicio para el proceso web e instala las dependencias definidas en tu archivo package.json. La aplicación estará disponible en cuanto finalice el despliegue, y la página de Bienvenida de Kinsta se cargará en la URL de tu aplicación.

Página de bienvenida de Kinsta tras la instalación correcta de Astro.
Página de bienvenida de Kinsta tras la instalación correcta de Astro.

¿Prefieres ver la versión en vídeo?

Configuración del Servidor Web

Puerto

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

Comando de Inicio

Cuando despliegas la aplicación, Kinsta crea automáticamente un proceso web con npm start como comando de Inicio. Asegúrate de utilizar este comando para ejecutar tu servidor.

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 ejecuta el comando npm build, seguido del comando npm start.

Deno

Este es un ejemplo de cómo configurar una aplicación Deno para desplegarla en los servicios de Alojamiento de Aplicaciones de Kinsta desde un repositorio de GitHub.

Deno es un programa de ejecución de JavaScript, TypeScript y WebAssembly que te permite ejecutar código fuera de un navegador web para crear aplicaciones seguras del lado del servidor. Encontrarás más información en el sitio web de Deno.

  1. Accede a GitHub y crea un nuevo repositorio a partir de esta plantilla (Utilizar esta plantilla > Crear un nuevo repositorio): Kinsta – Hello World – Deno.
  2. En MyKinsta, haz clic en Aplicaciones > Añadir aplicación > selecciona GitHub, haz clic en Conectar proveedor git > Autorizar, e inicia sesión en tu cuenta de GitHub.
  3. Elige el repositorio Hello World – Deno y una Ubicación del centro de datos. Deja el resto de ajustes por defecto y haz clic en Continuar en cada paso.
  4. En el paso Resumen, haz clic en Desplegar ahora.

Durante el despliegue, Kinsta detecta automáticamente el comando de Inicio para el proceso web e instala las dependencias definidas en tu archivo package.json. La aplicación estará disponible en cuanto finalice el despliegue, y se cargará una página Hello World en la URL de tu aplicación.

Página Hello World de Deno tras una instalación correcta.
Página Hello World de Deno tras una instalación correcta.

Configuración del Servidor Web

Puerto

Kinsta establece automáticamente la variable de entorno PORT. No necesitas definirla ni codificarla en la aplicación.

Comando de Inicio

Cuando despliegas la aplicación, Kinsta crea automáticamente un proceso web con npm start como comando de Inicio.

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 ejecuta npm build command, seguido del comando npm start.

Next.js con Prisma ORM

Este es un ejemplo de cómo configurar una aplicación Next.js y Prisma para desplegarla en los servicios de Alojamiento de Aplicaciones y Alojamiento de Bases de Datos de Kinsta desde un repositorio de GitHub.

Prisma es un conjunto de herramientas de bases de datos de código abierto que simplifica el acceso de los desarrolladores a las bases de datos proporcionando una API intuitiva y segura. Es compatible con múltiples bases de datos y genera consultas SQL eficientes y optimizadas para un rendimiento más rápido. Puedes obtener más información en el sitio web prisma.io.

Esta aplicación requiere una base de datos PostgreSQL para funcionar.

  1. En MyKinsta, haz clic en Bases de datos > Añadir base de datos > introduce un nombre > en Tipo de base de datos selecciona PostgreSQL, elige una Ubicación del centro de datos y Tamaño, y haz clic en Continuar > Crear base de datos.
  2. Accede a GitHub y crea un nuevo repositorio a partir de esta plantilla (Utilizar esta plantilla > Crear un nuevo repositorio): Kinsta – Hello World – Prisma.
  3. En MyKinsta, haz clic en Aplicaciones > Añadir aplicación > selecciona GitHub, haz clic en Conectar proveedor git > Autorizar, e inicia sesión en tu cuenta de GitHub.
  4. Elige el repositorio Hello World – Prisma y la misma Ubicación del centro de datos que tu base de datos. Deja todos los demás ajustes por defecto y haz clic en Continuar en cada paso.
  5. En el paso Resumen, haz clic en Desplegar ahora.
  6. Una vez que la base de datos esté lista para las conexiones (aparece una marca de verificación verde junto a ella), debes añadir la conexión interna entre tu aplicación y la base de datos. Haz clic en Aplicaciones > nombre de la aplicación > Configuración > Añadir conexión.
  7. Selecciona tu base de datos > selecciona Añadir variables de entorno… > selecciona Añadir variables de entorno a la aplicación > haz clic en Añadir conexión.
  8. Ve a la página de Despliegues de la aplicación y haz clic en Desplegar ahora > Desplegar aplicación.

Durante el despliegue, Kinsta detecta automáticamente el comando de Inicio para el proceso web e instala las dependencias definidas en tu archivo package.json. La aplicación estará disponible en cuanto finalice el despliegue, y la página de Bienvenida de Kinsta se cargará en la URL de tu aplicación.

Página de bienvenida de Kinsta tras la instalación correcta de Next.js y Prisma.
Página de bienvenida de Kinsta tras la instalación correcta de Next.js y Prisma.

Configuración del Servidor Web

Puerto

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

Comando de Inicio

Kinsta crea automáticamente un proceso web cuando despliega una aplicación con npm start como comando de Inicio. Asegúrate de utilizar este comando para ejecutar tu servidor.

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 ejecuta el comando npm build, seguido del comando npm start.

React

Este es un ejemplo de cómo configurar una aplicación React para desplegarla en los servicios de Alojamiento de Aplicaciones 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.

  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 Aplicaciones > Añadir aplicación > 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  y una Ubicación para el centro de datos. Deja el resto de ajustes por defecto y haz clic en Continuar en cada paso.
  4. En el paso Resumen, haz clic en Desplegar ahora.

Durante el despliegue, Kinsta detecta automáticamente el comando de Inicio para el proceso web e instala las dependencias definidas en tu archivo package.json. La aplicación estará disponible en cuanto finalice el despliegue, y la página de Bienvenida de Kinsta se cargará en la URL de tu aplicación.

Página de bienvenida de Kinsta tras la correcta implementación de React.

Configuración del Servidor Web

Puerto

Kinsta establece automáticamente la variable de entorno PORT. No debes definirla tú, ni tampoco codificarla 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.

React con Vite

Este es un ejemplo de cómo configurar una aplicación React con Vite para desplegarla en los servicios de Alojamiento de Aplicaciones de Kinsta desde un repositorio de GitHub.

Vite es una herramienta que te ayuda a crear aplicaciones descentralizadas; proporciona herramientas para desarrolladores y APIs 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.

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 encontrar más información en el sitio web de 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 – Vite + React.
  2. En MyKinsta, haz clic en Aplicaciones > Añadir aplicación > selecciona GitHub, haz clic en Conectar proveedor git > Autorizar, e inicia sesión en tu cuenta de GitHub.
  3. Elige el repositorio Hello World – Vite + React y una Ubicación para el centro de datos. Deja el resto de ajustes por defecto y haz clic en Continuar en cada paso.
  4. En el paso Resumen, haz clic en Desplegar ahora.

Durante el despliegue, Kinsta detecta automáticamente el comando de Inicio para el proceso web e instala las dependencias definidas en tu archivo package.json. La aplicación estará disponible en cuanto finalice el despliegue, y la página de Bienvenida de Kinsta se cargará en la URL de tu aplicación.

Página de bienvenida de Kinsta tras el despliegue con éxito de React con Vite.

Configuración del Servidor Web

Puerto

Kinsta establece automáticamente la variable de entorno PORT. No debes definirla tú, ni tampoco codificarla 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 install y npm build.

¿Este artículo te ha resultado útil?