I have a reactjs application that I created using the create-react-app. I have installed gh-pages and successfully deployed it to github pages (project page) using the following command:
gh-pages -d build
However, when I add a custom domain to my github project repository my application could not load the js and css files. My browser is looking for the following files:
http://my.custom.domain/<repo name>/static/css/main.caaf9ea4.css
http://my.custom.domain/<repo name>/static/js/main.76fabd7f.js
The correct link to load these files should be:
http://my.custom.domain/static/css/main.caaf9ea4.css
http://my.custom.domain/static/js/main.76fabd7f.js
In the GitHub repo pages, I have set custom domain to be 'my.custom.domain' (root domain without www). The source is gh-pages branch.
My DNS settings are:
A record, #, value: 192.30.252.153
A record, #, value: 192.30.252.154
CNAME record, www, value: username.github.io
Any ideas how to change the settings so that repo name is not added to the domain?
Make sure your package.json have the attribute homepage. e.g.
"homepage": "https://<git-USER>.github.io/",
That's literally what I just did with my cra projet. If you want to take a look on my project just look at the develop branch. However, I haven't use gh-pages -d build. I just built the project myself and create the branch gh-pages and put the content of my build into it. It should be the same though.
Adding a copy CNAME script to my package.json scripts worked for me as it wasn't being published to gh-pages branch automatically in the React Create App build dir.
"copy": "cp ./CNAME ./build/CNAME",
"predeploy": "yarn build && yarn copy",
Related
I have deployed my app at https://hudsonbasso.com/ and it is just showing the readme instead of what is showing on my branch when run locally. I suspect is something with the build folder or gh-pages not recognizing my index.js in the src folder. Link to repo https://github.com/hbasso/wherecaniwatch
enter image description here
I ended up solving this by adding a .nojekyll file and following some of the instructions here https://jiafulow.github.io/blog/2020/07/09/create-gh-pages-branch-in-existing-repo/ to create an empty branch called 'gh-pages' and then my yarn deploy worked!
My react app is not loading the index.js, you can see my repository at https://github.com/Vitorrrocha/Star-Wars-info and the gh-pages: https://vitorrrocha.github.io/Star-Wars-info/ .
package.json: https://github.com/Vitorrrocha/Star-Wars-info/blob/master/package.json
Which branch are you trying to serve as a GitHub page? I see you have just a master branch.
You could make a branch called gh-pages and push your build there. I see you have gh-pages installed as a devDependency. You can use gh-pages -d build it will do everything for you. (build is the output folder of react-scripts build.)
I have a create-react-app project (https://github.com/khpeek/beomaps/tree/master) which I'd like to deploy to Github pages using gh-pages. Following this tutorial, https://medium.com/#serverlessguru/deploy-reactjs-app-with-s3-static-hosting-f640cb49d7e6, I've added the following to my package.json:
However, if I run npm run deploy, it is published,
but the Github page, https://khpeek.github.io/beomaps/, still shows default content based on the README.md. Do I perhaps need to change the deploy directory?
In the Options page of the repository, I had to select the gh-pages branch instead of the master branch:
(I also re-installed gh-pages as a normal dependency, not a development one (i.e. npm install gh-pages --save instead of npm install gh-pages --save-dev), though I'm not sure whether this was important).
Now the page is visible on Github pages:
I think this has to do with github not knowing which branch it should use (master vs main or idk). Changing my deploy script as follows solved the issue for me:
"deploy": "gh-pages -b main -d build"
This tells github pages that it should use branch main.
I had the same error even after selecting gh-pages branch, but then I again changed it to master branch and it worked!!!
In my experience, it was simply a latency issue. I was able to see the correct page, after few minutes.
I had the same problem - when I deployed my React app to GitHub pages, it showed the README.
Then I pushed the build directory I had created locally to my remote repository. When I did that, my React app worked with GitHub pages.
if you with gh-pages, you have to select it as defualt branch for this repo. It worked for me.
I am trying to publish my react app on github.Here are the steps that I have followed.
1-I have installed git on my windows.
2- In Visual Studios terminal I have written git init
3-Then I have created a repository on github called "cartdemo"
4-In my package.json I have changed homepage, made the private false and added "deploy": "gh-pages -d build
5- Again in VS terminal I have written git add .
6-git commit -m "Go Live"
7-git remote add origin https://github.com/rahman23/cartdemo.git
8-git push
Note: Here you can see the files https://github.com/rahman23/cartdemo
However when I hit the link https://rahman23.github.io/cartdemo/ I get a page where it is written
cartdemo
This project was bootstrapped with Create React App.
Available Scripts
In the project directory, you can run:
npm start
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Where did I do wrong?
In step 8, you need to tell git which repo and branch to push the project to. Since you added an origin, you would...
git push origin master
Since the project has now been pushed, add this to your package.json file.
"homepage" : "http://rahman23.github.io/cartdemo"
then run:
yarn build in the console, and try pushing it again...
I have an app which I'm deploying to gh-pages with npm gh-pages package
I do this command "deploy": "npm run build && gh-pages -d build" it creates build folder normally.
But when I go to gh-pages it is rendering only one static component. You can see here
In networks I can see that resources are loading up, js files, css files.
I'm not sure what the problem is. Can it be because I'm using react router?
All the help will be much appreciated.
Full code can be found here link
The problem is that you are hosting your React App in a subdirectory, which means that your route "/" is not valid here anymore.
Add the homepage property in your package.json file.
"homepage": "https://kiraburova.github.io/Marvel-ReactJS-API/",