Ciao benvenuto! Siamo Chihiro e Justin, una coppia di ingegneri del software a cui piace creare applicazioni e imparare insieme. Chihiro è uno specialista di frontend e Justin è un esperto di intelligenza artificiale.

In questo articolo, Chihiro risponderà alle domande di Justin su come creare applicazioni React con una pipeline CICD con una guida dettagliata dettagliata.

Justin: devo distribuire parecchie applicazioni React/TypeScript. Vorrei utilizzare una pipeline CICD. Che cosa mi consiglia?

Chihiro: Ci sono molti modi per raggiungere questo obiettivo, ma mi è piaciuto usare Vite per configurare la mia applicazione React, invece di usare Webpack o CRA (Create React App) perché è molto più veloce impostare il mio progetto.

Per quanto riguarda la creazione di una pipeline CICD, se stai creando solo siti statici, ti consiglio di utilizzare le azioni GitHub e le pagine GitHub. È gratuito per i corridori standard ospitati da GitHub nei repository pubblici e per i corridori ospitati autonomamente. (maggiori informazioni qui )

Justin: Sembra fantastico, puoi spiegarmi come iniziare?

Chihiro: Certo! Prepara il tuo VS Code (o un editor di codice a tua scelta) e il terminale!

Fasi di implementazione

1) Installa l'app Web in locale

1. Passare alla directory in cui si desidera che sia la directory del repository.
2. Crea vite-to-gh-pages (o il nome del tuo progetto) usando npm create vite@latest(leggi i documenti Vite per maggiori informazioni)
3. Usa il nome vite-to-gh-pages, seleziona React e seleziona Typescript.
4. Sposta nella cartellacd vite-to-gh-pages
5. Installa usando npm ionpm install
6. Per testare e vedere l'applicazione, esegui npm run deve visualizza l'app nel tuo browser

1. Correrenpm install gh-pages --save-dev
2. Installa usandonpm i
3. Crea un repository GitHub e collegalo al nostro repository locale:

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. Aggiungi /distla cartella al tuo repository eseguendogit add dist -f

7. Corrigit commit -m "Adding dist"

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

9. Vai alla tua pagina live di GH Pages per verificare che il tuo sito sia attivo. (Vai alle impostazioni del tuo repository e trova "Pagine" sul pannello laterale sinistro)

3) Imposta GitHub Actions per ricostruire il tuo sito su commit nel ramo principale

1. Per consentire all'azione GitHub di aggiornare la nostra build, vai su Impostazioni repository > Azioni > Generale > Autorizzazioni flusso di lavoro per selezionare Read and write permissionse fare clic su "Salva". La nostra modifica consentirà all'azione di aggiornare la build nel ramo gh-pages con ogni push al ramo 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. Corrigit add .

5. Corrigit commit -m "add GH Action"

6. Corrigit push

7. Apri l'app Web GitHub Pages per verificare che la modifica sia stata apportata. Puoi monitorare lo stato di avanzamento facendo clic sulla scheda "Azioni" nella barra di navigazione in alto.

*Ammira e celebra la tua app appena distribuita!

Chihiro: Come ha funzionato per te?

Justin: È stato molto facile implementare e continuare ad aggiornare il sito utilizzando una pipeline CICD! Ora posso dedicare più tempo alla risoluzione di problemi reali. Grazie!

4) Risorse

• Vedi la pagina distribuita qui
• repository vite-to-gh-pages su GitHub

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

e-mail: [email protected]