Estoy creando una aplicación simple usando Tailwindcss, JavaScript y Webpack e intento publicarla a través de Github Pages.
Si bien la ejecución de la aplicación a través del host local funciona bien, tengo un problema al intentar publicar la aplicación a través de gh-pages. Recibo el mensaje de error "404 Archivo no encontrado", ¿por qué? ¿Falta alguna dependencia en el archivo webpack.config.js o package-json?
Cualquier ayuda es apreciada.
Consulte también el repositorio de github: https://github.com/edi/shoppingCart
paquete.json
"name": "shopping-cart", "version": "1.0.0", "description": "A simple shopping cart using HTML, CSS / Tailwind CSS, JavaScript & Webpack", "main": "webpack.config.js", "dependencies": { "css-loader": "^6.3.0", "gh-pages": "^3.2.3", "mini-css-extract-plugin": "^2.3.0", "postcss": "^8.3.9", "postcss-loader": "^6.1.1", "tailwindcss": "^2.2.16", "webpack": "^5.56.1", "webpack-cli": "^4.8.0" }, "homepage": "https://edi.github.io/shoppingCart/", "devDependencies": {}, "scripts": { "build": "webpack --config webpack.config.js", "deploy": "gh-pages -d build" }, "keywords": [], "author": "edi", "license": "ISC" }``` **postcss.config.js** ```const tailwindcss = require("tailwindcss"); module.exports = { plugins: [ tailwindcss ], };``` **webpack.config.js** ```const path = require("path"); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { mode: "development", entry: "./src/script.js", output: { filename: "main.js", path: path.resolve(__dirname,"./build") }, plugins: [new MiniCssExtractPlugin({ filename: "styles.css", })], module: { rules: [ { test:/\.css$/, use:[ MiniCssExtractPlugin.loader, "css-loader", "postcss-loader" ] } ] } }```Debe agregar una "preimplementación" en su paquete.json así:
"predeploy": "npm run build"y ejecútelo localmente antes de implementarlo en las páginas de github.
fuente: https://dev.to/yuribenjamin/how-to-deploy-react-app-in-github-pages-2a1f