Para instalar la última versión de Astro:
npm create astro@latest -- --template portfolio project-name
¿Qué es Astro?
Conoce los proyectos que vas a construir
¿Qué es Astro?
Quiz: ¿Qué es Astro?
Primeros Pasos
Entorno de trabajo y estructura en Astro
Crear tu primera página web con Astro
Proyecto
Breve historia de los frameworks y librerías
Conoce tu proyecto colaborativo: astrobuild.tips
Configuración de Tailwind CSS
Configuración de TypeScript
GitHub, VSCode, Prettier, Astro config
Astro API
Componentes en Astro
Páginas en Astro
Plantillas en Astro
Markdown
MDX
Enrutamiento: rutas estáticas
Enrutamiento: rutas dinámicas
Creando template de nuestra página de entrada del blog
Quiz: Astro API
Astro Islands
Componentes en React: header
Componentes en Vue: footer
Componentes en Svelte: redes sociales
Patrones de diseño: Astro Islands
Quiz: Astro Islands
Deploy
Integraciones SEO, RSS, Sitemap
Desplegar en Cloudflare Pages
Quiz: Deploy
Bonus
Bonus: aplica mejoras a tu proyecto
Cierre
Conclusiones y cierre del curso
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 24
Preguntas 13
Para instalar la última versión de Astro:
npm create astro@latest -- --template portfolio project-name
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).
.
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 proyectosrc/layouts
sub-directorio de estructuras iniciales para jerarquizar contenido o páginas de nuestro proyectosrc/pages
sub-directorio de vistas visibles para nuestros usuariossrc/styles
sub-directorios de estilos globales de nuestro proyectopublic/*
directorio de estáticos de acceso público (iconos, fuentes, metadata, etc.).package.json
definición del proyecto en Nodeastro.config.mjs
archivo de configuración de Astrotsconfig.json
archivo de configuración de TypeScript.
Como se mencionó en la introducción, podemos generar nuestro proyecto de Astro vía create astro
:
pnpm create astro@latest
Dejando a la elección la selección inicial de una plantilla:
pnpm create astro@latest --template <example-name>
pnpm create astro@latest --template <github-username>/<github-repo>
📌 Referencia
Podemos visualizar nuestras plantillas de la comunidad de Astro o buscarla mediante el repositorio del autor.
Themes | Astro
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
Command
$ npm create astro@2.0.2 -- --template portfolio projectName
Si entras en desesperación, en la espera de la versión de Astro 2.0.2 como me paso, solo intenta el comando aportado por el compañero Ameth, para instalar la última versión de Astro.
npm create astro@latest -- --template portfolio project-name
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:
.
.astro
, permitiéndonos visualizar de mejor manera el código por alguna definición mal formada, identación o segmentación de código..
📌 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.
.
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 .
En este caso el profe esta usando una terminal diferente qué se llama warp ests potenciada con IA y es muy recomendable usarla facilita mucho el uso de la terminal.
Añade esta configuración en tu archivo ‘astro.config.mjs’
export default defineConfig({
server: {
open: true,
host: true,
},
});
Esta configuración abrirá automáticamente tu servidor local y te proporcionara un ‘Network’ para que puedas conectarte a través de tus otros dispositivos, con esto podrás ver tu proyecto en tus otros dispositivos, no te parece genial?
En estos momentos se esta volviendo casi obligatorio saber Astro.
En mi caso probe usando “yarn create astro”, ya pienso usarlo junto con Next JS
recuerden que para hacer el npm create astro@latest – --template portfolio project-name primero debemos tener instalado esto https://nodejs.org/es
en navegador les recomiendo Brave ya que es un navegador que bloguea anuncios y si es primera ves usando visual o no sabes mucho de esto acá t e dejo una extensiones que te ayudaran a la hora de hacer código https://danieldiazweb.com/2023/07/26/visual-studio-code-y-sus-extensiones/
Carpeta public: Archivos que se van a copiar directamente a la carpeta de distribution. Imágenes, archivos, xml para el sidemap, etc.
Que belleza de framework, quedé encantado con la cantidad de templates que se pueden utilizar
Si deseas ver la documentación de Astro => https://astro.build/
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?