I've got a problem with deploying my react app with gh-pages. I tried all guides from YT and those from the first site of Google. And my GitHub pages don't show an app still. link to my repo:
https://github.com/maksymilianMroz/react-todo-app
the question is Where is the problem? I didnt write smth in the code? How can I fix this? (I want to live preview on my react app by ghpages)
When you open your project site https://maksymilianmroz.github.io/react-todo-app/ and do a full refresh with the developer tools of your browser enabled, you will see that all javascript and css references result in a 404. This is because all url all prefixed with maksymilianMroz.
eg https://maksymilianmroz.github.io/maksymilianMroz/react-todo-app/static/css/main.fbf7fb8c.chunk.css
where it should be https://maksymilianmroz.github.io/react-todo-app/static/css/main.fbf7fb8c.chunk.css
This is caused by the homepage property of your package.json file, as shown in the output of npm run build
If you adjust that property in the package.json your build will be fine.
{
"name": "react-todo-app",
"version": "0.1.0",
"private": true,
"homepage": "https://maksymilianMroz.github.io/react-todo-app",
...
}
Related
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": "."
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 have reactjs app, it's my first time that want to deploy/build my app, I know it's simply can do:
npm run build
I used this on a very simple react app before, it work fine, but now I want to deploy my react app that use react-router-dom, after I run npm run build, index.html is blank, it's okay maybe, because I don't have a route for home page, for example one of my page in develop mode:
<Switch>
...
<Route exact path='/User/Login' component={Login}></Route>
...
</Switch>
/User/Login
How can I access this page after deploy? I am super newbie to reactjs, I don't know how to handle this, many search, but can't find anything useful in my native language.
Packages.json
"name": "sample",
"homepage": "http://example.com/react/",
"version": "0.1.0",
"private": true,
React App needs a node server to be hosted.
If you want to host on linux/Ubuntu server then you will need to install node.js from NVMFull Tutorial or you can go for Gatsby to create static react apps.
You can host your react app on AWS/Heroku etc.
If you are deploying react build for learning purpose only then you can use static server locally:
npm i serve -g
serve -s build