- read

Shipping Less JavaScript with Astro Static Site Bundler

Javascript

Madushika Perera 46

Let’s Create a Simple Application with Remotion.

Now, you understand how Astro works and its features. So, let’s see how we can create a simple application with Astro.

Step 01 — Initialize the project

First, let’s create a directory and initialize the project with the Astro CLI. Then, all you need to do is run the following command on your project root terminal.

npm init astro

This command will prompt some options for you to choose.

Astro CLI init
Astro CLI init
Astro project structure

Then you have to install all the dependencies for your application. After that, you can start the application.

npm install
npm start
Astro welcome page

This will open a new browser tab with the Astro welcome page. Astro has its own Language support extension for VScode, and it will enable syntax highlighting and other language options.

Note: Astro supports node version 14 and above, so make sure you have version 14 or above.

Step 02 — Bring your own framework (BYOF)

With Astro, you can use your favorite frontend framework or library to build the application. You can also use the Astro CLI to select the framework you want at the initializing stage.

For the example, let’s use React. So, after initializing the project, you will need to add a small configuration to your astro.config.mjs file and let Astro know which type of render is required for your components.

Since we are using React, We need to add the following configuration under the renderers.

renderers: ['@astrojs/renderer-react'],

Now let’s create 2 components called Form and List insrc/components folder.

Then you need to import Form.jsx component in index.astro file under pages directory.

Pokemon Application

This will render the application in the browser. But the inputs will not work since the output HTML page is not having any JavaScript.

Step 03 — Enabling the hydration technique

If you monitor the application with Chrome DevTools, you can see that Astro has removed all the JavaScript. Therefore, there is no React code loaded to the browser.

To enable JavaScript, we need to add the Hydration technique in the component inside the index.astro file.

<body>
 <main>
 <Form client:visible />
 </main>
</body>

Then the application works fine since the JavaScript is loaded (Hydrated) as soon as the element entered the viewport.

JavaScript loaded to the browser

Step 04 — Adding styling

We can do inline styling of Astro components by adding a <style> tag. Since Astro pages are scoped by default, these Styles will be applied only to the respective page.

We can also import Styles. For example, applications using React/Preact can import the styles as follows;

import './home.css';

Besides, Astro also supports Sass out-of-the-box and can be configured to use Tailwind easily.

Step 05 — Fetching data from API

Astro pages have access to the global fetch() function in their setup script. It is a native JavaScript API (MDN- fetch) that lets you make HTTP requests.

const response = await fetch('https://pokemons.com/all.json');
const pokemons= await response.json();

Step 06 — Deploying with Netlify

You can deploy the Astro applications to Netlify. Below article will guide you through the relevant steps;

You can find the complete code of this example in my GitHub repository and the link to the deployed application.