Saltearse al contenido

Guía de Inicio Rápido

Esta guía te guiará a través de los conceptos básicos de instalar y usar @aws/nx-plugin para construir proyectos en AWS rápidamente.

Se necesitan las siguientes dependencias globales antes de continuar:

  • Git
  • Node >= 22 (Recomendamos usar algo como NVM para gestionar tus versiones de Node)
    • Verifica ejecutando node --version
  • PNPM >= 10 (También puedes usar Yarn >= 4, Bun >= 1 o NPM >= 10 si lo prefieres)
    • Verifica ejecutando pnpm --version, yarn --version, bun --version o npm --version
  • UV >= 0.5.29
    1. Instala Python 3.12 ejecutando: uv python install 3.12.0
    2. Verifica con uv python list --only-installed
  • Credenciales de AWS configuradas para tu cuenta objetivo de AWS (donde se desplegará tu aplicación)

Paso 1: Inicializar un nuevo espacio de trabajo Nx

Sección titulada «Paso 1: Inicializar un nuevo espacio de trabajo Nx»

Ejecuta el siguiente comando para crear un espacio de trabajo Nx con el gestor de paquetes de tu elección:

Terminal window
npx create-nx-workspace@21.4.1 my-project --pm=pnpm --preset=@aws/nx-plugin --ci=skip

Una vez completado, accede al directorio del proyecto:

Ventana de terminal
cd my-project

Paso 2: Usar generadores para estructurar tu proyecto

Sección titulada «Paso 2: Usar generadores para estructurar tu proyecto»

En esta guía rápida, agregaremos una API tRPC, un sitio web React, autenticación Cognito e infraestructura CDK o Terraform. Dependiendo del tipo de proyecto que estés construyendo, puedes elegir cualquier combinación de generadores para inicializar rápidamente tu proyecto. Revisa las Guías en la barra de navegación izquierda para ver la lista completa de opciones.

  1. Instale el Nx Console VSCode Plugin si aún no lo ha hecho
  2. Abra la consola Nx en VSCode
  3. Haga clic en Generate (UI) en la sección "Common Nx Commands"
  4. Busque @aws/nx-plugin - ts#trpc-api
  5. Complete los parámetros requeridos
    • name: demo-api
    • auth: IAM
  6. Haga clic en Generate

Esto creará la API en la carpeta packages/demo-api.

  1. Instale el Nx Console VSCode Plugin si aún no lo ha hecho
  2. Abra la consola Nx en VSCode
  3. Haga clic en Generate (UI) en la sección "Common Nx Commands"
  4. Busque @aws/nx-plugin - ts#react-website
  5. Complete los parámetros requeridos
    • name: demo-website
  6. Haga clic en Generate

Esto genera un nuevo sitio web React en packages/demo-website.

  1. Instale el Nx Console VSCode Plugin si aún no lo ha hecho
  2. Abra la consola Nx en VSCode
  3. Haga clic en Generate (UI) en la sección "Common Nx Commands"
  4. Busque @aws/nx-plugin - ts#react-website#auth
  5. Complete los parámetros requeridos
    • project: @my-project/demo-website
    • cognitoDomain: my-demo
  6. Haga clic en Generate

Esto configura la infraestructura necesaria y el código React para agregar autenticación Cognito a tu sitio web.

  1. Instale el Nx Console VSCode Plugin si aún no lo ha hecho
  2. Abra la consola Nx en VSCode
  3. Haga clic en Generate (UI) en la sección "Common Nx Commands"
  4. Busque @aws/nx-plugin - api-connection
  5. Complete los parámetros requeridos
    • sourceProject: @my-project/demo-website
    • targetProject: @my-project/demo-api
  6. Haga clic en Generate

Esto configura los proveedores necesarios para asegurar que tu sitio web pueda llamar a tu API tRPC.

Agrega el proyecto de infraestructura según tu proveedor IaC elegido.

  1. Instale el Nx Console VSCode Plugin si aún no lo ha hecho
  2. Abra la consola Nx en VSCode
  3. Haga clic en Generate (UI) en la sección "Common Nx Commands"
  4. Busque @aws/nx-plugin - ts#infra
  5. Complete los parámetros requeridos
    • name: infra
  6. Haga clic en Generate

Esto configura una aplicación CDK que puedes usar para desplegar tu infraestructura en AWS.

Paso 3: Ejecutar tu sitio web y API localmente

Sección titulada «Paso 3: Ejecutar tu sitio web y API localmente»

Usa el siguiente comando para iniciar servidores locales de desarrollo para tu sitio web y sus APIs conectadas:

Terminal window
pnpm nx run demo-website:serve-local

Tu sitio web estará disponible en http://localhost:4200.

Los cambios tanto en tu sitio web como en la API se reflejarán en tiempo real, ya que ambos servidores locales recargarán automáticamente.

Paso 4: Definir recursos en la nube y desplegar en AWS

Sección titulada «Paso 4: Definir recursos en la nube y desplegar en AWS»

Abre packages/infra/src/stacks/application-stack.ts y agrega el siguiente código:

import * as cdk from 'aws-cdk-lib';
import { DemoApi, DemoWebsite, UserIdentity } from ':my-project/common-constructs';
import { Construct } from 'constructs';
export class ApplicationStack extends cdk.Stack {
constructor(scope: Construct, id: string, props?: cdk.StackProps) {
super(scope, id, props);
const identity = new UserIdentity(this, 'identity');
const api = new DemoApi(this, 'api', {
integrations: DemoApi.defaultIntegrations(this).build(),
});
api.grantInvokeAccess(identity.identityPool.authenticatedRole);
new DemoWebsite(this, 'website');
}
}

Este es todo el código CDK necesario para desplegar nuestra aplicación full-stack.

Luego, ejecuta el siguiente comando para construir tu proyecto:

Terminal window
pnpm nx run-many --target build --all

Inicializa tu infraestructura:

Terminal window
pnpm nx run infra:bootstrap

Despliega tu proyecto:

Terminal window
pnpm nx run infra:deploy my-project-sandbox/*

Paso 5: Probar el sitio web con los recursos en la nube desplegados

Sección titulada «Paso 5: Probar el sitio web con los recursos en la nube desplegados»
  1. Obtén el archivo runtime-config.json:

    Terminal window
    pnpm nx run demo-website:load:runtime-config
  2. Inicia el servidor local del sitio web

    Terminal window
    pnpm nx run demo-website:serve

Tu sitio web estará disponible en http://localhost:4200 y apuntará a los recursos que desplegaste para la API y autenticación.


¡Felicidades! 🎉 ¡Has construido y desplegado exitosamente una aplicación full-stack usando @aws/nx-plugin!