Deploying React app with Parcel build on Github Pages - reactjs

Question

I am trying to deploy a React app with Parcel on Github Pages.
I have deployed it but the app is not actually rendering on the screen. I don't understand what I am doing wrong.
Package.json
{
"name": "pet-adoption-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"homepage": "https://github.com/junaidshaikh-js/pet-adoption-app",
"scripts": {
"format": "prettier --write \"src/**/*.{js,jsx}\"",
"lint": "eslint \"src/**/*.{js,jsx}\" --quiet",
"dev": "parcel src/index.html --public-url /pet-adoption-app/",
"predeploy": "npm build",
"deploy": "gh-pages -d dist"
},
"repository": {
"type": "git",
"url": "git+https://github.com/junaidshaikh-js/pet-adoption-app.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/junaidshaikh-js/pet-adoption-app/issues"
},
"devDependencies": {
"#babel/core": "^7.12.16",
"#babel/eslint-parser": "^7.13.4",
"#babel/plugin-proposal-class-properties": "^7.13.0",
"#babel/plugin-transform-runtime": "^7.16.4",
"#babel/preset-env": "^7.13.5",
"#babel/preset-react": "^7.12.13",
"eslint": "^8.3.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0",
"gh-pages": "^3.2.3",
"parcel": "^1.12.3",
"prettier": "^2.4.1"
},
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0"
}
}
Here is the live deployed link: https://junaidshaikh-js.github.io/pet-adoption-app/
Here is the Github Repo: https://github.com/junaidshaikh-js/pet-adoption-app

Answer 1

After hours of research, I found out that when you ae using react-router-dom > v4 and deploying to a sub-domain (for example //pet-adoption-appk in your case) you have to provide a basename attribute on the <BrowserRouter> with the sub-domain value. in your case you have to pass it like this <BrowserRouter basename="/pet-adoption-app">

Answer 2

As #tromgy pointed out in the discussion, the root of the problem is that the generated html pages contain / characters before the url references to the various assets.
For example, if you have an html file at domain.com/subfolder/index.html that contains <script src="/script.js">, the browser will look for the script at domain.com/script.js instead of domain.com/subfolder/script.js.
If you instead remove the / (e.g. <script src="script.js">) the browser will look for the script relative to the location where the html file was (e.g. domain.com/subfolder/script.js), which is probably what you want.
Parcel supports a --public-url option to accomplish this (see cli docs and target docs). By passing a . as a parameter, you can tell parcel to omit the / from the output. So your build script would be something like:
parcel build src/index.html --public-url .
(strangely, in your question, you showed a dev command that used this option, but I didn't see that code in the example repo)
Another thing to note is that you're using the unsupported v1 version of parcel. I upgraded you to v2 and fixed the issue above in this PR.

Answer 3

Step 1
git remote add origin [YOUR REPO LINK]
git add -A
git commit -m "Initial commit"
git push -u origin main
Step 2
"homepage": "https://[USERNAME].github.io/[YOUR REPO NAME]",
Step 3
npm install gh-pages --save-dev
Step 4
Add a script in your package.json file
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
Run the command given Below
npm run deploy