Création d’un site statique rapide avec Astro et Vue

Découvrez Astro, un outil permettant de créer des sites Web statiques rapides, faciles à déployer et à intégrer à votre framework frontend préféré. Nous allons créer un exemple d’application intégrée à Vue.

Astro est un outil bien connu et relativement nouveau pour créer des sites Web statiques qui peuvent être facilement déployés sur un serveur Web. Il offre des performances ultra-rapides et une expérience de développement moderne. L’un de ses avantages distinctifs est qu’il peut être intégré à nos outils frontaux préférés.

Dans cet article, nous apprendrons ce qu’est Astro, ses avantages et comment nous pouvons intégrer Astro à notre framework préféré – dans ce cas, Vue, car c’est l’outil frontal que nous utiliserons.

Qu’est-ce qu’Astro ?

Astro est un constructeur statique moderne permettant de créer une architecture Web frontale prenant en charge le fractionnement du code et le rendu côté serveur. Astro extrait notre interface utilisateur en composants isolés plus petits sur la page et remplace le JavaScript inutilisé par du HTML léger pour augmenter le temps de chargement et l’interactivité de notre site Web.

Astro est un framework polyvalent et fantastique doté de fonctionnalités uniques qui, lorsqu’il est utilisé pour améliorer l’efficacité de notre application, nous permet d’optimiser nos composants et d’envoyer seulement une petite quantité de code JavaScript à notre frontend.

Avantages de l’utilisation d’Astro

Astro est un framework Web tout-en-un gratuit et open source permettant de créer des sites Web rapides et axés sur le contenu. En dehors de cela, l’utilisation d’Astro présente d’autres avantages :

• Nous pouvons facilement intégrer Astro dans notre framework de composants ou nos outils frontaux préférés, car il offre une prise en charge de première classe pour des outils tels que le contenu React, Preact, Vue, Vite, Svelte, Lit, Solid et Markdown.
• Astro accélère la vitesse de notre site Web car il est léger, pré-rend notre site sur le serveur et l’envoie au client sous forme de page HTML. De plus, il dispose d’un système de regroupement intégré qui regroupe nos fichiers d’actifs, tels que les fichiers CSS, les images et les fichiers JavaScript, afin de réduire le volume des demandes et d’accélérer le temps de chargement.
• Astro prend en charge d’excellentes fonctionnalités intégrées telles que les thèmes et les intégrations ; ces fonctionnalités peuvent être ajoutées à notre projet pour améliorer l’analyse, les performances et l’accessibilité du référencement.
• Il est évolutif car il nous permet de créer facilement une architecture évolutive en séparant les composants et les pages dans des fichiers séparés.
• Astro est adaptable et peut être utilisé pour créer n’importe quelle application, y compris des applications Web complexes et d’une seule page.

Créer un nouveau projet Astro

Avant de créer un nouveau projet Astro, nous devons confirmer que Node est installé sur notre machine locale ; si nous l’avons installé, nous pouvons vérifier la version de Node avec la commande ci-dessous :

node --v 

Après avoir vérifié la version de Node, nous allons créer un nouveau projet Astro avec la commande ci-dessous :

# for npm use this command 
npm create astro@latest
    
# for yarn use this command 
yarn create astro

Remarque : Nous pouvons toujours créer Astro sur notre machine sans créer de répertoire vide ; si nous n’avons pas de répertoire vide, l’assistant nous aidera à en créer un automatiquement.

Une fois que nous avons sélectionné le package préféré que nous souhaitons utiliser lors de l’installation d’Astro, des questions nous seront posées parmi lesquelles choisir. Ci-dessous un schéma des questions qui nous seront posées

Une fois l’installation de notre projet terminée, nous exécuterons notre serveur de développement local avec la commande ci-dessous :

npm run dev

Cela nous donnera un accès par navigateur au projet à l’adresse http://localhost:3000.

Intégrer Vue dans Astro

Astro est assez simple à intégrer à n’importe quel framework de notre choix. Dans cette section, nous le ferons avec Vue.

Pour intégrer Vue dans notre application Astro, nous utilisons npm. Nous utiliserons la commande suivante pour y parvenir :

npx astro add vue 

Astro et Vue ont été installés et configurés avec succès. L’étape suivante consiste à développer un projet utilisant Vue et Astro.

Création d’application avec Astro et Vue

Explorons comment nous pouvons créer une application avec Astro et Vue. Dans cette section, nous allons utiliser l’API de la NASA pour créer une application qui affiche des images spatiales.

