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 😊.
Related
There are a few tutorials out there on how to deploy a react-app to GitHub project pages, e.g., this post (i.e., www.{github-username}.github.io/{project-name}), using npm run deploy.
However, when I tried to deploy the react-app I built as my personal page (i.e., the URL will be www.{github-username}.github.io/), the terminal would freeze after a successful build while trying to deploy.
My package.json looks like below (as suggested by the existing tutorials):
{
"homepage": "http://{github-username}.github.io/",
"name": "personal-page",
...
}
"scripts": {
...
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
and I ran npm run deploy command. The project builds successfully and then the terminal crashes before deploying. When I use CTRL+C to terminate the process and rerun the command, it shows me this error: "Branch gh-pages already exists". Some already mentioned running this command will solve the problem: rm -rf node_modules/gh-pages/.cache, but it did not work for me.
Since I spent two hours to solve this problem and I had to get this information from multiple sources and solutions, I decided to spend another hour to write this post here for other future deployers (!) facing the same issues.
To provide context, For each account, GitHub allows hosting 1 personal static webpage and numerous static project webpages on GitHub Pages for free.
To use this functionality, you must change the repository name to {github-username}.github.io for the personal page and {github-username}.github.io/{project-name} for any projects you want to deploy to GitHub Pages.
This question and answer are about the personal page only, but might give some insights for debugging the project pages as well. Tutorials for deploying a react project using npm can be found online (e.g., see this post).
To fix the freezing problem, someone suggested that you change the deploy command to the following:
"scripts": {
...
"predeploy": "npm run build",
"deploy": "gh-pages -b master -d build"
},
Adding -b master specifies the branch your project will be deployed to. This helps avoid the terminal freezing and your code actually gets deployed and accessed via www.{github-username}.github.io/, but all the build file information will be committed and pushed to the master branch.
What I wanted to do was having the source project on the master branch and having the deployed website on a different build branch. But also, I did not want the URL to include the branch name as well.
I tried changing -b master to -b {deploy-branch=name}, e.g., -b gh-pages where gh-pages is the name of the branch I'd like to deploy my website to. This caused running npm run deploy to freeze again!!
To solve this problem, I had to manually create a remote branch, called gh-pages and run the deploy command again.
To make sure the GitHub pages will be loaded from the gh-pages branch, I had to go to my GitHub repository > Settings > GitHub Pages and change the branch to gh-pages (see image below).
After step 2, my website was up and running and could be accessed via www.{github-username}.github.io/.
You can go ahead and push your project commits to the branch master as well. Doing this, of course, will not affect your build and GitHub personal page.
The last problem is avoiding the error "Branch gh-pages already exists" after using CTRL+C to terminate the unresponsive terminal.
The solution is removing the cache, but since version 3.1 of gh-pages node_module, they moved the cache to a different path. So instead of:
rm -rf node_modules/gh-pages/.cache
, I used:
rm -rf node_modules/.cache/gh-pages
to avoid the error (thanks to Nicholas for his comment).
I hope this helps other people as well :)
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.
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.
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...
So, I created a basic React App following a tutorial so I could use it as my new GitHub homepage. When I run npm locally it shows me my React App as pictured below. However when I go to my GitHub Pages address (https://robagruen.github.io/), I get the second image pictured. I've looked around online, and I'm having trouble figuring out what's going on with this. I have run both npm run build and npm run deploy and the script runs leaving the output message of "Published." however this does not seem to be the case to me. I've also added "predeploy": "npm run build" and "deploy": "gh-pages -d build" to my package.json file. Has anyone else run into this before with GitHub pages? I'd really appreciate any helpful advice! Thank you.
As you are trying to deploy in the GitHub user page:
https://yourUserName.github.io/
As opposed to a Project Page:
https://yourUserName.github.io/yourRepo
You need slightly different steps:
Create a new copy of your Master branch, (you can name it as you like):
$ git checkout -b source
$ git push origin source
This way the source branch is a direct copy of our master.
Next steps:
Navigate to your repo on Github, and select "Settings".
On the left-side panel, click on "Branches".
Figure: Changing the default Branch
Then you will be able to select the 'Source' branch and update it.
Now in the terminal (source branch) run:
yarn deploy
Wait a couple of minutes, refresh and you be able to see your site at:
https://yourGitUser.github.io/
Making changes:
Your source branch is acting like your master. So for next changes, merge your changes into source.
You might find more information about this on the following article:
https://dev.to/javascripterika/deploy-a-react-app-as-a-github-user-page-with-yarn-3fka
Note, if your next project you deploy a project page, you might follow the steps described here:
https://facebook.github.io/create-react-app/docs/deployment#github-pages-https-pagesgithubcom
After following this tutorial, https://medium.com/the-andela-way/how-to-deploy-your-react-application-to-github-pages-in-less-than-5-minutes-8c5f665a2d2a ,make the changes in packages.json
Then, create a branch named gh-pages and push it to the github with the same branch name gh-pages. Then change the source to gh-pages branch in Github Pages section in settings
Not entirely sure this is the issue because I have never deployed to github pages but it looks like the url for the page should be formatted as so:
http://{username}.github.io/{repo-name}
According to this resource https://github.com/gitname/react-gh-pages/blob/master/README.md
You're using the master branch for the Github pages feature and that's why is showing the README file as the main page.
Set the default branch to gh-pages in the repository settings or change the deployed React source to master.
change deploy script from "gh-pages -d build" for "gh-pages -b master -d build".
This is only needed for personal websites [username].github.io.