Frontend
Comienza por definir, en código, el frontend que está utilizando. SST admite los siguientes.
Next.js
new NextjsSite(stack, "site", {
customDomain: "my-next-app.com",
});Svelte
También existe SvelteKitSite para Svelte.
new SvelteKitSite(stack, "site", {
customDomain: "my-svelte-app.com",
});Remix
O el RemixSite para Remix.
new RemixSite(stack, "site", {
customDomain: "my-remix-app.com",
});Astro
O el AstroSite para Astro.
new AstroSite(stack, "site", {
customDomain: "my-astro-app.com",
});Solid
Y el SolidStartSite para Solid.
new SolidStartSite(stack, "site", {
customDomain: "my-solid-app.com",
});Sitios estáticos
También existe el StaticSite para cualquier constructor de sitios estáticos.
new StaticSite(stack, "site", {
path: "web",
buildOutput: "dist",
buildCommand: "npm run build",
customDomain: "my-static-site.com",
});Basta con especificar el comando de compilación y señalar dónde se genera la salida.
Infraestructura
Los fragmentos anteriores son una forma de definir las características de tu aplicación en código. Puedes definir cualquier característica de tu aplicación, no sólo el frontend.
Puedes añadir características de backend como APIs, bases de datos, cron jobs y más. Todo ello sin necesidad de utilizar la consola de AWS.
Constructos
Estos fragmentos se llaman Constructs. Son clases TypeScript o JavaScript, donde cada clase corresponde a una característica y puede ser configurada a través de sus props.
const site = new NextjsSite(stack, "site", {
/** props **/
});Recomendamos el uso de TypeScript porque permite una seguridad de tipos completa mientras se configura la aplicación.
Stacks
Los constructos se agrupan en Stacks. Te permiten organizar la infraestructura de tu aplicación.
stacks/Web.ts
export function Web({ stack }: StackContext) {
const site = new NextjsSite(stack, "site");
}Aplicación
Por último, añade todos tus Stacks a tu app en el archivo sst.config.ts.
sst.config.ts
export default {
config() {
return {
name: "my-sst-app",
region: "us-east-1",
};
},
stacks(app) {
app.stack(Database).stack(Api).stack(Web);
},
} satisfies SSTConfig;En el próximo post estaremos viendo cómo se puede añadir el backend para su aplicación con estas construcciones con sst
