I'm trying to make a react project on github pages using [username].github.io. but when I go on the link, it just returns a white screen without any error messages. This also happens when I use a custom domain name.
However, it works when I run it locally and also when I use gh-pages instead of a user repo.
I used https://medium.freecodecamp.org/surge-vs-github-pages-deploying-a-create-react-app-project-c0ecbf317089 to upload all my files into github since I created the repo at the end after I finished, but I tweaked it a little to work without gh-pages.
I also referred to this answer: hosting gh-pages on custom domain, white empty page but it didn't do anything for me.
Does anyone know how to fix this? Thanks!
Change BrowserRouter to HashRouter as follow
Before:
import { BrowserRouter } from "react-router-dom"
ReactDOM.render(
<BrowserRouter><App /></BrowserRouter>,
document.getElementById('root')
);
After:
import { HashRouter } from "react-router-dom"
ReactDOM.render(
<HashRouter><App /></HashRouter>,
document.getElementById('root')
);
Check if you're getting an error on the console. You might need to switch from BroswerRouter to HashRouter, because gh-pages doesn't work well with the former.
I am a bit late to this discussion, but I ran into this same issue and I found a solution that was not listed here.
Here is the solution I found: https://github.com/gitname/react-gh-pages/issues/3#issuecomment-399787987
The issue this user was having was related to how GitHub serves your react build from GitHub Pages. GitHub pages serves your react build from a folder names after your repository directory instead of from the root server directory "/". Hopefully this link will help someone else out in the future.
Using react router in my create-react-app i had this same issue. What solved it for me was adding this line to the router.
<Router basename={process.env.PUBLIC_URL}>
Related
This is my first attempt at creating a navbar using REACT. Although webpack compiled successfully, nothing shows in my browser.
Can I have some help please? This is the github repo for the project:
https://github.com/mah752/myportfolio
thank you,
Maryan
So this looks like it's something to do with the way you have implemented your routes. If you were too boot up your app and check the console you would see.
router.ts:5 Uncaught Error: You cannot render a <Router> inside another <Router>. You should never have more than one in your app.
I have looked through your code and noticed that you have the routes in your nav bar as well as index.js so you're inserting <Router> inside another <Router> which breaking things. As <App /> has your navbar which has the <Router> component also.
I would highly suggest going through this tutorial on React Router
https://reactrouter.com/docs/en/v6/getting-started/tutorial
This will tell you how to implement your routers correctly and go over nested routes.
Also another tip. I noticed you have a lot of files in your components folder for example:
Project.js
Project.css
The best practice is to do create a directory for each component and create a css module file like so:
components/projects/... This would now look like
Project.module.css
Project.js
But going back to your issue, go through the link on React Router and you should be fine.
I've cloned your repo and I see the following error in the browser:
Module not found: Error: Can't resolve './app.css' in '/home/atota/development/myportfolio/src'
Open src/App.js and on line 10, you're doing the following import:
import "./app.css";
Whereas it should be:
import "./App.css";
Spoiler alert: after resolving this error, you'll see the following one in the Browser Dev Tools, related to your component:
Uncaught Error: You cannot render a <Router> inside another <Router>. You should never have more than one in your app.
I see you're using react-router-dom, I suggest you to take a look at the docs.
I have a React page made with create-react-app and I deployed it to github pages per the instructions here. It opens, but the resources on the public directory aren't being loaded. What seems to be happening is that during the page load, http://{name}.github.io/{repo} is being truncated to http://{name}.github.io, and so the relative path to the public directory is no longer correct at the point when the page attempts to load them. If I try to then reload the page with the url http://{name}.github.io I get a 404 error.
I could just alter the paths to make it work, but that feels like a hack. I want to know what's going on here and how I might fix it, if that's possible.
The code can be seen here: https://github.com/CBreakr/ATTCK_StarWars
Supplement to the answer: https://medium.com/#svinkle/how-to-deploy-a-react-app-to-a-subdirectory-f694d46427c1
It's a bit difficult to say without seeing your code.
However it's likely that your react-router is not setup properly.
You should setup your router like this:
import { BrowserRouter as Router } from ‘react-router-dom’;
const routerBaseName = process.env.PUBLIC_URL;
ReactDOM.render(<Router basename={routerBaseName}>< App /></Router>, document.getElementById(‘root’));
Note the basename part - it should be set to your production url when you build the bundle (in this case: https://CBreakr.github.io/ATTCK_StarWars/)
it should be set to your localhost url when you are developing locally.
You can use .env files to set values for PUBLIC_URL (I believe with create-react-app you will have to change it to REACT_APP_PUBLIC_URL) for dev/prod environments respectively, see: https://create-react-app.dev/docs/adding-custom-environment-variables
You need the homepage defined in package.json
"homepage": "http://gitname.github.io/react-gh-pages"
https://github.com/gitname/react-gh-pages#procedure
https://create-react-app.dev/docs/deployment#serving-the-same-build-from-different-paths. Setting your homepage this way may help "homepage": ".".
Also there is another tutorial in the same page you may want to check that as well https://create-react-app.dev/docs/deployment#github-pages-https-pagesgithubcom
Try to wrap your Switch Component inside HashRouter like this
import { HashRouter} from "react-router-dom";
<HashRouter basename="/">
<Switch>
//...
</Switch>
</HashRouter>
The only concerning difference I found, in your codebase - is the homepage in package.json is not HTTPS.
Current settings -
"homepage": "http://CBreakr.github.io/ATTCK_StarWars",
Change to -
"homepage": "https://CBreakr.github.io/ATTCK_StarWars",
It's good that your repo has a gh-pages branch that contains your build directory contents. Please make sure the repository deployment settings use gh-pages branch.
EDIT -
UPDATED ANSWER
The URL attribute is wrongly configured for your <img> tags. The possible values for the attribute are:
Absolute image path - src="http://www.example.com/image.gif"
Relative image path - src="image.gif"
Note: If you notice that character images are not loading but the movie posters for a character are loading fine, the reason being - the posters have absolute image path e.g. Revenge of the Sith has image source as -
https://vignette.wikia.nocookie.net/starwars/images/e/e7/EPIII_RotS_poster.png/)
But character images are configured like src='/images/vader.jpg'.
You could solve this by changing src of your static images in characters.json from -
"imageURL": "/images/vader.jpg"
to:
"imageURL": "images/vader.jpg"
OR
"imageURL": "./images/vader.jpg"
You can check the validity of this solution by inspecting the image of your Vader character component here. Update the image tag source and see that the character images now load properly.
I did the deploy of my react app using gh-pages and it's showing nothing.
Idk if the reason is that i'm using tailwind so it's not loading the styles (But it don't make sense because i'm importing the css file at index.js)
That's the homepage at the package.json:
"homepage": "http://laurabeatris.github.io/react-new-features",
My Repo at github: https://github.com/LauraBeatris/react-new-features
If you are using react router dom you will have to add the github pages repo name to your routing as well using the basename prop to the BrowserRouter like so :
<BrowserRouter basename={'/react-new-features/'}>
It looks like you haven't included a build of the app in your repository. This is probably because the build/ directory is gitignored by default since it's not source code.
You can change that by removing the /build line from your .gitignore file. This might make your commits a bit strange since running a build will show as code changes, but at least your project should show that way.
Alternatively you can copy the build/ directory after creating a build and rename the folder to something that isn't gitignored so that you can more easily control when a new build should be added to source control.
If you are using React Router then BrowserRouter will not work for now. You can use HashRouter instead.
// import { BrowserRouter as Router } from 'react-router-dom';
import { HashRouter as Router } from 'react-router-dom'
I m new to react, having some problems with build and uploading project.
If I upload with out adding react-router-dom it works fine, but when i upload files from build folder after importing react-router-dom, blank page appears
but there are not any errors in console. Files and codes are visible from the source tab from Developer tools.
Note: With out react-router-dom all the html renders in browser. Also I have added /folder-name/static....(for chunks and manifest)
This is the code to import react-router-dom
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
No any error messages in console.
Install both react-router and react-router-dom.
Got my answer on github page, was not aware of basename for BrowserRouter.
https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/BrowserRouter.md
So my app, /portfolio, works fine when deployed to the normal github hosting. You can see that here. But when I switch to a custom domain the app doesn't want to mount. I did a bit of research and assumed it has to do with react-router but I can't seem to figure it out.
Heres my BrowserRouter code:
<BrowserRouter basename={process.env.PUBLIC_URL}>
<App />
</BrowserRouter>,
Which leaders to /portolio/ as the basename. I assume it should correctly change when on the custom domain but I played with it to no effect.
Any hints on what could be going wrong?
Turns out create-react-app docs actually highlight this problem. Github pages doesn't play well with BrowserRouter. Theres a sort of hack in the documents here that worked swimmingly for me.