By - Azaz | Published - 08 Nov 2024 | Updated - 08 Nov 2024 | Go to - Comments & Questions

Create Your First Astro App

How to Create Your First Astro App: A Beginner’s Guide

Astro is a modern, lightweight, and versatile framework for building fast, content-focused websites. Known for its "Islands Architecture," Astro only loads JavaScript where it's needed, making it ideal for static sites and content-rich applications that prioritize performance.

If you're ready to create your first Astro app, this guide will walk you through the steps to set up, build, and deploy a basic Astro application.

What is Astro?

Astro is a modern web framework designed for building fast, content-driven websites. It offers features like:

Zero JavaScript by Default: Astro only loads JavaScript when and where it’s necessary, optimizing performance.
Component-Agnostic: You can use components from popular frameworks like React, Vue, Svelte, and more.
Static-Site Generation (SSG): Out of the box, Astro generates static HTML files, making it ideal for fast-loading pages.
Islands Architecture: This innovative architecture allows you to selectively hydrate specific components, reducing JavaScript bundle size and improving performance.

With that, let’s dive into creating your first Astro app.

Step 1: Prerequisites

Before you start, make sure you have the following installed:

Node.js: Astro requires Node.js to run. You can check if it’s installed by running:

1 node -v
If you don’t have Node.js installed, download it fromNode.js.

A Code Editor: We recommend using VS Code for easy editing.

Step 2: Set Up a New Astro Project

Astro provides an official CLI tool that makes setting up a new project quick and easy.

Open a Terminal and run the following command:

1 npm create astro@latest

Name Your Project: You’ll be prompted to name your project. You can press Enter to use the default name or type in a custom project name.
Select a Template: Astro offers various starter templates (e.g., Blog, Portfolio, Documentation). For simplicity, select the “empty” template.
Install Dependencies: After setting up the project, navigate into your project folder and install dependencies:

1 cd your-project-name 2 npm install

Step 3: Explore the Project Structure

Astro projects follow a specific structure:

src/pages: Contains the main pages of your app, each file represents a unique route.
src/layouts: Holds layout components that can be reused across multiple pages.
src/components: For reusable components, such as buttons, headers, and footers.
public: Contains static assets (e.g., images, fonts) that won’t be processed by Astro.

This folder structure keeps everything organized and makes it easy to scale the project.

Step 4: Create Your First Page

In Astro, each .astro file in src/pages automatically becomes a route. Let’s create a simple homepage.

Navigate to src/pages and create a new file called index.astro.
Add Some Content:

1 ---
2 // Frontmatter, if needed, goes here (e.g., data imports)
3 ---
4 
5 <html>
6   <head>
7     <title>My First Astro App</title>
8   </head>
9   <body>
10     <h1>Welcome to My First Astro App!</h1>
11     <p>This is a simple Astro page.</p>
12   </body>
13 </html>

Run the Development Server:

1 npm run dev

Open http://localhost:3000 in your browser to see your page live.

Step 5: Add a Layout Component

Layouts in Astro allow you to create a consistent look across pages, such as a header, footer, and navigation.

Create a New Layout: In src/layouts, create a file named BaseLayout.astro.
Define the Layout:

1 ---
2 // Using slots for injecting page-specific content
3 const { title } = Astro.props;
4 ---
5 
6 <html>
7   <head>
8     <title>{title}</title>
9   </head>
10   <body>
11     <header>
12       <h1>My Astro App</h1>
13     </header>
14     <main>
15       <slot />
16     </main>
17     <footer>
18       <p>&copy; 2024 My Astro App</p>
19     </footer>
20   </body>
21 </html>

Use the Layout in Your Page: Update src/pages/index.astro to use BaseLayout:

1 ---
2 import BaseLayout from '../layouts/BaseLayout.astro';
3 ---
4 
5 <BaseLayout title="Home">
6   <h2>Welcome to My First Astro App!</h2>
7   <p>This is a simple Astro page with a layout.</p>
8 </BaseLayout>

Check the Result: Your homepage now includes the header and footer from BaseLayout, providing a consistent structure.

Step 6: Add Interactivity with Components

Astro supports components from various frameworks, making it easy to add interactive features without compromising performance.

Add a React Component: First, install the @astrojs/react integration:

1 npm install @astrojs/react react react-dom

Configure Astro for React: Open astro.config.mjs and add the React integration:

1 import { defineConfig } from 'astro/config';
2 import react from '@astrojs/react';
3 
4 export default defineConfig({
5   integrations: [react()],
6 });

Create a React Component: In src/components, create a file named Counter.jsx:

1 import { useState } from 'react';
2 
3 const Counter = () => {
4   const [count, setCount] = useState(0);
5 
6   return (
7     <button onClick={() => setCount(count + 1)}>
8       Count: {count}
9     </button>
10   );
11 };
12 
13 export default Counter;

Use the React Component in index.astro:

1 ---
2 import BaseLayout from '../layouts/BaseLayout.astro';
3 import Counter from '../components/Counter.jsx';
4 ---
5 
6 <BaseLayout title="Home">
7   <h2>Welcome to My First Astro App!</h2>
8   <p>This is a simple Astro page with a layout and a React component:</p>
9   <Counter client:load />
10 </BaseLayout>

By adding client:load, Astro will hydrate the React component only when it’s needed, optimizing performance.

Step 7: Build and Deploy Your Astro App

Once you’re ready to go live, it’s time to build and deploy.

Build the App: Run the following command to build your app for production:

1 npm run build

Preview the Build: You can preview the production build locally to ensure everything works as expected:

1 npm run preview

Deploy to a Hosting Platform: Astro works well with platforms like Vercel, Netlify, and GitHub Pages. For example, to deploy with Vercel:

1 npm install -g vercel 2 vercel

Follow the instructions provided by Vercel to complete the deployment.

Conclusion

Congratulations! You've just built your first Astro app. With its unique Islands Architecture, Astro is a fantastic choice for creating fast, content-focused websites with minimal JavaScript. From adding layouts to integrating with React, Astro offers flexibility and performance.

Enjoy building with Astro, and feel free to explore more of its powerful features as you dive deeper!

We are a passionate team of developers and designers dedicated to helping businesses thrive in the digital age. Through cutting-edge technologies and innovative solutions, we empower you to achieve success with powerful websites, custom software, and intelligent digital products.

Hire Us