18

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

Tan
tanx
28074

😃 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
2
13611Puntos

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">

1
13877Puntos

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