Saltearse al contenido
@aws/nx-plugin
Blog

Guía de Inicio Rápido

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

Requisitos Previos

Se necesitan las siguientes dependencias globales antes de continuar:

  • Git
  • Node >= 22 (Recomendamos usar herramientas 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
  • AWS Credentials configuradas para tu cuenta de AWS objetivo (donde se desplegará tu aplicación)
  • Si usas VSCode, recomendamos instalar el Nx Console VSCode Plugin.

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@~20.6.3 my-project --pm=pnpm --preset=ts --ci=skip --formatter=prettier

Una vez completado, navega al directorio del proyecto:

Ventana de terminal
cd my-project

Paso 2: Agregar el Plugin Nx para AWS

Instala el plugin con:

Terminal window
pnpm add -Dw @aws/nx-plugin

Paso 3: Usar Generadores para Estructurar tu Proyecto

Agregaremos una API tRPC, un Sitio Web React, Autenticación con Cognito e Infraestructura CDK en esta guía rápida. 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 a la izquierda para ver la lista completa de opciones.

Agregar una API tRPC

  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
    • apiName: demo-api
  6. Haga clic en Generate

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

Agregar un Sitio Web React

  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#cloudscape-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.

Agregar Autenticación con Cognito

  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#cloudscape-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 con Cognito a tu sitio web.

Conectar Frontend con Backend

  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-backend
  6. Haga clic en Generate

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

Agregar Infraestructura CDK

  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 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');
    api.grantInvokeAccess(identity.identityPool.authenticatedRole);


    new DemoWebsite(this, 'website');
  }
}

Esto es todo el código CDK que necesitamos escribir para desplegar nuestra aplicación full-stack.

Construir y Desplegar la Infraestructura

Luego, ejecuta el siguiente comando para construir tu proyecto:

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

Paso 5: Ejecutar el Frontend Localmente

  1. Obtén el archivo runtime-config.json:

    Terminal window
    pnpm nx run @demo/demo-website:load:runtime-config

  2. Inicia el servidor local del sitio web

    Terminal window
    pnpm nx run @demo/demo-website:serve

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

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