Olá, bem-vindo! Somos Chihiro & Justin, um casal de engenheiros de software que gosta de criar aplicativos e aprender juntos. Chihiro é especialista em front-end e Justin é especialista em IA.

Neste artigo, Chihiro responderá às perguntas de Justin sobre como criar aplicativos React com um pipeline CICD com um guia passo a passo detalhado.

Justin: Tenho que implantar alguns aplicativos React/TypeScript. Eu gostaria de usar um pipeline CICD. O que você recomenda?

Chihiro: Há muitas maneiras de conseguir isso, mas tenho gostado de usar o Vite para configurar meu aplicativo React, em vez de usar Webpack ou CRA (Create React App), porque é muito mais rápido para configurar meu projeto.

No que diz respeito à criação de um pipeline CICD, se você estiver criando apenas sites estáticos, recomendo usar GitHub Actions e GitHub pages. Ele é gratuito para executores padrão hospedados no GitHub em repositórios públicos e para executores auto-hospedados. (mais sobre isso aqui )

Justin: Isso parece ótimo, você pode me explicar como começar?

Chihiro: Claro! Obtenha seu VS Code (ou editor de código de sua escolha) e terminal pronto!

Etapas de implementação

1) Configure o aplicativo da Web localmente

1. Navegue até o diretório onde deseja que o diretório repo esteja.
2. Crie páginas vite-to-gh (ou o nome do seu projeto) usando npm create vite@latest(leia os documentos do Vite para obter mais informações)
3. Use o nome vite-to-gh-pages, selecione React e selecione Typescript.
4. Mover para a pastacd vite-to-gh-pages
5. Instalar usando npm iounpm install
6. Para testar e ver o aplicativo rodar npm run deve visualizar o aplicativo em seu navegador

1. Corrernpm install gh-pages --save-dev
2. Instalar usandonpm i
3. Crie um repositório GitHub e conecte-se ao nosso repositório 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. Adicione /dista pasta ao seu repositório executandogit add dist -f

7. Executargit commit -m "Adding dist"

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

9. Navegue até a página ativa do GH Pages para verificar se o site está ativo. (Vá para as configurações do seu repositório e encontre “Páginas” no painel do lado esquerdo)

3) Configure as ações do GitHub para reconstruir seu site ao se comprometer com a ramificação principal

1. Para permitir que a ação do GitHub atualize nossa compilação, vá para seu repositório Configurações> Ações> Geral> Permissões de fluxo de trabalho para selecionar Read and write permissionse clique em "Salvar". Nossa alteração permitirá que a ação atualize a compilação na ramificação gh-pages a cada push para a ramificação principal.

# 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. Executargit add .

5. Executargit commit -m "add GH Action"

6. Executargit push

7. Abra seu aplicativo da web GitHub Pages para verificar se a alteração foi feita. Você pode monitorar o progresso clicando na guia “Ações” na navegação superior.

*Admire e celebre seu aplicativo recém-implantado!

Chihiro: Como isso funcionou para você?

Justin: Foi muito fácil implantar e continuar atualizando o site usando um pipeline CICD! Agora posso passar mais tempo trabalhando na solução de problemas reais. Obrigado!

4) Recursos

• Veja a página implantada aqui
• repositório vite-to-gh-pages no GitHub

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

e-mail: [email protected]