Deploying React webpage to Github
Question
So I am trying to deploy a webpage using ReactJS so far the only thing on the page, is a navbar, I thought i was doing everything correctly but when i type inhttps://myusername.github.io/WulfDevelopments/public/index.html it only displays a blank screen in the inspect im getting a lot of "cant find resources" and 404 errors, it is also targeting my index.js page at line 1, in these errors.
i followed the react github deploy examples, and yet when i try to access the site... nothing..
{ "name": "personal-portfolio", "version": "0.1.0", "homepage": "https://cnfishead.github.io/WulfDevelopments/public/index.html", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.11.9", "@testing-library/react": "^11.2.5", "@testing-library/user-event": "^12.7.0", "bootstrap": "^4.6.0", "gh-pages": "^3.1.0", "react": "^17.0.1", "react-bootstrap": "^1.4.3", "react-dom": "^17.0.1", "react-scripts": "4.0.2", "web-vitals": "^1.1.0" }, "scripts": { "predeploy": "npm run build", "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "deploy": "gh-pages -b master -d build" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }
I did run npm run build command everything came out fine, i even tried targeting the index.html (as you can see above) and removing public/index.html nothing returns anything useable.
any direction is greatly appreciated
-----Edits -------
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; ReactDOM.render( <App />, document.getElementById('root') );
<.DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <,-- <link rel="icon" href="\public\Favicon:ico" /> --> <meta name="viewport" content="width=device-width. initial-scale=1" /> <meta name="theme-color" content="#000000" /> <meta name="description" content="Web site created using create-react-app" /> <title>React App</title> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous"> </head> <body> <script src="src\index.js"></script> <div id="root"></div> </body> </html>
1 answers
solution1
0 ACCPTED 2021-02-14 07:31:00
What I did:-
npm i gh-pages
In package.json I added
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}
And Updated
"homepage": "http://username.github.io/projectName"
Then I did npm run deploy
You can check my repositories where I had deployed react apps on GitHub pages. [Working fine for me] https://github.com/bikkimahato/React-Drag-and-Drop-Chessboard
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.