Bonjour bienvenue! Nous sommes Chihiro & Justin, un couple d'ingénieurs en logiciel qui aime créer des applications et apprendre ensemble. Chihiro est un spécialiste du frontend et Justin est un expert en IA.

Dans cet article, Chihiro répondra aux questions de Justin sur la façon de créer des applications React avec un pipeline CICD avec un guide détaillé étape par étape.

Justin : Je dois déployer pas mal d'applications React/TypeScript. J'aimerais utiliser un pipeline CICD. Que recommandez-vous?

Chihiro : Il existe de nombreuses façons d'y parvenir, mais j'ai apprécié d'utiliser Vite pour configurer mon application React, au lieu d'utiliser Webpack ou CRA (Create React App), car il est beaucoup plus rapide de configurer mon projet.

En ce qui concerne la création d'un pipeline CICD, si vous créez uniquement des sites statiques, je vous recommande d'utiliser les actions GitHub et les pages GitHub. Il est gratuit pour les runners standard hébergés sur GitHub dans les référentiels publics et pour les runners auto-hébergés. (plus à ce sujet ici )

Justin : Ça a l'air génial, pouvez-vous m'expliquer comment commencer ?

Chihiro : Bien sûr ! Préparez votre VS Code (ou l'éditeur de code de votre choix) et votre terminal !

Étapes de mise en œuvre

1) Configurer l'application Web localement

1. Accédez au répertoire dans lequel vous souhaitez placer le répertoire du référentiel.
2. Créez vite-to-gh-pages (ou le nom de votre projet) en utilisant npm create vite@latest(lisez les documents Vite pour plus d'informations)
3. Utilisez le nom vite-to-gh-pages, sélectionnez React et sélectionnez Typescript.
4. Déplacer dans le dossiercd vite-to-gh-pages
5. Installer en utilisant npm iounpm install
6. Pour tester et voir l'exécution de l'application npm run devet afficher l'application dans votre navigateur

1. Courirnpm install gh-pages --save-dev
2. Installer en utilisantnpm i
3. Créez un référentiel GitHub et connectez-vous à notre référentiel local :

git init
git add .
git commit -m "first-commit"
git branch -M main
git remote add origin https://github.com/username/vite-to-gh-pages.git
git push -u origin main

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  base: '/vite-to-gh-pages/',
  plugins: [react()],
})

6. Ajoutez /distun dossier dans votre référentiel en exécutantgit add dist -f

7. Courezgit commit -m "Adding dist"

8. Courezgit subtree push --prefix dist origin gh-pages

9. Accédez à votre page en direct de GH Pages pour vérifier que votre site est en ligne. (Allez dans les paramètres de votre référentiel et recherchez "Pages" dans le panneau de gauche)

3) Configurez les actions GitHub pour reconstruire votre site lors de la validation de la branche principale

1. Pour autoriser l'action GitHub à mettre à jour notre build, accédez à votre référentiel Paramètres> Actions> Général> Autorisations de flux de travail pour sélectionner Read and write permissionset cliquer sur "Enregistrer". Notre changement permettra à l'action de mettre à jour la construction dans la branche gh-pages à chaque poussée vers la branche principale.

# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs

name: Node.js CI
on:
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]
jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [18.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18.x'
      - run: npm install
      - run: npm run build
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

4. Courezgit add .

5. Courezgit commit -m "add GH Action"

6. Courezgit push

7. Ouvrez votre application Web GitHub Pages pour vérifier que votre modification a été effectuée. Vous pouvez surveiller la progression en cliquant sur l'onglet "Actions" dans la barre de navigation supérieure.

* Admirez et célébrez votre application nouvellement déployée !

Chihiro : Comment cela s'est-il passé pour vous ?

Justin : C'était très facile à déployer et à mettre à jour le site à l'aide d'un pipeline CICD ! Maintenant, je peux passer plus de temps à résoudre des problèmes réels. Merci!

4) Ressources

• Voir la page déployée ici
• dépôt vite-to-gh-pages sur GitHub

• Justin Snider // GitHub : @sniderjustin LinkedIn : @sniderj
• Chihiro Snider // GitHub : @cheesehero112 LinkedIn : @chihiro-snider

email: [email protected]