Catégories
Astuces et Design

Comment créer un clone Reddit à l'aide de React et Firebase

React est une fantastique bibliothèque frontale pour la création d'interfaces utilisateur. Lorsque vous choisissez un back-end à utiliser avec lui, vous ne pouvez pas vous tromper avec Firebase, un backend-as-a-service (Baas) qui facilite l'ajout de la persistance des données (et bien plus encore) à votre application React.

Dans ce didacticiel, nous utiliserons Firebase avec l'application Create React pour créer une application qui fonctionnera de la même manière que Reddit. Cela permettra à l'utilisateur de soumettre un nouveau message qui pourra ensuite être voté. Je vais également montrer comment déployer notre clone Reddit sur Vercel.

Une fois la lecture terminée, vous comprendrez comment configurer Firebase, comment le connecter à votre application React et comment déployer le résultat.

Un inventeur plaçant un cœur FireBase dans une création de robot

Pourquoi Firebase?

L’une des forces de Firebase est qu’il nous permet de montrer très facilement des données en temps réel à l’utilisateur. Une fois qu'un utilisateur vote sur un lien, la rétroaction sera instantanée. La base de données en temps réel de Firebase nous aidera à développer cette fonctionnalité. En outre, cela nous aidera à comprendre comment démarrer une application React avec Firebase.

Pourquoi réagir?

React est particulièrement connu pour la création d'interfaces utilisateur utilisant une architecture de composants. Chaque composant peut contenir un état interne ou recevoir des données comme accessoires. L'état et les accessoires sont les deux concepts les plus importants de React. Ces deux éléments nous aident à déterminer l'état de notre application à tout moment. Si vous ne connaissez pas ces termes, veuillez d'abord vous rendre dans la documentation React.

Remarque: vous pouvez également utiliser un conteneur d'état tel que Redux ou MobX, mais par souci de simplicité, nous n'en utiliserons pas pour ce didacticiel.

Voici une démonstration en direct de ce que nous allons construire. Le code de cette application est disponible sur GitHub.

Mise en place du projet

Pour continuer, vous devez avoir Node et npm installés sur votre ordinateur. Si vous ne l'avez pas fait, rendez-vous sur la page de téléchargement de Node.js et récupérez la dernière version de votre système (npm est fourni avec Node). Vous pouvez également consulter notre tutoriel sur l'installation de Node à l'aide d'un gestionnaire de version.

Passons en revue les étapes de configuration de la structure de notre projet et des dépendances nécessaires.

Démarrer une application React

Nous pouvons créer une nouvelle application React à l'aide de Create React App en utilisant la commande suivante:

npx create-react-app reddit-clone

Cela échafaudera un nouveau create-react-app projet à l'intérieur du reddit-clone annuaire. Notre structure de répertoires doit être la suivante:

Structure par défaut du répertoire

Une fois le bootstrap terminé, nous pouvons entrer le reddit-clone répertoire et lancez le serveur de développement:

cd reddit-clone && npm start

À ce stade, nous pouvons visiter http: // localhost: 3000 / et voir notre application opérationnelle.

Page par défaut de l'application Create React

Structurer l'application

Il est toujours recommandé de supprimer tous les fichiers dont nous n’avons pas besoin après le démarrage d’une application. Nous n’avons pas besoin de quelques fichiers générés par l’application Create React. Nous allons donc les supprimer.

Nous pouvons supprimer les fichiers suivants:

  1. src/App.css
  2. src/App.test.js
  3. src/index.css
  4. src/logo.svg
  5. src/serviceWorker.js
  6. src/setupTests.js

Nous pouvons également supprimer les dépendances suivantes de notre package.json fichier:

  1. @testing-library/jest-dom
  2. @testing-library/react
  3. @testing-library/user-event

Nous pouvons également supprimer le test script de notre package.json fichier. En effet, nous n’écrirons aucun test pour notre application. Si vous souhaitez vous pencher sur le test d'une application React, veuillez consulter notre didacticiel «Comment tester les composants React à l'aide de Jest».

