I have build a react project and I see a blank page after deploying it to GitHub pages. I have tried several method but nothing works.

Here is the package.json file:

{
  "homepage": " ",
  "name": "react",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-player": "^2.16.0",
    "react-router-dom": "^6.28.0",
    "react-router-hash-link": "^2.4.3",
    "react-slick": "^0.30.2",
    "slick-carousel": "^1.8.1",
    "validator": "^13.12.0"
  },
  "devDependencies": {
    "@eslint/js": "^9.13.0",
    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.1",
    "@vitejs/plugin-react": "^4.3.3",
    "eslint": "^9.13.0",
    "eslint-plugin-react": "^7.37.2",
    "eslint-plugin-react-hooks": "^5.0.0",
    "eslint-plugin-react-refresh": "^0.4.14",
    "gh-pages": "^6.2.0",
    "globals": "^15.11.0",
    "vite": "^5.4.10"
  }
}

If I try to run deploy using npm run deploy the error below shows on command prompt.

Here is my GitHub repo also there is no gh-pages branch option in git page settings after successful deploy

Error: ENOENT: no such file or directory, stat 'E:\\reactProject\\Assignment1\\build'
at Object.statSync (node:fs:1658:25)
at Object.statSync (E:\\reactProject\\Assignment1\\node_modules\\graceful-fs\\polyfills.js:319:16)
at Object.publish (E:\\reactProject\\Assignment1\\node_modules\\gh-pages\\lib\\index.js:90:13)
at E:\\reactProject\\Assignment1\\node_modules\\gh-pages\\bin\\gh-pages.js:12:13
at new Promise (\<anonymous\>)
at publish (E:\\reactProject\\Assignment1\\node_modules\\gh-pages\\bin\\gh-pages.js:10:10)
at E:\\reactProject\\Assignment1\\node_modules\\gh-pages\\bin\\gh-pages.js:140:12

I have build a react project and I see a blank page after deploying it to GitHub pages. I have tried several method but nothing works.

Here is the package.json file:

{
  "homepage": "https://farabi-momin.github.io/react_test ",
  "name": "react",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-player": "^2.16.0",
    "react-router-dom": "^6.28.0",
    "react-router-hash-link": "^2.4.3",
    "react-slick": "^0.30.2",
    "slick-carousel": "^1.8.1",
    "validator": "^13.12.0"
  },
  "devDependencies": {
    "@eslint/js": "^9.13.0",
    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.1",
    "@vitejs/plugin-react": "^4.3.3",
    "eslint": "^9.13.0",
    "eslint-plugin-react": "^7.37.2",
    "eslint-plugin-react-hooks": "^5.0.0",
    "eslint-plugin-react-refresh": "^0.4.14",
    "gh-pages": "^6.2.0",
    "globals": "^15.11.0",
    "vite": "^5.4.10"
  }
}

If I try to run deploy using npm run deploy the error below shows on command prompt.

Here is my GitHub repo also there is no gh-pages branch option in git page settings after successful deploy

Error: ENOENT: no such file or directory, stat 'E:\\reactProject\\Assignment1\\build'
at Object.statSync (node:fs:1658:25)
at Object.statSync (E:\\reactProject\\Assignment1\\node_modules\\graceful-fs\\polyfills.js:319:16)
at Object.publish (E:\\reactProject\\Assignment1\\node_modules\\gh-pages\\lib\\index.js:90:13)
at E:\\reactProject\\Assignment1\\node_modules\\gh-pages\\bin\\gh-pages.js:12:13
at new Promise (\<anonymous\>)
at publish (E:\\reactProject\\Assignment1\\node_modules\\gh-pages\\bin\\gh-pages.js:10:10)
at E:\\reactProject\\Assignment1\\node_modules\\gh-pages\\bin\\gh-pages.js:140:12

• reactjs
• deployment
• github-pages

Share Improve this question Follow asked Nov 16, 2024 at 3:07 farabi mominfarabi momin 133 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default -1

1. According to your package.json, you need to run npm run predeploy before npm run deploy.
2. By default, Vite output dir is dist, not build. Modify package.json:

   -    "deploy": "gh-pages -d build",
   +    "deploy": "gh-pages -d dist",