recherche
Maisoninterface Webtutoriel CSSAller Jamstack avec React, sans serveur et Airtable

Aller Jamstack avec React, sans serveur et Airtable

Apprenez en construisant! Ce tutoriel démontre l'architecture JAMSTACK en créant une application React avec des fonctions sans serveur NetLify et AirTable. Alors que Jamstack met l'accent sur l'hébergement statique, ce projet présente des capacités dynamiques, y compris la fonctionnalité complète de CRUD.

Choix technologiques

Jamstack, représentant JavaScript, API et Markup, exploite les technologies existantes d'une manière nouvelle. La pile technologique de ce tutoriel hiérarchise la facilité de déploiement et d'hébergement. Les fonctions Netlify gèrent les opérations de crud backend avec Airtable, permettant un déploiement transparent sur Netlify. Airtable simplifie la gestion de la base de données, offrant une interface conviviale et un SDK JavaScript, éliminant le besoin d'hébergement et de gestion de la base de données séparés.

Aperçu de l'application

Cette application suit les cours en ligne, agissant comme une file d'attente d'apprentissage personnelle. Il permet aux utilisateurs d'ajouter, de mettre à jour, de marquer comme acheté et de supprimer les cours.

Code source: Je crée des cours en ligne, y compris une nouvelle sur les applications Jamstack sécurisées et prêtes à la production en utilisant les fonctions React et Netlify. Ce cours couvre l'authentification, le stockage de données Airtable, les composants stylisés, le Netlify CI, etc. En savoir plus →

Configuration aérienne

