CODEWITHSUNDEEP
reactjsdeploymentgithub-pagesparceljs
Junaid Shaikh
Junaid Shaikh

Reputation: 21

Deploying React app with Parcel build on Github Pages

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

Upvotes: 2

Views: 1705

Answers (3)

gikores
gikores

Reputation: 301

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

Upvotes: 1

Gokul
Gokul

Reputation: 237

Step 1

  1. git remote add origin [YOUR REPO LINK]
  2. git add -A
  3. git commit -m "Initial commit"
  4. 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

Upvotes: 0

Andrew Stegmaier
Andrew Stegmaier

Reputation: 3787

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.

Upvotes: 0

Related Questions