Automatizando el despliegue con GitHub Actions

🚀 Holaaa hice este tutorial para quienes que desean desplegar su app de React en GitHub Pages, pero ya tienen otros proyectos usando GitHub Pages.

Es decir, quieren esta app en user.github.io/repo o mi-dominio.com/repo

Usar GitHub Pages:

1. npm install —save-dev gh-pages
2. Agregar reglas al package.json:
   1. “homepage”:”https://SergioMaurySterling.github.io/NOMBRE_REPO”
3. Crear nuevos scripts en package.json
   1. “predeploy”:“npm run build”, :Este ejecutara automáticamente después el “deploy”
   2. “deploy”:“gh-pages -d build”
4. npm run deploy (Crea nueva carpeta llamada build que tiene todos nuestros archivos del proyecto)
5. En GitHub ingresamos a:
   1. Settings
   2. Pages
   3. Podemos ver el link de publicación

listo ya pude… tutorial para deploy 08/02/2022

npm install gh-pages --save-dev

luego de instalar esta dependencia entonces en package.json:

{
  "name": "reactpractico",
  "version": "1.1.0",
  "description": "react eshop",
  "homepage": "https://rroderickk.github.io/reactPractico", //! lo importante
  "main": ".src/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "predeploy": "npm run build",
    "deploy": "gh-pages -b master -d dist", //! -b para espeficar otra rama donde subira los archivos estaticos, -d para especificar la carpeta generada por el comando build
    "start": "webpack serve",
    "build": "webpack --mode production"
 

en webpack:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    publicPath: "./", //! para el despliegue lo importante es el punto
  },
  mode: 'development',
  resolve: {
    extensions: [".js", ".jsx"],
		alias: {
			'@components': path.resolve(__dirname, 'src/components/'),
			'@containers': path.resolve(__dirname, 'src/containers/'),
            '@hooks': path.resolve(__dirname, 'src/hooks/'),
            '@pages': path.resolve(__dirname, 'src/pages/'),
            '@routes': path.resolve(__dirname, 'src/routes/'),
            '@context': path.resolve(__dirname, 'src/context/'),
            '@moneyIn': path.resolve(__dirname, 'public/moneyIn/'),
            '@styles': path.resolve(__dirname, 'src/styles/'), 
            '@icons': path.resolve(__dirname, 'public/icons/'),
            '@img': path.resolve(__dirname, 'public/img/'),
        '@logos': path.resolve(__dirname, 'public/logos/'),
		},
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.(png|jpg|svg|jpeg|web|svg)$/,
        type: 'asset/resource',
        generator: {
          filename: "public/[hash][ext]",
        },
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
          },
        ],
      },
      {
        test: /\.(css|scss)$/,
        use: [
          "style-loader",
          "css-loader",
          "sass-loader",
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      filename: "./index.html",
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),
  ],
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
    compress: true,
    port: 64340,
    historyApiFallback: true,
  }
}

y en tu router:

	<BrowserRouter basename='/reactPractico'>

luego de estas configuraciones correr el comando:

npm run deploy

y luego en settings de tu repositorio setear la rama que habias configurado con el comando -b
deploy

Logré hacer el deploy. Lo malo es que ya tengo 80 años

#porlotanto

Les dejo el script que el profesor usa en el minuto 2:32.

name: Build and Deploy
on: [push]
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout 🛎️
        uses: actions/[email protected]

      - name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.
        run: |
          npm install
          npm run build

      - name: Deploy 🚀
        uses: JamesIves/[email protected]
        with:
          branch: gh-pages # The branch the action should deploy to.
          folder: build # The folder the action should deploy.

Si alguien desea ir mas aya con su proyecto ,me refiero a que los botones de my account , cerrar sesion , login etc los lleve a otra ruta como normalmente funciona en el localhost , les recomiendo que hagan deploy con netlify, ya que gh-pges no funciona bien con reactrouter da un error 404 (solo da error cuando esta desplegada en internet).
esto solo seria si su pagina aun no tiene backend y solo sea frontend como lo mia .
aqui dejo mi pagina desplegada con netlify y funcionando las rutas
pagina con netlify

GitHub Actions / Pages

