Al iniciar un proyecto con Astro, es vital entender la estructura de trabajo y cómo aprovecharla al máximo. Desde el manejo del terminal hasta la selección de herramientas adecuadas, cada paso es crucial para el éxito de tu proyecto. Este artículo te llevará de la mano a través de las configuraciones iniciales necesarias para empezar con Astro y te proporcionará un reto que te permitirá finalizar con un impresionante portafolio web.
¿Qué herramientas necesitas?
Para empezar, es esencial contar con un editor de código. Visual Studio Code es una opción popular por su versatilidad, pero cualquier editor que prefieras funcionará. También necesitarás un navegador para verificar el entorno de desarrollo, como Google Chrome u otro de tu elección. Por último, dominar el uso de la terminal es fundamental. Si no estás familiarizado con esta herramienta, existen recursos para aprender a utilizarla de manera profesional que potenciarán tu capacidad de gestión en distintos entornos.
¿Cómo es la estructura de un proyecto en Astro?
Al crear un nuevo proyecto en Astro, usamos su línea de comandos para generar automáticamente la estructura básica. Esta estructura incluye elementos como:
Archivos de configuración en la raíz del proyecto: Aquí encontrarás archivos como .gitignore, astro.config, package.json, entre otros. Estos archivos determinan cómo se despliega y se desarrolla tu proyecto. Facilitan la gestión de dependencias y la configuración del entorno de trabajo.
Carpeta public: Contiene archivos que se copiarán directamente a la carpeta de distribución al preparar el proyecto para producción. Estos incluyen imágenes, archivos robots.txt y sitemaps.xml, fundamentales para el SEO de tu web.
Carpeta src: Alberga todo el código fuente, incluyendo componentes, layouts y estilos. Gracias a Astro, puedes modularizar tu código en componentes, facilitando su gestión y reutilización.
¿Cuáles son las particularidades de Astro?
Astro permite crear páginas web estáticas y manejar contenido sin un backend, utilizando archivos .md o .mdx. Con Astro, todo el contenido puede residir en una estructura organizada sin la necesidad de un CMS, aunque es posible integrar uno si lo deseas.
Layouts y plantillas: Los layouts se reutilizan en múltiples páginas, lo que optimiza el proceso de desarrollo al evitar la repetición de código.
Estilos personalizados: Aunque se puede trabajar con estilos CSS tradicionales, usarán Tailwind para personalizar estilos dentro del proyecto.
¿Cómo iniciar un nuevo proyecto en Astro?
Para empezar, dirígete a la terminal y usa el siguiente comando para crear tu primer proyecto con Astro. Esto te ayudará a comenzar a visualizar tu futuro portafolio web:
npm create astro@2.0.2 --template portfolio
Elige un nombre para tu proyecto y sigue las instrucciones para configurar las dependencias, control de versiones con Git, y decidir si deseas usar TypeScript. Esta configuración mínima te preparará para empezar a trabajar eficazmente con Astro.
Ejecutar tu primer entorno de desarrollo
Con la estructura lista, es el momento de ver el resultado en el navegador. Utiliza este comando en tu terminal:
npm run dev
Esto habilitará un entorno de desarrollo local para visualizar el progreso de tu web. Al abrir la dirección localhost:3000 en tu navegador, verás la plantilla base de tu proyecto lista para ser personalizada.
Paso siguiente en tu aprendizaje
Con esta guía inicial, estás preparado para comenzar tu viaje con Astro. A medida que avances y comprendas las particularidades de este framework, regresaras a personalizar tu portafolio, demostrando finalmente tus habilidades adquiridas y listo para compartir con la comunidad de desarrolladores. ¡Continúa aprendiendo y desarrollando tus competencias en el mundo del desarrollo web!
Hola, Ameth 👋
.
El comando npm create no instala como tal. Dicho comando inicializa un proyecto de Node con el binario citado, en este caso astro.
.
A diferencia de hacerlo de manera manual, como si fuera con npm install (instalación), donde llevas una personalización de configuración.
Hola @reremDev.
El comando npm create se encarga de ejecutar un paquete preconfigurado con Node, lo que incluye que por background ejecuta la instalación de los paquetes con npm install. Por lo tanto, si se puede decir que al final npm create si hace la instalación de Astro.
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
.
!Image
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 astro@latest
Dejando a la elección la selección inicial de una plantilla:
Este comando instala una versión específica de Astro(casi no se utiliza). Es recomendable el comando que proporciono el otro compañero.
Hola 👋
.
Sebastian, npm create no instala como tal. Dicho comando inicializa un proyecto de Node con el binario citado, en este caso astro.
.
El "casi no se utiliza" es cierto para el principiante por seguir un "Quick Start". El caso se emplea cuando tu entorno de Node, soporta hasta cierta versión.
Si vale la pena hacer este curso? veo que no lo actualizan desde hace 2 años, eso deja mucho que pensar de Platzi
Una forma fácil de abrir la consola en la carpeta donde se quiera trabajar es en la barra de dirección, se borra todo y se escribe cmd, y enter. esto abrirla la consola en esa carpeta.
y ya desde ahi es facil correr el proyecto de astro (toca tener instalado previamente node para que funcione).
Definitivamente, no me es posible aprender con este profe. Me retiro del curso.
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.
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 .
Gracias!
hola, ya instale wsl pero al intentar instalar astro:
Es importante tener instalado NODE en su ultima version, para esto podriamos hacer lo siguiente:
sudo npm cache clean -f
sudo npm install -g n
node -v -- chequeamos que version tenemos
node update -- actualizamos node
sudo n stable -- instalamos la ultima v estable
node -v --verificamos la version
Seria bueno que actualizaran este curso.
Hoy en día es mejor usar pnpm en lugar de npm ya que es mucho más rápido
¿Van a hacer actualización del contenido con las novedades de Astro 4?
hola
tengo el sgte error:
buitrago29@DESKTOP-E3TS4B0:~$ npm create astro@latest -- --template portfolio astro
'\wsl.localhost\Ubuntu\home\buitrago29'
CMD.EXE se inició con esta ruta como el directorio actual. No se permiten
rutas UNC. Regresando de manera predeterminada al directorio Windows.
astro v2.2.0 Launch sequence initiated.
◼ dir Using astro as project directory
◼ tmpl Using portfolio as project template
▲ error ENOENT: no such file or directory, rmdir 'astro'
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\USUARIO\AppData\Local\npm-cache_logs\2023-04-06T03_10_40_686Z-debug-0.log
Hola Juan, buscando información del error, parece que el error se da porque la terminal de Windows que estás utilizando no está reconociendo correctamente la dirección de tu carpeta:
\wsl.localhost\Ubuntu\home\buitrago29
Puedes probar corriendo el comando en Powershell o utilizando el WSL de Windows para tener una terminal de Linux.
hola
buitrago29@DESKTOP-E3TS4B0:$ npm create
Command 'npm' not found, but can be installed with:
sudo apt install npm
buitrago29@DESKTOP-E3TS4B0:$ sudo apt install npm
[sudo] password for buitrago29:
Reading package lists... Done
Building dependency tree... Done
Reading state information... Done
E: Unable to locate package npm
hola, error al ejecutar:
buitrago29@DESKTOP-E3TS4B0:~$ npm create
Command 'npm' not found, but can be installed with:
sudo apt install npm
hola
ejecuto en ubuntu el comando como lo escribe Oscar y se genera el error:
Command 'npm' nor found
quien me puede ayudar ?
"npm" es un paquete de Node.js, por lo que tienes que instalar Node.js
sudo apt-get update
sudo apt-get install nodejs
Después para ver si esta instalando puedes usar los siguientes comandos para mirar la versión:
node -v
npm -v
node ya estaba instalado ...
hola, donde se ejecuta la sentencia:
npm ...
pues lo hago en la terminal de vs cod y genera error ...
