Getting Started with Astro

Introduction

This makes it a great starting point for building... well, just about anything. So let's get started.

Install Astro

To begin you need to setup an Astro project and Astro have very handily done this for you. You just need to run:

npm init astro

in the directory of your choice and select the template you would like to use. I tend to start with the starter kit as it is generic and you can build up from there. I'll also choose React as the framework to use but you can choose whichever suits you.

You then need to install the dependencies of the selected ecosystem you chose in the previous step with npm i and run the project with npm run dev. If you open up http://localhost:3000/ you should see the Welcome To Astro screen similar to the below:

In your directory you should have the following files:

Start building

Now you can start to make some changes. Open up src/pages/index.astro. You'll notice it's something like HTML with some weird template syntax at the top. Astro is great because it allows you to write JavaScript in the same place that you write your HTML. The syntax for a code block is:

---
const strText = 'Hello world';
---

As long as you have those --- at the start and end you can write any JavaScript you like. You can even do imports from other components or npm packages right inside your .astro files. We'll cover more about this in the next part of the series. For now, try editing some of the HTML and saving the file. Your localhost page should reload automatically with the changes. Simple.

You may notice right at the top of index.astro that there is an import. But you may also notice that on your actual page at http://localhost:3000 there is no JavaScript at all. This is because, by default, Astro does all rendering/importing/calculations on the server and then serves a static page from the compiled code. This means that you can import components that don't impact the performance of the front-end of your website. So you get all the benefits of a component-based system without the need for JavaScript to output these components or any extra setup. Astro just ships with this.

Let's create a new component

We're going to create a footer. Every site needs one and we don't currently have one.

Create a new file in components called Footer.astro. Put a copyright message or something in there as HTML, such as:

<footer>
	<p>Copyright &copy; My Website 2021</p>
</footer>

Now we need to import this into our index.astro file and then create a custom tag that matches the import name where we want the markup to be output. We'll put it after the main content so we now have our import at the top:

---
import Tour from '../components/Tour.astro';
import Footer from '../components/Footer.astro';
...
---

And the following as our markup:

...
<Tour />
<Footer />
...

You should now see your footer on your site!