Petr Paločko - fotograf a webový vývojář Petr Paločko Fotograf & Webový vývojář
Zpět na výpis článků Astro javascript framework

Astro framework a instalace Astro projektu.

Podíváme se na to, co je Astro framework, proč ho využívám a jak nainstalovat projekt.

Už nějakou dobu Astro framework používám a přijde mi, že moc lidí o něm vůbec neví, což je škoda. Já jsem ještě minulý rok využíval NextJS, který jsem ale nyní skoro opustil, protože Astro mi ho dokáže nahradit. V hodně situacích mi přijde Astro jednodušší a mnohem vhodnější na obsahové weby, kterými se momentálně zabývám. Určitě by mnoho z vás namítalo, že NextJS je pro obsahové weby overkill, ale i to je jeho účel, aby lidi, kteří používají React měli možnost právě lepší SEO optimalizace a Server-Side-Renderingu.

Navíc už jen to, že Astro má možnost statického buildu je pro mě super. Protože pokud budu dělat fakt jen menší projekt nebo bude již někdo mít backend v PHP, tak můžu udělat jen frontend klasickou cestou, na kterou jsem zvyklí - pomocí Astro a poté už jen statický frontend poslat na FTP.

Co je to Astro?

Astro je webový framework v jazyce JavaScript optimalizovaný pro vytváření rychlých webových stránek založených na obsahu.

Server-First

Astro zlepšuje výkon webových stránek vykreslováním komponent na serveru a odesíláním odlehčeného HTML do prohlížeče bez zbytečné režie JavaScriptu.

Content-Driven

Astro byl navržen tak, aby pracoval s obsahem bez ohledu na to, kde se nachází. Takže data můžeš načítat ze souborového systému, externího rozhraní API nebo oblíbeného systému CMS.

Přizpůsobitelnost

Astro lze libovolně rozšiřovat pomocí vlastních komponent s možností kombinování různých Javascriptových knihoven, CSS knihoven, různých integrací a dalšího.

Nulové uzamčení

Astro podporuje všechny hlavní Javascriptové frameworky. Takže pokud máš komponenty v React, Vue, Preact, Svelte, Solid a dalších, můžeš si své komponenty vzít a použít je v Astru. Stejně tak je můžeš kombinovat.

---
import BuyButton from '../components/BuyButton.jsx';
import { getProductDetails } from "ecommerce-package";
import ProductPageLayout from '../layouts/ProductPageLayout.astro';

const product = await getProductDetails(Astro.params.slug);
---

<ProductPageLayout>
  <img src={product.imageUrl} alt={product.imageAlt} />
  <h2>{product.name}</h2>
  <BuyButton id={product.id} client:load />
</ProductPageLayout>

Použití React komponenty v rámci Astro projektu.

---
import BuyButton from '../components/BuyButton.vue';
import { getProductDetails } from "ecommerce-package";
import ProductPageLayout from '../layouts/ProductPageLayout.astro';

const product = await getProductDetails(Astro.params.slug);
---

<ProductPageLayout>
  <img src={product.imageUrl} alt={product.imageAlt} />
  <h2>{product.name}</h2>
  <BuyButton id={product.id} client:load />
</ProductPageLayout>

Použití Vue komponenty v rámci Astro projektu.

Pokud se chceš o Astro dozvědět více, můžeš se jít podívat na Astro.build. Tam najdeš více informací a příkladů využití.

Instalace Astro

Instalace nového Astro projektu je velice jednoduchá. Stačí ti k tomu pouze jeden příkaz, protože se Astro instaluje přes CLI. Jakmile příkaz spustíš, celým procesem tě to provede. Názvem projektu, zda chceš využívat Typescript nebo zda chceš nainstalovat prázdný projekt či využít nějakou šablonu, například pro blog.

# Vytvoření nového projektu pomocí npm
npm create astro@latest

# Vytvoření nového projektu pomocí yarn
yarn create astro

Po instalaci se stačí přepnout do projektu pomocí:

cd ./nazev-projektu

Poté už stačí jen zapnout dev server, který v sobě obsahuje i live reload. Pokud jsi pojem live reload ještě neslyšel, tak live reload je funkce, která ihned po uložení změn v souboru aktualizuje stránku. Díky tomu nemusíš stránku aktualizovat manuálně.

npm run dev

Určitě se budu Astro frameworkem zabývat i v dalších článcích. Rád bych prošel komplet vývoj v Astru, stejně tak i ukázal tvorbu komponent a mnoho dalšího.

Pokud se chceš podívat na video, jak Astro projekt instaluji a vše detailně vysvětluji, můžeš se podívat na výuková videa na HeroHero. Na HeroHero je již nyní více videí, například jaké aplikace používám k webovému vývoji, výše zmíněná instalace Astro projektu nebo i integrace TailwindCSS do Astro projektu.