Notre src/index.js Le fichier doit contenir les éléments suivants:

import React from "react";
import ReactDOM from "react-dom";
import App from "./app";

ReactDOM.render(
  <React.StrictMode>
    <App />
  React.StrictMode>,
  document.getElementById("root")
);

Nous renommerons notre src/App.js à src/app.js. Modifiez-le pour qu'il contienne les éléments suivants:

import React from "react";

function App() {
  return <div>Hello world!div>;
}

export default App;

Maintenant, nous pouvons redémarrer notre serveur de développement en utilisant la commande suivante à partir de notre répertoire racine:

npm start

Notre serveur de développement doit être opérationnel sur http: // localhost: 3000 / et il doit ressembler à ce qui suit:

L'interface utilisateur de notre application après avoir supprimé les fichiers inutiles

Création d'un nouveau projet Firebase

Dans cette section, nous allons installer et intégrer Firebase à notre application.

Si vous ne possédez pas de compte Firebase, vous pouvez créer un compte gratuit dès maintenant en visitant leur site Web. Une fois que vous avez créé un nouveau compte, connectez-vous à votre compte, accédez à la page de la console et cliquez sur Créer un projet.

Entrez le nom de votre projet (j'appellerai le mien reddit-clone), acceptez les conditions générales et cliquez sur le bouton Continuer bouton.

Étape 1 de la création d'un projet Firebase

À l'étape suivante, vous devez choisir d'activer ou non Google Analytics pour le projet, puis cliquer sur le bouton Continuer bouton.

Étape 2 de la création d'un projet Firebase

À la troisième étape, nous devons sélectionner un Compte Google Analytics puis cliquez sur le Créer un projet bouton:

Étape 3 de la création d'un projet Firebase

Après quelques instants, vous verrez un message indiquant que votre nouveau projet est prêt. Cliquez sur Continuer pour quitter l'assistant.

Création d'une nouvelle application dans le projet Firebase

Dans cette section, nous allons créer une nouvelle application Firebase à partir de la console Firebase. Nous pouvons créer un la toile app en sélectionnant l'option Web.

Création d'une nouvelle application Web Firebase: Étape 1

Ensuite, nous devrons entrer le nom du projet et cliquer sur le bouton Enregistrer l'application bouton, laissant le Configurer également l'hébergement Firebase case décochée.

Création d'une nouvelle application Web Firebase: Étape 2

Vous verrez maintenant tous les identifiants de notre nouvelle application Web Firebase.

Création d'une nouvelle application Web Firebase: Étape 3

Notez ces informations d'identification et cliquez sur Continuer vers la console.

Nous pouvons maintenant ajouter les informations d'identification de notre application à un fichier d'environnement:

// .env

REACT_APP_FIREBASE_API_KEY="123456"
REACT_APP_FIREBASE_AUTH_DOMAIN="reddit-clone-123456.firebaseapp.com"
REACT_APP_FIREBASE_PROJECT_ID="reddit-clone-123456"
REACT_APP_FIREBASE_STORAGE_BUCKET="reddit-clone-123456.appspot.com"
REACT_APP_FIREBASE_MESSAGING_SENDER_ID="123456"
REACT_APP_FIREBASE_APP_ID="1:123456:web:123456"
REACT_APP_FIREBASE_MEASUREMENT_ID="G-123456"

Remarque: il est toujours judicieux de stocker toutes les informations d'identification dans un fichier d'environnement et d'ajouter ce fichier à .gitignore afin que les informations d'identification ne soient jamais divulguées dans le code source.

Ensuite, nous pouvons créer un nouveau fichier src/lib/firebase.js où nous stockerons tous nos identifiants Firebase:

import firebase from "firebase";

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
  measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID,
};

const initFirebase = firebase.initializeApp(firebaseConfig);
const db = initFirebase.firestore();

export default db;

Enfin, nous devrons installer le package firebase afin de pouvoir interagir avec notre base de données:

