No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

3D
21H
36M
13S

Entorno de trabajo y estructura en Astro

3/25
Recursos

Aportes 5

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Para instalar la 煤ltima versi贸n de Astro:

npm create astro@latest -- --template portfolio project-name

Estructura en Astro

Cuando desarrollamos un proyecto desde zero, podemos generar mediante create astro una configuraci贸n inicial. Dicha configuraci贸n mediante este asistente de creaci贸n incluir谩 archivos iniciales y carpetas seg煤n su deseo final (plantilla o por default).
.

Directorios y archivos

En alto nivel, Astro no otorga una estructura de carpetas muy similar a otros Frameworks de Frontend donde, para cada ra铆z, nos abstrae un espacio de trabajo con un significado particular:
.

  • src/* directorio principal de trabajo donde podremos trabajar:
    .
    • src/components sub-directorio de elementos reutilizables organizados y agrupados para la sem谩ntica de nuestro proyecto
      .
    • src/layouts sub-directorio de estructuras iniciales para jerarquizar contenido o p谩ginas de nuestro proyecto
      .
    • src/pages sub-directorio de vistas visibles para nuestros usuarios
      .
    • src/styles sub-directorios de estilos globales de nuestro proyecto
      .
  • public/* directorio de est谩ticos de acceso p煤blico (iconos, fuentes, metadata, etc.).
    .
  • package.json definici贸n del proyecto en Node
    .
  • astro.config.mjs archivo de configuraci贸n de Astro
    .
  • tsconfig.json archivo de configuraci贸n de TypeScript

.

Instalaci贸n y lanzamiento de Astro

Como se mencion贸 en la introducci贸n, podemos generar nuestro proyecto de Astro v铆a create astro :

pnpm create [email protected]

Dejando a la elecci贸n la selecci贸n inicial de una plantilla:

pnpm create [email protected] --template <example-name>

pnpm create [email protected] --template <github-username>/<github-repo>

馃搶 Referencia
Podemos visualizar nuestras plantillas de la comunidad de Astro o buscarla mediante el repositorio del autor.
Themes | Astro

Command

$ npm create astro@2.0.2 -- --template portfolio projectName

Entorno de Trabajo

La personalizaci贸n de desarrollo es clave y posible con los editores e IDEs modernos de trabajo. Cuando iniciamos con alg煤n lenguaje o herramienta tipo Framework, buscamos generar un ecosistemas de extensiones que permiten optimizar y armonizar nuestro desarrollo.
.
En VSCode, es un popular editor de c贸digo que ha ido agarrando cari帽o como herramienta clave. Con Astro, podemos personalizar VSCode via su plugin para obtener beneficios como:
.

  • Resaltado de sintaxis para los archivos con extensi贸n .astro , permiti茅ndonos visualizar de mejor manera el c贸digo por alguna definici贸n mal formada, identaci贸n o segmentaci贸n de c贸digo.
    .
  • Extensi贸n visual para TypeScript, con el que podemos obtener informaci贸n adicional tanto en v铆nculo como en configuraciones para nuestro IDE o editor.
    .
  • Complemento y sugerencias de plantillas para no recrear la rueda manualmente.

.

馃搶 Referencia
Astro | VSCode Extension

.
As铆 mismo, es posible encontrar extensiones y plugins para otro tipo de editores e IDEs, como JetBrains, seg煤n sea la comunidad o la demanda. Siendo est茅 煤ltimo accesible v铆a el IDE en modo Early Access.
.

Complementos para desarrollo

Adicionalmente, podemos emplear revisores o formateadores de c贸digo, para evaluar las reglas de c贸digo y de aplicaci贸n de estilos, respectivamente mediante ESLint y Prettier.
.
Por ejemplo, para Prettier podemos instalar su dependencia y plugin:

pnpm install -D prettier prettier-plugin-astro

Para despu茅s, vincularlo como script en package.json con el binario prettier --write .

Para aquellos que tengan un problema de postcss al correr npm run dev, es por un problema con Tailwindcss鈥 lo pueden solucionar agregando

npx astro add tailwind