La première étape consiste à concevoir le style de notre application où les images récupérées seront affichées. Ensuite, nous développerons un formulaire avec un champ de recherche et un bouton ; le champ de recherche nous permettra de trouver l’image spécifique que nous recherchons :

<template>
<div class="flex flex-col text-center w-full py-24">
        <h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900">Welcome to NASA Application
        </h1>
        <p class="lg:w-2/3 mx-auto leading-relaxed text-base">You can search for any images and it will be displayed to
          you.</p>
      </div>
      <form>
        <div class="container px-5 py-4 mx-auto">
          <div
            class="flex lg:w-2/3 w-full sm:flex-row flex-col mx-auto px-8 sm:space-x-4 sm:space-y-0 space-y-4 sm:px-0 items-end">
            <div class="relative flex-grow w-full">
              <label for="email" class="leading-7 text-sm text-gray-600"></label>
              <input type="email" id="search-bar" placeholder="Search for NASA Images "
                class="w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-indigo-500 focus:bg-transparent focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-3 px-3 leading-8 transition-colors duration-200 ease-in-out"
                v-model="query">
            </div>
            <button class="text-white bg-indigo-500 border-0 py-2 px-12 focus:outline-none rounded text-sm"
              @click.prevent="fetchResults">Search
              Images</button>
          </div>
        </div>
      </form>
</template>

Lors de la recherche de photos, nous avons besoin d’une partie qui affichera les résultats de notre recherche. Cette section comprendra l’image, le titre de l’image, la description et les mots-clés :

<template>
      <div class="flex flex-wrap -m-4">
        <div class="lg:w-1/3 sm:w-1/2 p-4" v-for="result in results">
          <div class="flex relative">
            <img alt="gallery" class="absolute inset-0 w-full h-full object-cover object-center"
              :src="https://www.telerik.com/blogs/result.links[0].href">
            <div class="px-8 py-10 relative z-10 w-full border-4 border-gray-200 bg-white opacity-0 hover:opacity-100">
              <h2 class="tracking-widest text-sm title-font font-medium text-indigo-500 mb-1">{{ result.data[0].title }}
              </h2>
              <h1 class="title-font text-lg font-medium text-gray-900 mb-3" v-for="keyword in result.data[0].keywords">
                <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">{{
                  keyword }}</span>
              </h1>
            </div>
          </div>
        </div>
      </div>
</template>

Passer notre appel de récupération avec l’API de la NASA

La première requête que nous ferons sera adressée à notre API, que nous récupérerons à l’aide d’Axios. Si Axios n’est pas installé dans notre projet, nous pouvons utiliser la commande suivante pour installer Axios :

npm install --save axios 

Axios peut être rapidement configuré en l’important simplement dans notre fichier de composant dans la balise script après l’installation :

<script lang="ts">
import axios from 'axios'
export default {
  name: "NasaImage",
}
</script>

Avant de pouvoir récupérer des données, nous devons définir les données de nos composants. Nous pouvons le faire en créant un data() méthode. Nous déclarerons results comme un tableau vide et query comme une chaîne vide. Le tableau vide est l’endroit où nous stockerons les données que nous récupérons de l’API :

<script lang="ts">
import axios from 'axios'
export default {
  name: "Counter",
  data() {
    return {
      results: [],
      query: ""
    }
  },
}
</script>

Ensuite, nous créons une méthode appelée fetchResultsqui utilise Axios pour envoyer une requête HTTP Get au NASA API en passant la valeur actuelle du query comme terme de recherche. Lorsque la requête réussit, les données de réponse sont analysées et le results données du composant que nous avons mis à jour avec les éléments de la réponse de l’API :

methods: {
    fetchResults: function () {
      axios.get(`https://images-api.nasa.gov/search?q=${this.query}&media_type=image`,)
        .then((response) => {
          return response.data
        })
        .then((parsedJson) => {
          this.results = parsedJson\["collection"\]["items"];
        })
    }
  }
}

Voici à quoi devrait ressembler notre application après avoir effectué notre appel API :

Découvrez l’exemple de code complet sur GitHub et le démo.

Conclusion

Astro est un générateur de sites statiques de pointe qui donne la priorité à la production de pages Web et d’applications en ligne rapides et efficaces. C’est également un fantastique substitut à la création d’un site Web statique et efficace. Son argument de vente unique réside dans la simplicité avec laquelle vous pouvez combiner Astro avec votre framework préféré en raison de sa polyvalence. Espérons que les informations contenues dans ce didacticiel vous aideront à intégrer Vue dans votre fichier Astro.