npm install firebase

Ajout d'un nouveau Firebase Cloud Firestore

Nous devons maintenant ajouter un nouveau Firebase Cloud Firestore – une base de données cloud NoSQL évolutive. Cela peut être fait en sélectionnant le Cloud Firestore lien et en cliquant sur le Créer une base de données bouton.

Création d'un nouveau Firebase Cloud Firestore

Ensuite, nous sélectionnerons l'option permettant de démarrer le Firestore en mode production.

Sélection de l'option pour démarrer Firebase Cloud Firestore en mode production

Cliquez sur Suivant. Sur l'écran suivant, nous devrons sélectionner l'emplacement de notre Cloud Firestore et cliquer sur le bouton Activer bouton.

Sélection de l'emplacement du Firebase Cloud Firestore

Vous verrez un message "Provisioning Cloud Firestore", suivi de Mettre en place des règles de sécuritéet après une courte attente, vous serez redirigé vers le tableau de bord de votre nouveau projet.

Ajout d'une nouvelle collection à Firebase Cloud Firestore

Ensuite, nous devrons ajouter une nouvelle collection au Firebase Cloud Firestore que nous venons de créer. Nous pouvons le faire en cliquant sur le Commencer la collecte bouton.

Ajout d'une nouvelle collection à Firebase Cloud Firestore: Étape 1

Nous devrons ajouter un nom à notre ID de la collection. On peut l'appeler des postes, car nous ajouterons et voterons sur des posts.

Ajout d'une nouvelle collection à Firebase Cloud Firestore: Étape 2

Cliquez sur Suivant. Il est maintenant temps d'ajouter un document à notre collection. Chaque document nécessite un identifiant, cliquez sur le bouton Identification automatique lien dans le premier champ. Cela devrait générer un identifiant unique.

Ensuite, nous devrons ajouter les champs suivants:

Voici à quoi ressemblera enfin notre collection:

Ajout d'une nouvelle collection à Firebase Cloud Firestore: Étape 8

Clique sur le sauvegarder bouton. La collection sera créée et vous serez redirigé vers le tableau de bord du projet.

Ajout d'une nouvelle collection à Firebase Cloud Firestore: Étape 9

Mise à jour des règles de Firebase Cloud Firestore

Si nous visitons le Règles onglet, nous verrons les règles suivantes:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if false;
    }
  }
}

Règles Firebase Cloud Firestore par défaut

Nous devons modifier cela pour autoriser également l'opération d'écriture:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

Enfin, cliquez sur le Publier bouton pour enregistrer nos règles modifiées:

Enregistrement des règles Firebase Cloud Firestore

Remarque: plus d'informations sur les règles de sécurité peuvent être trouvées ici.

Intégration de Firebase avec Create React App

Dans cette section, nous travaillerons sur notre application React pour ajouter les éléments suivants:

  1. Ajout du package d'interface utilisateur Chakra
  2. Option pour afficher tous les messages
  3. Option pour ajouter un nouveau message
  4. Option pour désactiver le bouton de vote une fois qu'un utilisateur a voté sur un message

Ajout du package d'interface utilisateur Chakra

Nous ajouterons le package d'interface utilisateur Chakra pour nous aider à créer l'interface utilisateur de notre application. C’est une bibliothèque de composants React simple, modulaire et accessible. Vous pouvez consulter leur guide de démarrage, si vous souhaitez en savoir plus.

Nous pouvons installer Chakra UI en utilisant la commande suivante:

npm install @chakra-ui/core@next

Pour que l'interface utilisateur de Chakra fonctionne correctement, nous devons configurer le ChakraProvider à la racine de l'application. Modifier src/index.js ainsi:

import { ChakraProvider } from "@chakra-ui/core";
import React from "react";
import ReactDOM from "react-dom";
import App from "./app";

ReactDOM.render(
  <React.StrictMode>
    <ChakraProvider>
      <App />
    ChakraProvider>
  React.StrictMode>,
  document.getElementById("root")
);

