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.
Related
I watched lots of videos, and I read lots of documentations, but I couldn't do this subject. Can you help me?
First of all, I have an react app on github, HERE:https://github.com/alper-efe-sahin/portfolio-v2
(It completed app)
I have 2 branch, first MASTER branch, and second GH-PAGES branch.
I created GH-PAGES using codes which are npm run build and npm run deploy.
Also you can see my some package json codes here:
"gh-pages": "^3.2.3",
"deploy": "gh-pages -d build"
"homepage": "https://github.com/alper-efe-sahin/portfolio-v2",
When I try to create github page, it shows my github page, note It's codes. (for instance, it shows react documents, not react codes, not html css etc.)
How can I show my codes like a good website ?
You have the wrong value set at the property homepage in package.json
it should be https://alper-efe-sahin.github.io/portfolio-v2
Also add the script "predeploy": "npm run build" alongside with deploy in scripts so when you run npm run deploy it also builds your app with npm first.
source: The guide I followed for my cra
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 😊.
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've looked at numerous StackOverflow answers, that answer a variety of different scenarios regarding publishing React pages to Github, but none of them clearly explain how to publish a basic user page. I have a very simple, standard React app, that I'd like to publish as a user page on Github.
What are the basic steps for publishing a simple React app as a user page to Github?
The answer, in total, is found in two document sources.
Presuming that you've already created your React app, all is well locally, and your app is ready to deploy, here are the steps to deploy a simple React app as a user page on Github:
Follow the guidance given by Github regarding Github Pages... in particular, note that user pages are served only from the master branch, and thus, the user page will be served at https://{your-github-user-name}.github.io.
User pages must be built from the master branch.
Next, follow the guidance provided in Create React Apps documentation regarding Github Pages deployment, particularly the parts related to user pages.
Open your package.json and add a homepage field that matches where your user page will be served from:
"homepage": "https://myusername.github.io",
Install the gh-pages module:
npm install --save gh-pages ... or ... yarn add gh-pages
Add deploy (and predeploy) to scripts in package.json:
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
...
},
Modify your deploy script to force push the built application to the master branch:
"deploy": "gh-pages -b master -d build",
Deploy your site by running:
npm run deploy
The last obstacle to overcome, is caching at Github. You might need to run npm run deploy more than once, to get around Github's caching of previous deploys.