33

🚀 Desplegar una app de React junto con otros proyectos en Github Pages

Tan
tanx
29963

😃 Hola!!! Este tutorial es para aquellos que desean desplegar su app de react en GitHub Pages, pero ya tienen otros proyectos usando GitHub Pages.

Para conseguir que nuestra app se muestre en la url con /nombre-de-mi-repo debemos cambiar lo siguiente:

en el package.json agregaremos el homepage con la url para GitHub Pages de nuestro repo así:

{
  "homepage": "https://username.github.io/nombre-de-mi-repo/",
  "name": "my-app",
  "version": "1.0.0",
  "description": "Desc",
  "main": "src/index.js",

en el webpack.config.js

  • A filename le agregaremos el nombre de nuestro repo al bundle.js así: nombre-de-mi-repo/bundle.js
  • El publicPath será el nombre de nuestro repo, así: /nombre-de-mi-repo/

Nos quedará así

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "nombre-de-mi-repo/bundle.js",
    publicPath: "/nombre-de-mi-repo/",
  },

Por último a nuestro BrowserRouter le debemos agregar un basename con el nombre de nuestro repo, así:

<BrowserRouter  "/nombre-de-mi-repo">

Una vez hechos estos cambios nuestra app se verá en usuario.github.io/nombre-de-mi-repo o (si tenemos un dominio personalizado) en mi-dominio.com/nombre-de-mi-repo

En esta clase puedes ver como usar GitHub Actions para automatizar el despliegue 🚀

Escribe tu comentario
+ 2
4
25805Puntos

Muchas gracias este tutorial fue el que me sirvio para hacer la publicacion.
.
En el ultimo codigo no entendia lo que estaba pasando pero finalmente encontre que era:
<BrowserRouter basename="/nombre-repo">

4
5474Puntos
2 años

<BrowserRouter basename="/nombre-repo">
esta en el archivo App.jsx del curso,
pero no puedo ir a las demas paginas, login, Account, Checkout etc, alguien sabe como se soluciona.

1
28738Puntos
2 años

yo igual, pude desplegar la pagina principal. pero no el resto. ley por alli que se de cambiar el recurso de brownserrouter por Hashrouter o algo asi

1
12761Puntos
un año

Como se haria lo del HashRouter??

2
25068Puntos

Muchas gracias, no tenía idea de que estaba pasando, este tutorial me sirvió mucho.