Aplicaciones Web

Astro, o Astro.js, es un popular generador de sitios estáticos concebido para quienes desean crear sitios web ricos en contenido que funcionen con rapidez y fluidez. Su naturaleza ligera, estructura intuitiva y suave curva de aprendizaje lo hacen atractivo para desarrolladores de todos los niveles de experiencia.

A pesar de su pequeño tamaño, Astro viene con potentes herramientas que aumentan drásticamente la flexibilidad de tu sitio, ahorrándote horas en la gestión de contenidos y temas. Además, ofrece a los desarrolladores la opción de trabajar con sus frameworks preferidos a la vez que con Astro — una perspectiva atractiva para los programadores experimentados que ya cuentan con un gran número de favoritos.

Éstas son sólo algunas de las formas en que Astro destaca entre la multitud:

• Arquitectura en isla: Astro extrae tu interfaz de usuario (IU) en componentes más pequeños y aislados, conocidos como «Islas Astro», que pueden utilizarse en cualquier página. El JavaScript no utilizado se sustituye por HTML ligero.
• Cero JavaScript (por defecto): Aunque puedes utilizar todo el JavaScript que quieras para crear tus sitios web, Astro intentará desplegar cero JavaScript en producción transcribiendo tu código por ti. Es un enfoque perfecto si lo que te interesa es la velocidad del sitio.
• SSG y SSR incluidos: Astro comenzó como un generador de sitios estáticos, pero en el camino se convirtió en un framework que utiliza tanto la generación de sitios estáticos (SSG) como la renderización del lado del servidor (SSR, Server-Side Rendering). Y puedes elegir qué páginas utilizarán cada enfoque.
• Agnóstico en cuanto a frameworks: Al utilizar Astro, puedes utilizar cualquier framework JavaScript que desees, incluso varios frameworks a la vez. (Hablaremos de esto con más detalle más adelante en este artículo)

Además, Astro está preparada para la tecnología edge, lo que significa que puede desplegarse en cualquier lugar, en cualquier momento y con facilidad.

Instalación y configuracion basica

• 1) npm create astro@latest .
• 2) npm install bootstrap@latest
• colocar esto en el Layout para integrar a bootstrap
  import 'bootstrap/dist/css/bootstrap.css';
  <script src="bootstrap/dist/js/bootstrap.bundle.js"></script>
• El paso 3 y 4 solo para desplegar en github
  3) npm i gh-pages
• 4) agregar esta linea en el script
  "deploy": "gh-pages -d dist"
• 5) en astro.config.mjs
  export default defineConfig({
  site: 'https://profwilliamarte.github.io',/* aqui colocarias el nombre de tu cuenta*/
  base: '/jsonpeliculasastrobootstrap',/* aqui colocarias el nombre de tu repositorio*/
  build: {
  assets: 'astro' /// muy importante
  }
  });
  

Estructura de Astro

	
		├── dist/
		├── src/
		│   ├── components/
		│   ├── layouts/
		│   └── pages/
		│       └── index.astro
		├── public/
	

	
	<div class="saludo">
		<h2>Hola, soy un componente o</h2>
	</div>
	

	
	
	
	---
	import Saludo from ../components/Saludo.astro
	---
	<div>
		<Saludo />
	</div>
	

					
	---
	const { title = 'Hello' } = Astro.props
	---

	<div class="saludo">
    	<h2>{title}</h2>
	</div>
			
	

	
	---
	import Saludo from ../components/Saludo.astro
	---
	<div>
		<Saludo title="Good day"/>

    	<Saludo />
 	</div>