A look at the building with Astro

  • Home / Blog / A look at…

A look at the building with Astro

Astro is a brand new framework for creating websites. For me , Big thing It allows you to build a site as if you were using a JavaScript framework (and you are), but the output is zero JavaScript static site. You can opt for client-side JavaScript as needed, and there are smart options to do so. In particular, the learning curve is somewhat flattened by the fact that it supports a component you may already know: reaction / practical (JSX), slot, view, or web component.

Table bet

Starting a new project is as easy as it should be:

npm init astro
npm install
npm start

A helpful little process and output.

As expected (like you’ll meet with Next or Newcast or another site builder type project) you get a giant server at a local port that you can pop up:

From here, I consider reloading the CSS injection / hot module to the table stain. No worries there:

A stable site generator

This is such an amazing thing for me. I really like the idea of ​​static site generators – I think they make a lot of sense in a lot of situations. Flexible, CDN performance, SEO, HTML for accessibility, sending HTML to as many wires as possible is just a good idea, you name it. But in the past there were many options either:

  • Static site generator powered by JavaScript, which generates “static” sites, but Also A JavaScript bundled ship (such as Next or Gatsby)
  • A static site generator that focuses more on HTML and has its own templates / formats that are not components of JavaScript (such as Eleven or Jackal)

I know there are exceptions, but it involves a large number of site generator markets.

But I want both!

  • I want to build sites from JavaScript components, because the syntax and tooling around them is much better than any other component system we have.
  • I want static production in fact Zero JavaScript (unless I select things manually).

This is what happens with Astro.

Those ingredients?

  • They can be .jsx Files
  • They can be .svelte Files
  • They can be .vue Files
  • These are the “performers” and you can BYO.

Astro also has its own form (.astro) And also very compelling because:

  • This is clearly a first class citizen in how Astro works
  • It’s comfortable JSX-like;
  • … Better except because it works like <head> Act automatically
  • Styled scoping works out of the ordinary <style> Tag
  • “Fence” runs JavaScript during construction. Let’s take a closer look.

Astronomical files

I mentioned some cool parts about it .astro Syntax straight up to a higher level, I just like what they look like. Such a small boiler plate! It just gets right.

---
import SomeComponent from "../components/SomeComponent";

// This runs in Node, so you look at your command line to see it.
console.log("Hi.");

// Example: <SomeComponent greeting="(Optional) Hello" name="Required Name" />
const { greeting = 'Hello', name } = Astro.props;
const items = ["Dog", "Cat", "Platipus"];
---
<!-- JSX-like, but also more pleasantly HTML like, like this comment  -->
<div class="module">
  <h1>{greeting}, {name}!</h1>
  <ul>
    {items.map((item) => (
      <li>{item}</li>
    ))}
</ul>
</div>

<SomeComponent regular="props" />

<style>
   /* Scoped! */
  .module {
    padding: 1rem;
  }
</style>

“Fence” (---) Is where the initial JavaScript goes. This is where I am ink in the form of this component if anyone needs it (they can be typed if you like), import / export and compile the data for the template below.

Which sounds a bit funky, but according to AstroWeb, this node is JavaScript. It goes into the construction process. so that console.log() I don’t see the statement in my browser console, I see it in my command line.

pagesRouting style

Next.js called it popular, but in reality the concept is as old as the file system. Think about how the classic Apache server works. If you have a file system such as:

index.html
/about/
  index.html

In a browser, you can see http://website.com/about And it will do it index.html Page under /about Folder routing is like here. Being me:

/pages/
  index.astro
  about.astro

I will also have a home page /about/ Page on my site. This is a refreshing way to deal with routing, as opposed to the need to component component itself.

If you want to work where all the content of your site resides in the markdown files in Repo, then he is a first class citizen.

I think this is super common for things like blogs and documents, especially since they are already popular targets for static site generators. And in those early days, I think we would see a lot of astro sites alongside these letters while people would wait to see if it was ready for big things.

One way to use markdown is to create pages directly in markdown. The markdown will also have a “fence” (front meter) where you can check which layout you want to use (best to use). .astro File) and pass in the data if you need. Then the entire contents of the Mark D file will go into it <slot />. Beautiful color smart:

Another incredibly satisfying way to use Markdown in Astro is to use built-in <Markdown /> Component Import and use:

---
import { Markdown } from 'astro/components';
---

<main>
  <Markdown>
    # Hello world!
    
    - Do thing
    - Another thing in my *cool list*
  </Markdown>

  <div>Outside Markdown</div>
</main>

You can also snatch markdown from anywhere else in your project and get into any component. It retrieves data, so let’s take a look at it.

Recover data rules

We were just talking about the markdown, so let’s close the loop there. You can use it to “retrieve” data internally in Astro fetchContent. See how straight it is:

I bring it down rough markdown, then I can use HTML if I want to return it, or slap it. <Markdown /> If for any reason this makes sense then the component:

---
import { Markdown } from 'astro/components';
const localData = Astro.fetchContent('../content/data.md');
---

<div class="module">
  <Markdown content={localData[0].astro.source} />
</div>

But I don’t just need to bring in internal data. I’m a fan of Eleven. During the eleventh construction, you can definitely get data from an external source, but I would say that’s fine. You bring the data with the code in a separate JavaScript file, drag it to your own network library, and then process and return the data for use elsewhere in the template. Such. At Astro, this retrieval can be done with the ingredient you need.

Check out this real-world example of how to collect data from CSS-Trucks here and display it as a card.

---
import Card from '../components/Card.astro';
import Header from '../components/Header';

const remoteData = await fetch('https://css-tricks.com/wp-json/wp/v2/posts?per_page=12&_embed').then(response => response.json());
---

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CSS-Trickzz</title>
    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>⭐️</text></svg>">
    <link rel="stylesheet" href="https://css-tricks.com/style/global.css">

    <style lang="scss">
      .grid {
        margin: 4rem;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        @media (max-width: 650px) {
          grid-template-columns: repeat(1, 1fr);
          margin: 2rem;
        }
        gap: 3rem;
      }
    </style>
</head>

<body>
  <main>
    <Header />

    <div class="grid">
      {remoteData.map((post) => {
        return(
          <Card 
            title={post.title.rendered}
            link={post.link}
            excerpt={post.excerpt.rendered}
            featured_img={post.featured_media_src_url}
          />
        )
      })}
    </div>

  </main>
</body>

</html>

Check it out, I can easily create this page from CSS-tricks data:

The interesting thing about this is that the data is:

  1. In the node, not the client side, and
  2. During the construction process.

So, to keep such a website updated, I’d have to run a regular billing / / deployment process.

I think it’s weird how Astro supports all these different frameworks outside of the box.

I’ve heard some pushbacks that Astro is useless npm install After the level you have to bring down a bunch of stuff that you won’t need or use. I’ve heard some pushbacks on the idea that combining a JavaScript framework is a terrible idea.

I agree that this is a strange feeling, but I’m not particularly worried about what the non-user is facing. When things are just happening during the construction process and whenever the user finds it is HTML, use what feels good! If you end up loading a component-based framework to do interactive things on the page, it definitely makes sense to limit it to just one. And since you’re getting a lot out of construction time, it might make sense to use something designed for that. Super Light on Render – Page Interactivity.

Style

We say you want to use SaaS to style your site. With so many site generators, they rely on it, as a philosophy. Like “Nah, we don’t want to have an opinion here, you want the style you want”. And I get it, it can be a force to be reckoned with, sometimes it’s a framework that people have a lot of opinion on. But to me, it often feels unfortunate because now I want to wire myself some process of styling processing construction (like gulp) with which I actually. Don’t want to deal

With Astro, it seems that philosophy is still widely supporting the out-of-the-box styling technique.

  • Bus import "./style.css"; Vanilla style sheets
  • Use <style> Block anywhere .astro Files and CSS will be restricted to this component;
  • … Which is similar to CSS modules, but only needed when you go for one .jsx File, and if you do, it’s supported.
  • Styling skills .svelte And .vue Files work as expected.
  • The sauce is inside, just put it on <style lang="scss"> Anywhere on the styling blocks.

There is more detail in the style post.

Javascript likes tricks

Allow me to block quote from README:

  • <MyComponent /> Will only offer the HTML version of MyComponent (already decided)
  • <MyComponent:load /> Will offer MyComponent Page load
  • <MyComponent:idle /> The application will use addendable () to submit MyComponent As soon as the main thread is free
  • <MyComponent:visible /> Use an intersection observer to render MyComponent When the element enters the viewport

This is some fancy dance. HTML by default, and you choose to run your Component Client Side (JavaScript) only if you specifically want to, and still, under effective conditions.

I put and used a bit of Vue-based counter (with their examples) on my demo site :visible Mod modifier to make it work by checking it:

Wave equipment is filled only when equipment is needed. As the blog post says:

Of course, sometimes client-side JavaScript is unavoidable. Image carousels, shopping carts, and autocomplete search bars are just a few examples of things that require some JavaScript to run in a browser. This is where Astro really shines: when a component requires JavaScript, Astro only loads that component (and any dependencies). The rest of your site exists as static, lightweight HTML.

Disposed is poppy ‘

I should point out that there is Astro Super duper new. As I write, they don’t even have the actual documents. It is possible to use a framework with documents that only contain README. Although they are working on it! I have seen his observations because I am in Discord.

I think they are very smart for public discourse because that means there is a fast n-fast feedback loop to improve their framework. I find it very useful to be in it.

I’m sure they’re hoping that Astro will go far beyond a framework, but a full platform, where Astro is just an open source core. Learn about it with Jason, Fred Talk with Jason, learn with Jason.

Write a Comment

Your email address will not be published. Required fields are marked *

x