1. https://github.com/marketplace?type=&verification=&query=deploy+github+page+
2. Deploy to GitHub Pages script
3. Crear folder llamado “.github”, adentro otra llamada workflows, y adentro un archivo llamado deploy.yml
4. Copiar el primer recurso y pegarlo de forma manual, personalizado en el archivo deploy.yml
5. Cambiar el nombre de la carpeta “build” a “diste” ya que esa acciona todo
6. Tener el repo actualizado y todo en la rama main o principal
7. Podemos revisar en el repo, en actions que el workflow corra y finalice exitosamente
   
8. Settings -> pages: Cambiar el source a la rama gh-pages y guardar
9. Configurar dominio:
   1. Se pone el dominio en Custom Domain
   2. Ingresamos al dashboard de Cloudflare -> DNS
   3. https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site
   4. Agregamos en Cloudflare los 4 apuntadores A que nos entrega GitHub
   5. Agregamos CNAME, con nombre www, que apunte a nuestro dominio personal

Hice mi deploy solo en GitHub Pages. Mi pagina de mostraba en blanco, no cargaba el bundle.js. Para solucionar ese problema se debe agregar en webpack a la ruta publicpath un punto:

Tambien debemos agregar al package.json “homepage”

Con el ink de nuestra cuenta, barra, nombre del repositorio.

Despues no me cargaba las rutas.
Investigando encontre este video del por que no lo hacia y como solucinarlo.
Basicamente debemos cambiar el BrowserRouter por HashRouter en la App. Para ir a las paginas agregamos una#/nombreDeLaPagina al final de la url. Ejemplo: https://juliobarriosdev.github.io/react-shop/#/login

Build and Deploy

 
Acá anexo mi proyecto desplegado y en producción.
 
Mi proyecto fue desplegado en Netlify y dominio obtenido mediante Hostinger.

Visita Yard Sale yardsaleofficial.store

Visita mi repositorio en Github

Sigueme en Github

Que tal campeon, buen dia…
gIThuB pAges. tiene problemas al momento de visualizar la pagina en la web, asi que use Netlify.

Web shop ecommerce …

Para los que tienen problemas con el deploy (Que veo que ya son personas de hace meses) el tema es por el public path, si hacen exactamente lo que Oscar dice (Comprar el dominio y todo) no creo que tengan problemas, para poder usar solo gh pages necesitan hacer algunas cosas más para el deploy en el archivo de webpack, ya que sino no funcionará correctamente, tal vez aquí puedan entender que hacer

Profe, al parecer su sitio web no esta disponible 😣 www.https://www.reactshop.co/

Les recomiendo que lean los comentarios de los compañeros, me fueron utiles para desplegaqr mi protecto https://juli6464.github.io/my-react-store/

Ya pude desplegar comprando el dominio, configurando cloudflare y gh-pages. https://reactshoptest.co/
Me pasó es que como algunos compañeros no pude hacerlo solo con gh-pages (me cargaba el nav pero no el ProductList) y en local no me sale nada pero tampoco salen errores.

Se me rompio el proyecto, ni la consola ni la terminal me muestran error. No entiendo nada

Bueno yo la verdad quise probar otra cosa, ya tenia varias paginas en github pages, asi que quise probar el deploy de

Deploy de mi pag

Pude subir a Github pages esta app en el 6 de octubre de 2022 https://github.com/daniel-avilaxd/curso-practico-react02 . Y esto fue lo que cambie para poder subirlo. Ojala alguien me pueda explicar por qué funciona la 3 XD(Lo encontre en un comentario en Github)

1. instalar > npm i --D @jamesives/github-pages-deploy-action
2. En el webpack

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "curso-practico-react02/bundle.js",
    publicPath: "/curso-practico-react02/",
    clean: true
  },

1. En App.jsx

<AppContext.Provider value={initialState}>
      <BrowserRouter basename={document.baseURI.substring(document.baseURI.indexOf(window.location.origin) + window.location.origin.length, document.baseURI.lastIndexOf('/'))}>

-Todavía no me funcionan las rutas jeje despues las arreglo. Lo que me importaba era que se viera.
-No se rindan compañ[email protected]🖖

Si alguien tiene problemas con los actions solo agrege dentro de la carpeta

.github/workflows/deploy.yml

Apenas ví el dominio en mi cerebro sonó un “Aveus página”, que cosa tan random

Really??? 29 minutes of class, it feels like 3 minutes 🤩

![](

parceros necesito ayuda, me sale este error en el DEPLOY no se como arreglarlo 😦

Hola Buenas noches, completado el despliegue!

https://labradorweb.xyz/