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.
Then you have to install all the dependencies for your application. After that, you can start the application.
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.
Now let’s create 2 components called Form and List in
Then you need to import
Form.jsx component in
index.astro file under pages directory.
Step 03 — Enabling the hydration technique
<Form client:visible />
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;
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
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.