Ajout de l'option pour afficher tous les messages

Dans cette section, nous développerons une liste pour afficher tous nos messages de Firebase. Nous devrons modifier notre src/app.js fichier avec ce qui suit:

import { Container, Flex, Spinner, VStack } from "@chakra-ui/core";
import React, { useEffect, useState } from "react";
import Post from "./components/post";
import db from "./lib/firebase";

const App = () => {
  const (posts, setPosts) = useState(());

  useEffect(() => {
    

    db.collection("posts")
      .orderBy("createdAt", "desc")
      .get()
      .then((querySnapshot) => {
        const data = querySnapshot.docs.map((doc) => ({
          id: doc.id,
          ...doc.data(),
        }));

        setPosts(data);
      });
  }, ());

  return (
    <>
      <Container maxW="md" centerContent p={8}>
        <VStack spacing={8} w="100%">
          {posts.map((post) => (
            <Post post={post} key={post.id} />
          ))}
        VStack>
      Container>
    >
  );
};

export default App;

Ici, nous procédons comme suit:

  1. Le hook useEffect est chargé de récupérer l'ensemble initial de publications depuis Firebase. Espérons que la syntaxe de la requête est relativement simple. Pour en savoir plus sur l'exécution de requêtes dans Cloud Firestore, cliquez ici.
  2. Une fois que les messages ont été extraits de Firebase, nous stockons tous les messages dans le posts Etat.
  3. Nous affichons une liste de messages en utilisant le Post composant.
  4. le Post Le composant est responsable de la gestion du rendu d'un seul article.

Ensuite, nous devrons créer un nouveau fichier src/components/post.js avec le contenu suivant:

import { Box, HStack, Text } from "@chakra-ui/core";
import React from "react";

const Post = ({ post }) => {
  return (
    <HStack key={post.id} w="100%" alignItems="flex-start">
      <Box bg="gray.100" p={4} rounded="md" w="100%">
        <Text>{post.title}Text>
      Box>
    HStack>
  );
};

export default Post;

Il ne se passe pas grand chose ici. Le composant reçoit le message via des accessoires et affiche son titre dans un élément Chakra UI Text.

Redémarrez le serveur de développement en utilisant Ctrl + C, puis visitez http: // localhost: 3000 /. Nous devrions pouvoir voir le message que nous avons entré manuellement dans le Firestore.

Rendre un article sur l'interface utilisateur

Ajout de l'option pour ajouter un nouveau message

Dans cette section, nous développerons un modal grâce auquel nous pourrons ajouter un nouveau message. Pour ce faire, nous devons ajouter le code suivant à notre src/app.js fichier:

...
import Navbar from "./components/navbar";
...

const App = () => {
  ...

  return (
    <>
      <Navbar />
      <Container maxW="md" centerContent p={8}>
        ...
      Container>
    >
  );
};

Nous devrons également ajouter un nouveau fichier src/components/navbar.js avec le contenu suivant:

import { Box, Container, Flex } from "@chakra-ui/core";
import React from "react";
import AddNewPost from "./add-new-post";

const Navbar = () => {
  return (
    <Box position="sticky" top={0} p={4} bg="gray.100" zIndex={1}>
      <Container maxW="md" centerContent>
        <Flex justifyContent="flex-end" w="100%" position="sticky" top={0}>
          <AddNewPost />
        Flex>
      Container>
    Box>
  );
};

export default Navbar;

Nous devrons également ajouter un nouveau fichier src/components/add-new-post.js avec le contenu suivant:

import {
  Button,
  FormControl,
  FormLabel,
  Textarea,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
  HStack,
  useDisclosure,
} from "@chakra-ui/core";
import React, { useState, useEffect } from "react";
import db from "../lib/firebase";

