I'm trying to deploy a project so I did an npm run build and after it to check it I did serve -s build.
but when I'm checking the building one I get a blank page but in the regular project(not build), it is working fine.
I tried to see if its a problem of routing but didn't found.
Repo
I deployed it anyway so you can see.
Deploy of blank Page
In Package.json
Replace from
"homepage": "http://ethanolle.github.io/coca-cola"
to
"homepage": "."
Related
How can one deploy a create react app to gh-pages?
My packages.json folder has my homepage listed exactly as this: "homepage": "https://mgcraig78.github.io/RoboFriends",
However, the app will not deploy to gh-pages, and when I enter npm run build, the terminal tells me this (which I'm assuming is the issue, but I can't figure out how to fix it): The project was built assuming it is hosted at /RoboFriends/. <- this obviously is not the homepage I have entered into my packages.json file.
Remove the /RoboFriends from your homepage link in package.json to:
"homepage": "https://mgcraig78.github.io"
Then run
npm run build
What you deploy to github is what's inside the build folder that contains index.html
I am trying to deploy my react app onto to gh pages but it just shows up as a blank screen. I have tried everything, and nothing seems to work. I followed this video: https://www.youtube.com/watch?v=4NapRkCazks and everything seems to run fine except there is a blank page when I type in the url. Here is my repo: https://github.com/nupurd89/onlineshopping.git
I am super lost and nothing seems to work. Thanks for your help in advance!
The main problem in my case that I am deploying a static create react app [App-filter-review] system and my screen show blank screen too.
#Fix No 1
The first issue is the incorrect url config, for the homepage,as it is given everywhere to correct it
#Fix No 2
If you are using React-router>v4.0 in the React app the include Basename acc to defined property
Basename add this basename={process.env.PUBLIC_URL} in Browser Router
This Article really helps out if you are using another stack too.
https://maximorlov.com/deploying-to-github-pages-dont-forget-to-fix-your-links/
#Fix No 3
If you are deploying the system on Heroku or GH-pages try to correct Case sensitive issues while directing to JS/CSS file while configuring as these systems are using Linux container that is case sensitive
Link to My Github Page that is fixed by Fix no2 is here
https://amancode27.github.io/App-Review-Filter/
Make sure you have installed the right version of gh-pages (npm install gh-pages --save-dev).
Also, add the following properties to package.json file.
"homepage": "http://{your_username}.github.io/{your_repo-name}"
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}
Run the following command :
npm run deploy.
Your GitHub repository > Settings > Pages
Under the Source tab, select the "gh-pages" branch.
Hopefully, that helps.
I was having a similar issue while using a custom domain I bought on namecheap, even after following the recommended set up (adding the A records/CNAME on namecheap, adding the deploy scripts in package.json, custom name on github, etc.)
The solution I found here https://github.com/gitname/react-gh-pages/issues/53 worked for me.
I had to remove my repo name from the end of my package.json homepage property, so it looks like this now:
"homepage": "https://gitname.github.io"
After redeploying and then refreshing my browser page / cache, and I'm not getting a blank page anymore. I was using create-react-app, namecheap for the custom domain, and gh pages for hosting.
I have an issue where I deploy my React app the images are not showing. Works fine locally. I've set the homepage to a GitHub site http://ryandixon555.github.io/react-board-game and run
npm build
then
npm deploy
but still no images. I've also specified the homepage in the package.json:
"homepage": "http://ryandixon555.github.io/react-board-game"
In the end I gave up and deployed using netlify, following this link and then copying my code over.
I've grabbed this example ReactJS project > https://github.com/alik0211/pokedex to experiment with Azure devops. When I build the project locally and use npm start in the build folder the app works fine. This is the path for a file http://localhost:3000/static/js/0.chunk.js`.
But on my Azure environment http://pokedeks.azurewebsites.net/ the server is looking for http://pokedeks.azurewebsites.net/pokedex/static/js/2.c662eb5c.chunk.js. Notice that the `/pokedex/ folder has been added to the path. I'm unsure why this is happening.
I can reproduce it locally by running serve in the build folder instead of npm start: http://localhost:5000/pokedex/static/js/2.a7ba4e0c.chunk.js
I've tried adding npm start to my tasks in the release pipeline but that's also causing errors. So I think the fastest way is to figure out why when using serve the /pokedex/ folder gets added to the routes?
I fixed the issue by replacing the homepage value in my package.json from "homepage": "https://alik0211.github.io/pokedex/", to "homepage": "./", now when I run serve the paths to the files are correct.
I'm using create-react-app.
The react application works well by npm start.
But...
I ran npm run build then index.html and main...js/main...css were create in build directory.
And moved this files into tomcat web application's home directory.
When I open the index.html in the browser, blank screen only shown.
What's the problem ?
(I added "homepage" : "." into package.json, so this isn't 404 problem)