Fast web applications using Astro

What is Astro?

Scaffold new Project

mkdir my-astro-project && cd $_  
npm create astro@latest
cd my-astro-site && npm run dev
📦my-astro-site
┣ 📂.git
┣ 📂public
┃ ┗ 📜favicon.ico
┣ 📂src
┃ ┣ 📂components
┃ ┃ ┗ 📜Layout.astro
┃ ┗ 📂pages
┃ ┃ ┗ 📜index.astro
┣ 📜.gitignore
┣ 📜.npmrc
┣ 📜README.md
┣ 📜astro.config.mjs
┣ 📜package-lock.json
┣ 📜package.json
┗ 📜tsconfig.json

Create Components

---
interface Blogs {
id: number;
name: string;
description: "string;"
author: string;
slug:string;
}
const blogs: Blogs[] = [{
id: 1,
name: 'Building fast web application using-Astro',
description: "'This is the first blog',"
author: 'John Doe',
slug:"Building-fast-web-application-using-Astro"
},
{
id: 2,
name: 'Building-a-Smart-contract with vyper',
description: "'This is the second blog',"
author: 'Mandy Eden',
slug:"Building-a-Smart-contract with vyper"
},
];
---
<div>
<h1>Blogs</h1>
<ul>
{
blogs.map(blog =>
<div class="media mb-3">
<div class="media-body p-2 shadow-sm rounded bg-light border">
<h6 class="mt-0 mb-1 text-muted">{blog.author}</h6>
<a href={blog.slug}>{blog.name}</a>
</div>
</div>)
}
</ul>
</div>

Open Source Session Replay

Creating App Layout

---
const title = 'Blog App';
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<title>{title}</title>
</head>
<body>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand">Navbar</a>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav>
<div class="container mb-4">
<slot/>
</div>
</body>
</html>

Creating Static Asset

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

Creating an App page

---
import Blog from "../components/Blog.astro";
import Header from "../layouts/Header.astro";
---
<Header>
<Blog></Blog>
</Header>

Adding Markdown

---
layout: '../layouts/Header.astro'
---
# Building fast web application using AstroA static site generator is a tool that generates an entirely static HTML website from raw data and a collection of templates. A static site generator, in essence, automates the job of writing individual HTML pages and makes those sites ready to be delivered to users ahead of time.
This tutorial will introduce a new static site generator for building fast web applications. You'll create a static blog application using Astro at the end of this tutorial.
Let's get to it.## What is AstroAstro is a new static site builder with a robust developer experience that meets light output for the modern web. Astro uses a current server-side templating language that renders directly to HTML & CSS, eliminating heavy JavaScript automatically. It is the first site builder to eliminate dead code from your website and only hydrate your basic, interactive UI.> Note: Astro is still beta software. Therefore, missing features and bugs are expected! The developers are still working towards a stable, production-ready v1.0 release.
## Prerequisites
Ensure you have `Node.js - 14.15.0, v16.0.0, or higher` to get started.

Conclusion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store