const AddNewPost = () => {
  const { isOpen, onOpen, onClose } = useDisclosure();
  const (title, setTitle) = useState("");
  const (isSaving, setSaving) = useState(false);

  const handleSubmit = async () => {
    const date = new Date();

    await db.collection("posts").add({
      title,
      upVotesCount: 0,
      downVotesCount: 0,
      createdAt: date.toUTCString(),
      updatedAt: date.toUTCString(),
    });

    onClose();
    setTitle("");
  };

  return (
    <>
      <Button onClick={onOpen} colorScheme="blue">
        Add new post
      Button>

      <Modal onClose={onClose} isOpen={isOpen} isCentered>
        <ModalOverlay>
          <ModalContent>
            <ModalHeader>Add new postModalHeader>
            <ModalCloseButton />
            <ModalBody>
              <FormControl id="post-title">
                <FormLabel>Post titleFormLabel>
                <Textarea
                  type="post-title"
                  value={title}
                  onChange={(e) => setTitle(e.target.value)}
                />
              FormControl>
            ModalBody>
            <ModalFooter>
              <HStack spacing={4}>
                <Button onClick={onClose}>CloseButton>
                <Button
                  onClick={handleSubmit}
                  colorScheme="blue"
                  disabled={!title.trim()}
                  isLoading={isSaving}
                >
                  Save
                Button>
              HStack>
            ModalFooter>
          ModalContent>
        ModalOverlay>
      Modal>
    >
  );
};

export default AddNewPost;

le AddNewPost Le composant sera responsable de l'ouverture d'un modal pour ajouter un nouveau message. Nous utilisons le crochet useDisclosure de Chakra, un crochet personnalisé pour aider à gérer les scénarios courants d'ouverture, de fermeture ou de basculement.

Maintenant, si nous visitons http: // localhost: 3000 /, nous devrions pouvoir afficher les éléments suivants:

Rendu de la barre de navigation sur l'interface utilisateur

Si nous cliquons sur le Ajouter un nouveau message bouton, un modal apparaîtra à travers lequel nous pouvons ajouter un nouveau message:

Ajouter un nouveau message

Cependant, nous devrons actualiser la page pour afficher le nouveau message. Nous pouvons résoudre ce problème en ajoutant un nouveau useEffect accrocher à notre src/app.js fichier:



  useEffect(() => {
    
    

    db.collection("posts")
      .orderBy("createdAt", "desc")
      .onSnapshot((querySnapshot) => {
        const _posts = ();

        querySnapshot.forEach((doc) => {
          _posts.push({
            id: doc.id,
            ...doc.data(),
          });
        });

        setPosts(_posts);
      });
  }, ());

Désormais, si nous ajoutons un nouveau post, il sera visible en temps réel.

Ajouter un nouveau message et le visualiser en temps réel

Ajout de la possibilité de voter sur un message

Dans cette section, nous développerons les boutons permettant à un utilisateur de voter sur chaque message. Pour ce faire, nous devons ajouter le code suivant à notre src/components/post.js fichier:

...
import VoteButtons from "./vote-buttons";

const Post = ({ post }) => {
  return (
    <HStack key={post.id} w="100%" alignItems="flex-start">
      <VoteButtons post={post} />
      ...
    HStack>
  );
};

export default Post;

Ensuite, nous devrons ajouter un nouveau fichier src/components/vote-buttons.js avec ce qui suit:



import { IconButton, Text, VStack } from "@chakra-ui/core";
import React, { useState } from "react";
import { FiArrowDown, FiArrowUp } from "react-icons/fi";
import db from "../lib/firebase";

