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

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

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

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 .

Definitivamente, no me es posible aprender con este profe. Me retiro del curso.
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 鈥榓stro.config.mjs鈥

export default defineConfig({
  server: {
    open: true,
    host: true,
  },
});

Esta configuraci贸n abrir谩 autom谩ticamente tu servidor local y te proporcionara un 鈥楴etwork鈥 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 鈥測arn 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/