I am working on a react project that worked but would not start from the right page. To fix that, I decided to rename a react component with the same name as the gh repo of the project. That was the Notebook(now Note). Initially, gh-pages would start from the Notebook(now Note) component, not the Login component. However, after the name change from NOtebook to Note, now gh-pages starts at a blank page (it loads nothing), while it works wonders on my computer when I launch the app. I have read a lot of comments online about changes in the package.json file and did them, but unsuccessfully; any help would be appreciated! Also, please feel free to reach out to me with any questions.
package.json
{
"name": "notebook",
"version": "0.1.0",
"private": true,
"homepage" : "https://thewizard91.github.io/notebook/",
"dependencies": {
"@googlemaps/react-wrapper": "^1.1.18",
"@reduxjs/toolkit": "^1.7.1",
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"babel-preset-react": "^6.24.1",
"bootstrap": "^5.2.1",
"firebase": "^9.9.4",
"gulp": "^3.9.1",
"react": "^17.0.2",
"react-bootstrap": "^2.5.0",
"react-dom": "^17.0.2",
"react-redux": "^7.2.6",
"react-router-dom": "^6.2.1",
"react-scripts": "^2.1.8",
"redux": "^4.1.2",
"redux-thunk": "^2.4.1",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^2.0.4",
"serve": "^14.2.0",
"styled-components": "^5.3.3",
"web-vitals": "^2.1.2"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build -b gh-pages",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"heroku-postbuild": "npm run build"
},
"heroku-run-build-script": true,
"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"
]
},
"devDependencies": {
"gh-pages": "^3.2.3"
},
"engines": {
"node": "16.18.1",
"npm": "8.19.2"
}
}
I found a cheap fix. I noticed that when I deploy the project on gh-pages, the app's body is not loaded. Meaning all the components within the <Routes></Routes> were not loaded when you launched the app (only in the local host it works). So what I did was add a navbar on top of the <Routes></Routes> segment, and inside of the <Navigation />, I have the link to the homepage (login page) (the component that I intended to start the app with; so upon the click to the link I get what I want. Here is the code. Please feel free to comment for further clarification, maybe I can be clearer:)!
class App extends Component {
render() {
return (
<Container
id = "AppId"
className = "d-flex align-items-center justify-content-center">
<div className = "w-100"> {/*className = "w-100"*/}
<Router>
<Navigation/>
<AuthProvider>
<Routes>
<Route exact path="/dashboard" element={<Dashboard />}/>
{/* <Route exact path='/' element={<PrivateRoute/>} >
<Route exact={true} path='/login' element={<LogIn/>}/>
</Route> */}
<Route path='/update-profile' element={<UpdateProfile/>}/>
<Route path="/signup" element={<SignUp/>}/>
<Route path="/login" exact={true} element={<LogIn/>}/>
<Route path="/forgot-password" element={<ForgotPassword/>}/>
<Route path="/note" element={<Note/>}/>
<Route path = "/mainpage" element={<MainPage/>}/>
<Route path = "/new" element={<New/>}/>
</Routes>
</AuthProvider>
</Router>
</div>
</Container>
);
}
}
export default App;