const VoteButtons = ({ post }) => {
  const handleClick = async (type) => {
    
    let upVotesCount = post.upVotesCount;
    let downVotesCount = post.downVotesCount;

    const date = new Date();

    if (type === "upvote") {
      upVotesCount = upVotesCount + 1;
    } else {
      downVotesCount = downVotesCount + 1;
    }

    await db.collection("posts").doc(post.id).set({
      title: post.title,
      upVotesCount,
      downVotesCount,
      createdAt: post.createdAt,
      updatedAt: date.toUTCString(),
    });
  };

  return (
    <>
      <VStack>
        <IconButton
          size="lg"
          colorScheme="purple"
          aria-label="Upvote"
          icon={<FiArrowUp />}
          onClick={() => handleClick("upvote")}
        />
        <Text bg="gray.100" rounded="md" w="100%" p={1}>
          {post.upVotesCount}
        Text>
      VStack>
      <VStack>
        <IconButton
          size="lg"
          colorScheme="yellow"
          aria-label="Downvote"
          icon={<FiArrowDown />}
          onClick={() => handleClick("downvote")}
        />
        <Text bg="gray.100" rounded="md" w="100%" p={1}>
          {post.downVotesCount}
        Text>
      VStack>
    >
  );
};

export default VoteButtons;

le VoteButtons Le composant est responsable du rendu d'un bouton de vote positif et négatif. Lorsqu'un utilisateur clique sur l'un de ces deux boutons, le handleClick la fonction est appelée. le handleClick La fonction est responsable de la sauvegarde du vote dans la base de données.

Étant donné que nous utilisons les icônes de React Icons, nous devrons ajouter le package. Nous pouvons le faire en exécutant la commande suivante à partir de notre répertoire racine:

npm install react-icons

Maintenant, si nous visitons http: // localhost: 3000 /, nous devrions pouvoir afficher les éléments suivants:

Ajout des boutons de vote

Nous devrions pouvoir voter sur n'importe lequel des postes:

Vote sur chaque poste

Ajout de l'option pour désactiver le bouton de vote une fois que l'utilisateur a voté sur un message

Dans la section précédente, nous avons ajouté la possibilité de voter sur un post. Cependant, nous pouvons voir qu'un utilisateur peut voter plusieurs fois sur un même message. Nous pouvons résoudre ce problème en désactivant le bouton de vote une fois qu'un utilisateur a déjà voté sur un message.

Pour ce faire, nous devons ajouter le code suivant à notre src/component/vote-buttons.js fichier:

import React, { useEffect, useState } from "react";

...
const VoteButtons = ({ post }) => {
  const (isVoting, setVoting) = useState(false);
  const (votedPosts, setVotedPosts) = useState(());

  useEffect(() => {
    
    const votesFromLocalStorage = localStorage.getItem("votes") || ();
    let previousVotes = ();

    try {
      
      
      previousVotes = JSON.parse(votesFromLocalStorage);
    } catch (error) {
      console.error(error);
    }

    setVotedPosts(previousVotes);
  }, ());

  const handleDisablingOfVoting = (postId) => {
    
    
    
    
    const previousVotes = votedPosts;
    previousVotes.push(postId);

    setVotedPosts(previousVotes);

    
    localStorage.setItem("votes", JSON.stringify(votedPosts));
  };

  const handleClick = async (type) => {
    setVoting(true);
    ...
    
    handleDisablingOfVoting(post.id);

    setVoting(true);
  };

  const checkIfPostIsAlreadyVoted = () => {
    if (votedPosts.indexOf(post.id) > -1) {
      return true;
    } else {
      return false;
    }
  };

  return (
    <>
      <VStack>
        <IconButton
          ...
          isLoading={isVoting}
          isDisabled={checkIfPostIsAlreadyVoted()}
        />
        ...
      VStack>
      <VStack>
        <IconButton
          ...
          isLoading={isVoting}
          isDisabled={checkIfPostIsAlreadyVoted()}
        />
        ...
      VStack>
    >
  );
};

export default VoteButtons;

Dans les modifications ci-dessus, nous procédons comme suit:

  1. Nous suivons les id les messages qui ont été votés dans notre stockage local.
  2. Une fois qu'un post a été voté, nous ajoutons le id de ce message à notre localStorage.
  3. Nous désactivons les boutons de vote après qu'un utilisateur a voté sur le post. Lorsque l'application affiche les messages votés sur les articles, ils sont désactivés par défaut.

Désactiver le bouton de vote après avoir voté

