I have deployed a few days ago React app on GitHub. Yesterday I made changes and something went wrong - I deleted gh-pages after pushing changes on master branch and when I type in terminal
npm run deploy
I have error like this
I have 2 questions:
How to update website in github.io when I made changes?
How can I deploy app again on GitHub pages?
Edit:
Here's solution:
https://github.com/facebook/create-react-app/issues/4854
If you want that GitHub use your master branch to display your website, you have to rename your repository to xxx.github.io. Or you can push your content to gh-pages branch so GitHub will generate the content under yourname.github.io/repo_name .
Make sure your content is OK. The problem you met seems related to your npm tool.
I have my react app running on gh-pages. Here are the changes I made in package.json to get it there:
STEP 1 - Install gh-pages in dev-dependencies:
npm i gh-pages --save-dev
STEP 2 - Add deploy script:
"deploy" : "npm run build&&gh-pages -d build",
STEP 3 - Add homepage key at top of package.json with name key etc.:
"homepage": "https://<username>.github.io/<git-repo-name>/",
STEP 4 - Run command to deploy:
npm run deploy
This should host the app on gh-pages on URL you specified in key homepage. Every time you make changes, just run the command specified in STEP 4 locally to publish changes.
Related
I am currently learning git, GitHub, and react.js. So, I need to host the react.js project in a GitHub domain. So I did some research and deployed the react.js in the GitHub domain. And I deployed the project successfully by doing these steps :
1.I created a GitHub repository.
2.Then I used this code in Terminal: npm install gh-pages --save-dev
3.Then I add this line in the package.json file:
"homepage":"http://<github-username>.github.io/<repository-name>" and I added this also in the package.json, scripts:
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}
after that i added this also in package.json:
"devDependencies": {
"gh-pages": "^3.1.0"
}
4.Then I added remote and committed the code and pushed the code like this:
git remote add origin https://github.com/<github-username>/<repository-name>.git
git add .
git commit -m "initial commit"
git push origin master
5.Then I used this code to deploy the app:npm run deploy
After That Everything was successful and my site hosted as https://<github-username>.github.io/<repository-name>
Then I tried to modify this site, but I can't. When I go to Settings>Pages I found that the deployed branch is gh-pages and this branch wasn't created by me. I changed it back to master and saved it. And when I refreshed the site, there was nothing except the readme.md file. So, I changed it back to gh-pages and it worked again. Then I did some research to modify and I found that I just need to commit and use this code again:npm run deploy
So, I did like That and This Was shown in the Terminal:
> sample#0.1.0 predeploy
> npm run build
> sample#0.1.0 build
> react-scripts build
'react-scripts' is not recognized as an internal or external command,
operable program or batch file.
What's this all about? I need a solution to modify a deployed react.js app.
Anyone Who answers my problem will be appreciated.
Thank you 🙏.
If I'm not wrong to understand your question, here is my little advice.
You just need to add, commit and push your changes to the master repository, and after that run the following step :
npm install
npm run predeploy
npm run deploy
After the steps are success you need to wait several minutes before the changes are live.
Just clone the project and create a new branch.
Modify the project. Then add and commit as usual.
Then use the code git pull
And then type git push <your remote name> <the name of the branch you have created early>
Then go to Github and refresh the page. You will see compare pull request button. Click that. Then add title and description. Then click create new pull request. If your branch is mergable, you will go to another page and you will see merge pull request button and click that.That's all. Then You can delete the branch created by yourself by clicking delete branch safely.
Then use the code npm run deploy
I hope this works 😊.
My problem is that whenever I commit/push a new change to my github repository, the code changes but the app remains the same.
Any ideas what can I improve?
I did this:
GITHUB: create new repository
VS-CONSOLE: npx create-react-app .
VS-CONSOLE: npm start
VS-CONSOLE: ctrl+c
VS-CONSOLE: npm i gh-pages
package.json:
above scripts "homepage": "https://account-name.github.io/respository-name",
in scripts: "deploy": "gh-pages -d build"
VS-CONSOLE: git init, git add . , git commit -m 'initial',
git remote add
origin https://account-name.github.io/respository-name
git push
-u origin master
GITHUB: refresh page
VS-CONSOLE: npm run build
VS-CONSOLE: npm run deploy
GITHUB: refresh page
The way that your deploy scripts are set up, just pushing to master isn't sufficient. Yes you need to run deploy every time you want the app to update.
This is so that you can push as many commits as you want whilst working on your code, as a work-in-progress, then when you are ready to update your app, you need to run the deploy script, which will build the app and put it on the gh-pages branch so that it is picked up by github pages and put on the web.
Committing is like saving and backing up your work, deploying is like handing it in.
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...