¡Hola bienvenido! Somos Chihiro y Justin, una pareja de ingenieros de software que disfrutan creando aplicaciones y aprendiendo juntos. Chihiro es especialista en interfaz y Justin es experto en IA.

En este artículo, Chihiro responderá las preguntas de Justin sobre cómo crear aplicaciones React con una canalización CICD con una guía detallada paso a paso.

Justin: Tengo que implementar bastantes aplicaciones React/TypeScript. Me gustaría usar una canalización CICD. ¿Qué me recomienda?

Chihiro: Hay muchas formas de lograrlo, pero me ha gustado usar Vite para configurar mi aplicación React, en lugar de usar Webpack o CRA (Crear aplicación React) porque es mucho más rápido configurar mi proyecto.

En cuanto a la creación de una canalización de CICD, si solo está creando sitios estáticos, le recomiendo usar GitHub Actions y GitHub Pages. Es gratis para ejecutores estándar alojados en GitHub en repositorios públicos y para ejecutores autohospedados. (más sobre eso aquí )

Justin: Eso suena genial, ¿puedes explicarme cómo empezar?

Chihiro: ¡Claro que sí! ¡Prepare su VS Code (o el editor de código de su elección) y su terminal!

Pasos de implementación

1) Configurar la aplicación web localmente

1. Navegue hasta el directorio donde desea que esté el directorio del repositorio.
2. Cree vite-to-gh-pages (o el nombre de su proyecto) usando npm create vite@latest(lea los documentos de Vite para obtener más información)
3. Use el nombre vite-to-gh-pages, seleccione React y seleccione Typescript.
4. Mover a la carpetacd vite-to-gh-pages
5. Instalar usando npm ionpm install
6. Para probar y ver la aplicación ejecutar npm run devy ver la aplicación en su navegador

1. Corrernpm install gh-pages --save-dev
2. Instalar usandonpm i
3. Cree un repositorio de GitHub y conéctese con nuestro repositorio 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. Agregue /distuna carpeta a su repositorio ejecutandogit add dist -f

7. Corregit commit -m "Adding dist"

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

9. Navegue a su página en vivo de GH Pages para verificar que su sitio esté en vivo. (Vaya a la configuración de su repositorio y busque "Páginas" en el panel lateral izquierdo)

3) Configure las acciones de GitHub para reconstruir su sitio al confirmar con la rama principal

1. Para permitir que la acción de GitHub actualice nuestra compilación, vaya a su repositorio Configuración> Acciones> General> Permisos de flujo de trabajo para seleccionar Read and write permissionsy hacer clic en "Guardar". Nuestro cambio permitirá que la acción actualice la compilación en la rama gh-pages con cada impulso a la rama 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. Corregit add .

5. Corregit commit -m "add GH Action"

6. Corregit push

7. Abra su aplicación web Páginas de GitHub para verificar que se haya realizado el cambio. Puede monitorear el progreso haciendo clic en la pestaña "Acciones" en la parte superior de navegación.

* ¡Admire y celebre su aplicación recién implementada!

Chihiro: ¿Cómo funcionó eso para ti?

Justin: ¡Fue muy fácil de implementar y seguir actualizando el sitio usando una canalización de CICD! Ahora puedo pasar más tiempo trabajando en resolver problemas reales. ¡Gracias!

4) Recursos

• Vea la página implementada aquí
• repositorio vite-to-gh-pages en GitHub

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

correo electrónico: [email protected]