Veuillez noter que normalement, vous stockez ce type d'informations dans une base de données. Malheureusement, cela sort du cadre de notre application, car cela signifierait que nous aurions besoin de mettre en œuvre un système complet de gestion des utilisateurs et d'authentification.

Pousser nos modifications de code vers GitHub

Nous avons maintenant terminé d'ajouter toutes les fonctionnalités à notre application. Dans cette section, nous allons valider notre code et le transmettre à GitHub.

Créer un compte GitHub

Comme nous allons stocker notre code sur GitHub, nous aurons besoin d'un compte GitHub. Veuillez noter que cela sera nécessaire lors du déploiement de l'application sur Vercel.

Valider notre code avec Git

Vous aurez besoin de Git installé sur votre PC pour cette étape suivante. Si vous ne connaissez pas Git ou si vous souhaitez un rappel, consultez Jump Start Git, 2e édition sur SitePoint Premium.

Depuis notre répertoire racine, nous pouvons exécuter les commandes suivantes pour mettre en scène tous nos fichiers:

git add --all

Remarque: plus d'informations sur git add est disponible ici.

Ensuite, nous pouvons valider nos fichiers à l'aide de la commande suivante:

git commit -m "Adds all the necessary code"

Remarque: plus d'informations sur git commit est disponible ici.

Créer un nouveau référentiel GitHub

Nous pouvons créer un nouveau référentiel GitHub en visitant https://github.com/new.

Créer un nouveau référentiel GitHub

Une fois que nous ajoutons un nom à notre référentiel, nous pouvons cliquer sur le Créer un référentiel bouton pour créer un nouveau référentiel.

Pousser le code vers notre référentiel GitHub

Nous pouvons pousser le code vers notre référentiel GitHub à l'aide de la commande suivante:

git remote add origin https://github.com/ghoshnirmalya/reddit-clone-app.git
git branch -M main
git push -u origin main

Remarque: vous devrez remplacer "https://github.com/sitepoint-editors/reddit-clone.git" par le lien de votre dépôt GitHub.

Pousser le code vers notre nouveau référentiel GitHub

Et c'est tout. Notre application est maintenant sous contrôle de version et poussée vers GitHub!

Déployer l'application sur Vercel

Dans cette dernière section, nous déploierons notre code sur Vercel.

Créer un compte Vercel

Tout d'abord, dirigez-vous vers Vercel et créez un compte. Vous pouvez vous connecter avec GitHub, GitLab et BitBucket.

Importer un référentiel Git dans Vercel

Nous pouvons importer notre référentiel GitHub depuis GitHub en cliquant sur le bouton Continuer bouton dans le Importer le référentiel Git section.

Importer un projet Git dans Vercel: Étape 1

Ensuite, nous devrons entrer le lien vers notre projet GitHub et cliquer sur le bouton Continuer bouton pour déployer notre application.

Importer un projet Git dans Vercel: étape 2

Pour que notre application React puisse communiquer avec notre back-end, nous devrons saisir toutes les variables d'environnement de notre .env fichier.

Importer un projet Git dans Vercel: Étape 3

Il doit contenir les variables d'environnement.

Importer un projet Git dans Vercel: Étape 4

Ensuite, nous pouvons cliquer sur le Déployer bouton, qui déploiera l'application.

Si nous visitons maintenant le lien de déploiement, nous devrions être en mesure de voir notre application déployée:

Interface utilisateur finale de notre application

Conclusion

La démo en direct de notre application est déployée sur Vercel et le code est disponible sur GitHub.

Nous n’avons ajouté aucune authentification, afin de réduire la complexité et la longueur du tutoriel, mais évidemment, toute application réelle en aurait besoin.

Firebase est vraiment utile pour les endroits où vous ne souhaitez pas créer et gérer une application back-end séparée, ou où vous voulez des données en temps réel sans investir trop de temps dans le développement de vos API.

J'espère que ce tutoriel vous aidera dans vos futurs projets. N'hésitez pas à nous faire part de vos commentaires.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *