I have created my React project and pushed the complete repo to GitHub using Visual Studio Code. How can I make my React project live on server with the help of GitHub?
You need to install GitHub Pages package as a dev-dependency.
cd ./into/your-app-folder
npm install gh-pages --save-dev
Add properties to package.json file.
The first property you need to add at the top level homepage, second you must define this as a string and the value will be "https://{your-username}.github.io/{repo-name}" , {repo-name} is the name of the GitHub repository you created it will look like this :
"homepage": "http://joedoe.github.io/his-app"
Second in the existing scripts property you need to add predeploy and deploy.
"scripts": {
//...
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}
If you pushed everything already to Github, the last step is deploying.
One liner:
npm run deploy
With this Github will create a new branch called gh-pages, and will be available online. Hope I could help and will work accordingly.
If you stuck, you can look it up on the official docs of React.
Deployment Documentation of React
Once on a deployment I had some issues with the official documentation, and I had to delete my username from the "homepage" property in order to make it work. Although I suggest you first do by the docs, and if you encounter problems, you might can give a try.
There are several options. Depends on what you want to do, do you want to deploy for production or just to test your development ?
You have several options to deploy such as Heroku, Netlify, Github pages.
I can help you with the process of deploying, in addition you can have a look on the different documentations for the solutions listed above.
I personnaly suggest using Netlify, in my opinion realy easy to use.
Depends on what you want to achieve.
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'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.
I am trying to deploy my react app onto to gh pages but it just shows up as a blank screen. I have tried everything, and nothing seems to work. I followed this video: https://www.youtube.com/watch?v=4NapRkCazks and everything seems to run fine except there is a blank page when I type in the url. Here is my repo: https://github.com/nupurd89/onlineshopping.git
I am super lost and nothing seems to work. Thanks for your help in advance!
The main problem in my case that I am deploying a static create react app [App-filter-review] system and my screen show blank screen too.
#Fix No 1
The first issue is the incorrect url config, for the homepage,as it is given everywhere to correct it
#Fix No 2
If you are using React-router>v4.0 in the React app the include Basename acc to defined property
Basename add this basename={process.env.PUBLIC_URL} in Browser Router
This Article really helps out if you are using another stack too.
https://maximorlov.com/deploying-to-github-pages-dont-forget-to-fix-your-links/
#Fix No 3
If you are deploying the system on Heroku or GH-pages try to correct Case sensitive issues while directing to JS/CSS file while configuring as these systems are using Linux container that is case sensitive
Link to My Github Page that is fixed by Fix no2 is here
https://amancode27.github.io/App-Review-Filter/
Make sure you have installed the right version of gh-pages (npm install gh-pages --save-dev).
Also, add the following properties to package.json file.
"homepage": "http://{your_username}.github.io/{your_repo-name}"
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}
Run the following command :
npm run deploy.
Your GitHub repository > Settings > Pages
Under the Source tab, select the "gh-pages" branch.
Hopefully, that helps.
I was having a similar issue while using a custom domain I bought on namecheap, even after following the recommended set up (adding the A records/CNAME on namecheap, adding the deploy scripts in package.json, custom name on github, etc.)
The solution I found here https://github.com/gitname/react-gh-pages/issues/53 worked for me.
I had to remove my repo name from the end of my package.json homepage property, so it looks like this now:
"homepage": "https://gitname.github.io"
After redeploying and then refreshing my browser page / cache, and I'm not getting a blank page anymore. I was using create-react-app, namecheap for the custom domain, and gh pages for hosting.
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.
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.