Continuous integration y continuous delivery con GitHub Actions

Para los que hayan creado su repositorio en Github despues de se hiciera el cambio en la rama principal ahora llamada main y no les este funcionando el deploy. Les comparto el archivo yml con ese cambio.

name: Build and Deploy
on: [push]

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/[email protected]
      - name: Install Dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Archive Production Artifact
        uses: actions/[email protected]
        with:
          name: dist
          path: dist
  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/[email protected]
      - name: Download Artifact
        uses: actions/[email protected]
        with:
          name: dist
          path: dist
      - name: Deploy to Firebase
        uses: w9jds/[email protected]
        with:
          args: deploy --only hosting
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

Para los que tenían las variables en .env
1- En el repositorio de GitHubs en Settings > Secrets > New repository secret y agregar las variables de entorno.
Deberia quedar algo asi:

2- Luego en el deploy-to-firebase.yml en el paso de Build agregar las variables de esta forma para que las tome de los secrets.

- name: Build
   run: npm run build
       env:
       	GOOGLE_MAPS_API_KEY: ${{ secrets.GOOGLE_MAPS_API_KEY }}
   	PAYPAL_CLIENT_ID: ${{ secrets.PAYPAL_CLIENT_ID }}

3- Hacer commit, push y en el deploy debería aparecer algo asi:

