No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso Pr谩ctico de React.js

Curso Pr谩ctico de React.js

Oscar Barajas Tavares

Oscar Barajas Tavares

Automatizando el despliegue con GitHub Actions

28/30
Recursos

Aportes 23

Preguntas 21

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

馃殌 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 鈥攕ave-dev gh-pages
  2. Agregar reglas al package.json:
    1. 鈥渉omepage鈥:鈥https://SergioMaurySterling.github.io/NOMBRE_REPO鈥
  3. Crear nuevos scripts en package.json
    1. 鈥減redeploy鈥:鈥渘pm run build鈥, :Este ejecutara autom谩ticamente despu茅s el 鈥渄eploy鈥
    2. 鈥渄eploy鈥:鈥済h-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 鈥渂uild鈥 a 鈥渄iste鈥 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 鈥渉omepage鈥

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 鈥淎veus 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/