No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Entorno de trabajo y estructura en Astro

3/25
Recursos

Aportes 24

Preguntas 13

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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

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

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 .

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`

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.

Que bueno, se ve bastante poderoso el framework. y su instalacion se ve que es muy sencilla. Estoy emocionado de aprender a crear :) \*Agradecido con Platzi\*
npm : El término 'npm' no se reconoce como nombre de un cmdlet, función, archivo de script o programa ejecutable. Compruebe si escribió correctamente el nombre o, si incluyó una ruta de acceso, compruebe que dicha ruta es correcta e inténtelo de nuevo. En línea: 1 Carácter: 1 \+ npm create astro@latest -- --template portfolio miAstro.me \+ ~~~ \+ CategoryInfo : ObjectNotFound: (npm:String) \[], CommandNotFoundException \+ FullyQualifiedErrorId : CommandNotFoundException Buenos dias esto me da este error. alguien me puede ayudar porfavor
Si da error al ejecutar `npm run dev`, la solución es actualizar NodeJS a la última versión estable.

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?

La estructura de carpetas que lleva astro es fundamental entenderla para poder manejar bien nuestro proyecto. Astro propone una estructura de carpetas opinionada para nuestro proyecto. La raíz del proyecto deberá incluir los siguientes archivos y carpetas: * `src/*` - El código fuente de tu proyecto (componentes, páginas, estilos, etc.) * `public/*` - Archivos sin código que no serán procesados (fuentes, íconos, etc.) * `package.json` - El manifiesto de tu proyecto * `astro.config.mjs` - El archivo de configuración de Astro (recomendado) * `tsconfig.json` - El archivo de configuración de TypeScript (recomendado)![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/b9cdb7b5-2084-45a8-8526-7925adfe7b12/1bb6ed6e-288a-4add-807b-8a7a8c17a71c/Untitled.png)La carpeta `src/` es donde se encuentra el código fuente de tu proyecto. Esto incluye:Astro procesa, optimiza y empaqueta los archivos en `src/` para crear la página web final que será desplegada al navegador. A diferencia de la carpeta estática `public/`, los archivos en `src/` serán procesados por Astro.Algunos archivos (como los componentes de Astro) no serán enviados al navegador como fueron escritos, sino que serán renderizados a HTML estático. Otros archivos (como CSS) serán enviados directamente al navegador, pero antes serán optimizados o empaquetados con otros archivos para un mejor rendimiento. * [Páginas](https://docs.astro.build/es/core-concepts/astro-pages/) * [Plantillas](https://docs.astro.build/es/core-concepts/layouts/) * [Componentes de Astro](https://docs.astro.build/es/core-concepts/astro-components/) * [Componentes de frameworks (React, etc.)](https://docs.astro.build/es/core-concepts/framework-components/) * [Estilos (CSS, Sass)](https://docs.astro.build/es/guides/styling/) * [Markdown](https://docs.astro.build/es/guides/markdown-content/)
Estoy intentando iniciar con este TEMPLATE <https://github.com/jordienr/astro-design-system> Ejecutando este código `npm create astro@lastest -- --template jordienr/astro-design-system` Pero no logro que funcione: `npm ERR! code ETARGET` `npm ERR! notarget No matching version found for create-astro@lastest.`
Alguien me puede confirmar si se le cuelga mucho el video también ? y no, no es mi conexión.
me gusta mucho este curso estoy aprendiendo algo nuevo :)

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/