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.
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 😊.
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 have made a simple page with React & Redux, which I want to deploy on github.
In my terminal, I write:
npm run build
Then I add
"homepage": "http://myusername.github.io/mynameapp",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
to package.json
Then I install
npm install --save-dev gh-pages
Then I go on my
Github repository => settings => GitHub Pages => select gh pages branch.
Finally, I write
npm run deploy
The page is published, but the result is pure crap. It blends old lines of code - that I actually erased ages ago - with new ones. 100% of the images are either not displayed or not even found. I've checked the build folder, everything is fine. I did add, commit and push my project to the repo before doing the build.
Any help would be highly appreciated!
Please check on which branch you are coding make sure it is master and take a force pull from github.
Also if you want you can try delete your build folder and run deploy after that.
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.