Airtable utilise des "bases" pour les bases de données. Suivez ces étapes:

  1. Créez un compte Airtable gratuit.
  2. Créez une nouvelle base (j'ai nommé les miens "Jamstack Demos").
  3. Créez une table nommée "cours" avec ces colonnes:
    • name (texte unique)
    • link (texte à ligne unique)
    • tags (plusieurs sélections - Ajouter des balises comme "nœud"
    • purchased (case à cocher)
  4. Ajoutez quelques exemples de données de cours.

Obtenir des références Airtable

Avant de coder, rassemblez ces informations d'identification Airtable:

  1. Clé API: trouvé sur votre page de vue d'ensemble de compte AirTable.
  2. ID de base: Situé sur la page de l'API Airtable, dans vos détails de base.
  3. Nom de la table: (par exemple, "cours")

Configuration du projet

Un projet de démarrage est disponible sur GitHub. Suivez ces étapes:

  1. Fourk le référentiel.
  2. Clone le référentiel fourchu localement.
  3. Découvrez la branche starter ( git checkout starter ).

Le projet comprend une structure create-react-app , un répertoire functions pour les fonctions sans serveur et un fichier de configuration netlify.toml . Installez le package dotenv :

 NPM Installer Dotenv

Créez un fichier .env dans la racine du projet avec vos informations d'identification AirTable:

 <code>AIRTABLE_API_KEY=<your_api_key> AIRTABLE_BASE_ID=<your_base_id> AIRTABLE_TABLE_NAME=<your_table_name></your_table_name></your_base_id></your_api_key></code>

Fonctions sans serveur

Les fonctions Netlify sont des fichiers JavaScript dans le répertoire /functions . Le fichier courses.js agit comme point de terminaison de l'API principal. Il utilise des fonctions d'assistance ( getCourses , createCourse , updateCourse , deleteCourse ) basée sur les méthodes HTTP:

 exports.handler = async (événement) => {
  if (event.httpMethod === 'Get') {
    RETOUR AWAIT GetCourses (événement);
  } // ... Autres méthodes HTTP
};

Le fichier airtable.js configure la connexion AirTable:

 require ('dotenv'). config ();
var AirTable = require ('AirTable');
// ... Configuration de la base et de la table Airtable ...

Opérations CRUD

Les fonctions d'assistance interagissent avec Airtable:

  • getCourses.js : récupère les cours à l'aide de table.select().firstPage() , gère les erreurs et formats la réponse.
  • createCourse.js : crée un nouveau cours en utilisant table.create() .
  • updateCourse.js : met à jour un cours à l'aide de table.update() .
  • deleteCourse.js : supprime un cours en utilisant table.destroy() .

Test: Utilisez netlify dev pour exécuter les fonctions localement. Testez des points de terminaison à l'aide d'outils comme Postman ou Insomnia.

React frontend

L'application React interagit avec les fonctions sans serveur:

  • App.js : loadCourses récupèrent des cours en utilisant fetch('/api/courses') .
  • CourseForm.js : submitCourse envoie des demandes de poste pour créer de nouveaux cours.
  • Course.js : markCoursePurchased envoie des demandes de put et deleteCourse envoie des demandes de suppression.

Déploiement à Netlify

Déploiement sur Netlify en connectant votre référentiel GitHub. Spécifier:

  • Commande de construction: npm run build
  • Publier le répertoire: build
  • Ajoutez des variables d'environnement de votre fichier .env .

Conclusion

Ce tutoriel montre la simplicité et la puissance de l'architecture Jamstack. La combinaison de React, Netlify Functions et AirTable fournit une application complète robuste et facilement déployable. Explorez d'autres services et technologies Jamstack pour améliorer encore votre flux de travail de développement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Demystifier les lecteurs d'écran: formulaires accessibles et meilleures pratiquesDemystifier les lecteurs d'écran: formulaires accessibles et meilleures pratiquesMar 08, 2025 am 09:45 AM

Ceci est le 3ème article d'une petite série que nous avons faite sur l'accessibilité. Si vous avez manqué le deuxième article, consultez "Gestion de la mise au point des utilisateurs avec: Focus-visible". Dans

Créez un formulaire de contact JavaScript avec le cadre Smart FormsCréez un formulaire de contact JavaScript avec le cadre Smart FormsMar 07, 2025 am 11:33 AM

Ce tutoriel montre la création de formulaires JavaScript professionnels à l'aide du cadre Smart Forms (Remarque: non plus disponible). Bien que le cadre lui-même ne soit pas disponible, les principes et techniques restent pertinents pour d'autres constructeurs de formulaires.

Ajout d'ombres de boîte aux blocs et éléments WordPressAjout d'ombres de boîte aux blocs et éléments WordPressMar 09, 2025 pm 12:53 PM

Le CSS Box-Shadow et les propriétés de contour ont gagné le thème. Laissez regarder quelques exemples de la façon dont cela fonctionne dans des thèmes réels et des options que nous devons appliquer ces styles aux blocs et éléments WordPress.

Travailler avec GraphQL CachingTravailler avec GraphQL CachingMar 19, 2025 am 09:36 AM

Si vous avez récemment commencé à travailler avec GraphQL ou examiné ses avantages et ses inconvénients, vous avez sans aucun doute entendu des choses comme "GraphQL ne prend pas en charge la mise en cache" ou

Faire votre première transition Svelte personnaliséeFaire votre première transition Svelte personnaliséeMar 15, 2025 am 11:08 AM

L'API de transition Svelte fournit un moyen d'animer les composants lorsqu'ils entrent ou quittent le document, y compris les transitions Svelte personnalisées.

Barbars CSS personnalisés chics et cool: une vitrineBarbars CSS personnalisés chics et cool: une vitrineMar 10, 2025 am 11:37 AM

Dans cet article, nous plongerons dans le monde des barres de défilement. Je sais, ça ne semble pas trop glamour, mais croyez-moi, une page bien conçue va de pair

Show, ne dit pasShow, ne dit pasMar 16, 2025 am 11:49 AM

Combien de temps passez-vous à concevoir la présentation de contenu pour vos sites Web? Lorsque vous écrivez un nouveau blog ou créez une nouvelle page, pensez-vous à

Que diable sont les commandes NPM?Que diable sont les commandes NPM?Mar 15, 2025 am 11:36 AM

Les commandes NPM exécutent diverses tâches pour vous, soit en tant que processus unique ou en cours d'exécution pour des choses comme le démarrage d'un serveur ou la compilation de code.

See all articles

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
2 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Adaptateur de serveur SAP NetWeaver pour Eclipse

Adaptateur de serveur SAP NetWeaver pour Eclipse

Intégrez Eclipse au serveur d'applications SAP NetWeaver.

Dreamweaver Mac

Dreamweaver Mac

Outils de développement Web visuel

Listes Sec

Listes Sec

SecLists est le compagnon ultime du testeur de sécurité. Il s'agit d'une collection de différents types de listes fréquemment utilisées lors des évaluations de sécurité, le tout en un seul endroit. SecLists contribue à rendre les tests de sécurité plus efficaces et productifs en fournissant facilement toutes les listes dont un testeur de sécurité pourrait avoir besoin. Les types de listes incluent les noms d'utilisateur, les mots de passe, les URL, les charges utiles floues, les modèles de données sensibles, les shells Web, etc. Le testeur peut simplement extraire ce référentiel sur une nouvelle machine de test et il aura accès à tous les types de listes dont il a besoin.

SublimeText3 Linux nouvelle version

SublimeText3 Linux nouvelle version

Dernière version de SublimeText3 Linux

Version crackée d'EditPlus en chinois

Version crackée d'EditPlus en chinois

Petite taille, coloration syntaxique, ne prend pas en charge la fonction d'invite de code