How to Create a Project in Astro

In this tutorial, we will see how to get started with Astro by creating and running a project in Astro from scratch.

As we mentioned in the introduction, one of the strong points of Astro is the convenience and simplicity of development. So, you can imagine, creating a project is a very simple process.

Let’s get started. But first, let’s review that we have everything necessary to begin with Astro.

Prerequisites

Before we start, we need to make sure we have the following installed.

That is, the usual tools for web development. But in case you are not familiar with any of them, here are some links.

Creating a Basic Project in Astro

Astro provides a command-line tool called create-astro that makes creating a new project easy.

In other words, to get started, we just need to open a terminal and run the following command:

npm create astro@latest

This command will download and install the latest version of Astro and guide you through an interactive setup wizard to configure your project.

The wizard will ask you several questions:

Once the wizard is completed, the project will be created in a folder with the name you chose, and it will initialize the entire project for us (look at that, how handy).

Running the Development Server

Once we have created our project, we will want to see it in action. So first, we navigate to the project folder with the following command:

cd astro-demo

To see your project in action, we run the development server with the following command:

npm run dev

This will start a local server at http://localhost:4321/. Open your browser and visit that address to see Astro’s default homepage.

Modifying the Application

Now that you have a basic project running, it’s time to start playing with it. For example, let’s see it by modifying the homepage of our project.

Open the file src/components/Welcome.astro. Instead of what you have, paste this code:

---
---

<div id="container">
	<main>
		<section id="hero">
			<h1>
				Hello from <strong>LuisLlamas.es</strong> 💛
			</h1>
		</section>
	</main>
</div>

<style>
	#container {
		font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
		height: 100%;
	}

	main {
		height: 100%;
		display: flex;
		justify-content: center;
	}

	#hero {
		display: flex;
		align-items: start;
		flex-direction: column;
		justify-content: center;
		padding: 16px;
	}

	h1 {
		font-size: 22px;
		margin-top: 0.25em;
	}
</style>

Now just save your file, and right after that you will see your page change! It will become this:

Ta-da! 🎉🥳. What you just saw is Hot-reload, a feature of Astro that automatically reloads the web when we make changes. Isn’t it wonderful?

Building the Application

When we have finished developing our project, and we want to put it into operation (in production) we need to build our web.

To do this, we run this command.

npm run build

Astro (and Vite) will work their ✨ “magic” ✨ and generate your web page.

After the process, you will have your web page generated in the /dist folder. With everything necessary to upload it directly to a web server. Without needing anything else.

Wasn’t that easy? But this is just the beginning. In the upcoming tutorials, we will see how to use Astro components.