Si tienes problemas para hacer login desde la terminal, agrega --interactive al comando:

 firebase login --interactive```

Hice el deploy habiendo hecho el ejercicio con create-react-app con esta configuración:

deploy-to-firebase.yml:

name: Build and Deploy
on: [push]

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/[email protected]
      - name: Install Dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Archive Production Artifact
        uses: actions/[email protected]
        with:
          name: build
          path: build
  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/[email protected]
      - name: Download Artifact
        uses: actions/[email protected]
        with:
          name: build
          path: build
      - name: Deploy to Firebase
        uses: w9jds/[email protected]
        with:
          args: deploy --only hosting
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

Todo lo demás, fueron los mismos pasos.

ADVERTENCIA SI USAS VARIABLES DE ENTORNO:
Webpack 5 ya no trabaja con variables de node como process. Enntonces para llevar utilizar variables de entorno y poder subirlos a producción implementa lo siguiente:

webapck.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');
require('dotenv').config();
// const Dotenv = require('dotenv-webpack');

/** @type {import('webpack').Configuration} */
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath:'/'
  },
  mode: 'development',
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
          },
        ],
      },
      {
        test: /\.(s*)css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          'css-loader',
          'sass-loader',
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      filename: './index.html',
    }),
    new MiniCssExtractPlugin({
      filename: 'assets/[name].css',
    }),
    new CopyPlugin({
      patterns: [
        { from: 'public/manifest.json', to: '' },
        { from: 'public/service-worker.js', to: '' },
        { from: 'public/icon.png', to: 'assets' },
      ],
    }),
    new webpack.DefinePlugin({
      'process.env.PAYPAL_CLIENT_PP': JSON.stringify(process.env.PAYPAL_CLIENT_PP),
      'process.env.GOOGLE_MAPS_API_KEY': JSON.stringify(process.env.GOOGLE_MAPS_API_KEY),
		}),
  ],
  devServer: {
    allowedHosts: path.join(__dirname, 'dist'),
    historyApiFallback: true,
    compress: true,
    port: 3005,
  },
};

Luego, ahora ya no se trabaja en master, sino en main, el siguiente
.github/workflows/deploy-to-firebase.yml

name: Build and Deploy
on: [push]

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/[email protected]
      - name: Install Dependencies
        run: npm install
      - name: Build
        run: npm run build
        env: 
          GOOGLE_MAPS_API_KEY: ${{ secrets.GOOGLE_MAPS_API_KEY }}
          PAYPAL_CLIENT_PP: ${{ secrets.PAYPAL_CLIENT_PP }}
      - name: Archive Production Artifact
        uses: actions/[email protected]
        with:
          name: dist
          path: dist
  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/[email protected]
      - name: Download Artifact
        uses: actions/[email protected]
        with:
          name: dist
          path: dist
      - name: Deploy to Firebase
        uses: w9jds/[email protected]
        with:
          args: deploy --only hosting
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

y ahora puedes utilizar el process.env.ETC
Yo utiliz un archivo de configuracion
config/index.js

const config = {
    clientIdPaypal: process.env.PAYPAL_CLIENT_PP,
    googleMapsApiKey: process.env.GOOGLE_MAPS_API_KEY
}

export default config

Ya en github van setting del proyecto> Secrets>actions > New repository y agregan sus claves
Éxitos!

Hola a mi no me dejaba hace commit tuve que instalar un paquete

npm i pre-commit --save-dev

y ahí ya pude hacerlo si a alguien le sirve saludos

Antes de mandar a producción sería un buen detalle poner un Loader para que el usuario tenga un feedback mientras carga la API:

// Products.jsx

import Loader from './Loader';
import '../styles/components/Products.css';

const Products = () => {
  const { products, addToCart } = useContext(AppContext);

  if (products.length == 0) {
    return <Loader />
  }

// ...
}

// Loader.jsx

import React from 'react'

import '../styles/components/Loader.css';

const Loader = () => {
  return (
    <div className="lds-grid">
      <div />
      <div />
      <div />
      <div />
      <div />
      <div />
      <div />
      <div />
      <div />
    </div>
  );
}

export default Loader;

// Loader.css

.lds-grid {
  display: grid;
  position: relative;
  width: 64px;
  height: 64px;
}

.lds-grid div {
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #000;
  animation: lds-grid 1.2s linear infinite;
}

.lds-grid div:nth-child(1) {
  top: 6px;
  left: 6px;
  animation-delay: 0s;
}

.lds-grid div:nth-child(2) {
  top: 6px;
  left: 26px;
  animation-delay: -0.4s;
}

.lds-grid div:nth-child(3) {
  top: 6px;
  left: 45px;
  animation-delay: -0.8s;
}

.lds-grid div:nth-child(4) {
  top: 26px;
  left: 6px;
  animation-delay: -0.4s;
}

.lds-grid div:nth-child(5) {
  top: 26px;
  left: 26px;
  animation-delay: -0.8s;
}

.lds-grid div:nth-child(6) {
  top: 26px;
  left: 45px;
  animation-delay: -1.2s;
}

.lds-grid div:nth-child(7) {
  top: 45px;
  left: 6px;
  animation-delay: -0.8s;
}

.lds-grid div:nth-child(8) {
  top: 45px;
  left: 26px;
  animation-delay: -1.2s;
}

.lds-grid div:nth-child(9) {
  top: 45px;
  left: 45px;
  animation-delay: -1.6s;
}

@keyframes lds-grid {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

Para los que al hacer firebase login les abre la pestaña en google, pero al intentar hacer la autentificacion los mando a una url localhost y no les funciona ami me funciono haciendo un

firebase login --no-localhost

El unico paso de mas que tienen que es que google les va a dar una key y esta la tienen que pegar en la consola.

Estimo que el error se me genero por hacer el proyecto desde wsl de ubuntu pero no estoy seguro

Para los que estamos usando WSL Ubuntu-20.04 debemos instalar firebase con **sudo ** para que funcione el firebase login

sudo npm install -g firebase-tools

Me funcionó pero hay que actualizar el archivo deploy-to-firebase.yml ya que la rama es main ahora:

name: Build and Deploy
on: [push]

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/[email protected]
      - name: Install Dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Archive Production Artifact
        uses: actions/[email protected]
        with:
          name: dist
          path: dist
  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/[email protected]
      - name: Download Artifact
        uses: actions/[email protected]
        with:
          name: dist
          path: dist
      - name: Deploy to Firebase
        uses: w9jds/[email protected]
        with:
          args: deploy --only hosting
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

Saludos comunidad, tengo un problema que no me deja avanzar.

Alguien podria por favor darme una mano

1 ERROR in child compilations
webpack 5.6.0 compiled with 2 errors in 7517 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected]1.0.0 build: `webpack --mode production`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected]1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/runner/.npm/_logs/2020-12-18T07_29_31_075Z-debug.log
Error: Process completed with exit code 1.

He usado el hosting de Firebase en varias ocasiones pero nunca habia ustado esta herramienta integrada con github
Es todo más sencillo, más práctico y mejor administrado

Proyecto minimo viable ! 😦

Quisiera un curso profesional y avanzado de React donde trabajaramos un proyecto completo (con todos los casos de uso, bien explicados) de e-commerce.

les dejo la url para que exploren el proyecto: https://platzi-store-merch.web.app/

Si no le sale el token al ejecutar firebase login:ci y les muestra este error Error: Cannot run login in non-interactive mode.
posiblemente estén realizándolo desde Git bash

Y este proceso deben realizarlo desde la terminal de windows

Para los que luego de realizar firebase init y no les muestra la lista de sus proyectos de firebase y le muestra el error de failed to list firebase projects. see firebase-debug.log

Pueden probar utilizando firebase login --reauth y no utilizar firebase login

Si tienen problema cuando se logean en firebase usen el siguiente comando:
Set-ExecutionPolicy -Scope process -ExecutionPolicy Bypass

si alguien tiene problemas para ejecutar el comando “firebase login” por tener los scripts desabilitados, en este link, hay una serie de comandos para solucionarlo

https://docs.microsoft.com/es-es/powershell/module/microsoft.powershell.core/about/about_execution_policies?view=powershell-7.2

Waaaa qué clase tan intensa, mi primer despliegue en FireBase!!! 😄

GitHub Action vendria a ser muy parecido a lo que hace automaticamente Vercel ?

Hola
Tuve algunos inconveniente al crear el action y como no podía darme cuenta de que era, lo cree desde la solapa de actions.
set up a workflow yourself
1-cambiar el nombre de main.yml por deploy-to-firebase.yml
2-eliminar contenido de ejemplo y pegar el contenido de nuestro archivo

Lo importante de esto es que pude darme cuenta de porque no me estaba funcionando, tenía una mayúscula en un folder. Que pude comprobar luego de revisar el repositorio.
Saludos