I've been at this for a while now and I can't seem to get this right.
I have recently created a simple game that you can access at the github pages like https://myusername.github.io/nameofgame.
I would like to, in addition to this, create a homepage, which can be accessed at https://myusername.github.io
My current process is the following:
create-react-app myusername.github.io <br>
cd into it
npm run build
add "homepage": "https://coloringnuns.github.io" into package.json
npm run build
npm install --save-dev gh-pages
add "deploy" : "npm run build && gh-pages -d build" into scripts in package.json
git remote add origin https://github.com/myusername/myusername.github.io.git
git add .
git commit -m "initial commit"
git push -u origin master
npm run deploy
However, while this does publish myusername.github.io, it actually only shows the readme.md file instead of the actual app. I followed the protocols at https://medium.freecodecamp.org/surge-vs-github-pages-deploying-a-create-react-app-project-c0ecbf317089; why doesn't it work?
Related
first of all I created the repository. then I when to the terminal and typed git init, then git add ., and
then I took these commands from github and pasted in terminal:
git commit -m "first commit" git branch -M main git remote add origin https://githubl.com/igora45/ReactShoppingEcommerce.git git push -u origin main
then I installed the: npm i gh-pages --save-dev.
then I went to my package.json file and put the "homepage": "https://igora45.github.io/ReactShoppingEcommerce", and then in "scripts" in package.json still, I put:
"predeploy": "npm run build", "deploy": "gh-pages -d build",
and then, went to the terminal and typed git add ., git commit -m "deploy", and then git push, and finally the npm run deploy.
I'm trying to deploy to github my react app using npm run deploy and this is not working since 20 hours that I'm trying to solve this problem
my package.json
PACKAGE.JSON
in my terminal when I write npm run deploy:
TERMINAL
My folders, and files
I tried to delete the "dist" and "dist-ssr" from my .gitignore but I was not able to solve this problem.
and I added the "heroku-postbuild": "cd client && npm install && npm run build" to my scripts in my package.json, but still not works.
I also tried to deploy to netlify, but I have got SEVERAL errors.
When you say gh -d build it means you want to deploy the build folder.
But I see that your output folder is dist and NOT build
Try changing it as gh-pages -d dist
Also check that you have enabled gh-pages in your GitHub project repo.
Go to settings tab
Select pages option from the side menu
Set deployment branch as gh-pages instead of master
See this answer on custom build output path
I've used create-react-app and deployed it to my github pages site following instructions from this site https://hackernoon.com/how-to-deploy-a-react-app-to-github-pages
however whenever I change contents of my App.tsx file and then push changes to master, the github pages site doesn't reload with the changes. Am I supposed to push changes to the gh-pages branch instead?
Did you install git and gh-pages? Then, your package.json looks like something like this.
"scripts": {
deploy: "gh-pages -d build",
predeploy: "npm run build"
},
After that, you create repository in github. Get repository url. For first deploy.
git init
git remote remove origin
git remote add origin YOUR_REPOSITORY_URL
npm run deploy
For next update. only npm run deploy.
I have tried many times and still cant deploy my react application. These were all the steps that I took:
Install NodeJS + GIT
Create a new repository on Github page (react-website-estate)
In the terminal (VS Code): npm install gh-pages --save-dev
In the package.json file, I added these lines
{
"homepage": "http://simonpham-webdev.github.io/react-website-estate",
"name": "react-website-estate",
...}
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
...
}
git init
git remote add origin https://github.com/simonpham-webdev/react-website-estate.git
git status
git add .
git commit -m "deploy my react application"
npm run deploy --> then login in the github
git push -u origin master
Go into the github page settings and changed the branch to master And this is what I got: https://simonpham-webdev.github.io/react-website-estate/
This is what I got
This the git path in the settings.json in case it has anything to do with the situation
Images are attached in the blue links above
I would appreciate any help :( Thanks in advance
I am trying to deploy a 'hello world' react app to github pages but it's not working. instead i see 404.
I follow the steps here - https://create-react-app.dev/docs/deployment#github-pages-https-pagesgithubcom
first I created a repo on github called test-react-deploy and cloned it into ~/
than I created a new react app:
cd /tmp
npx create-react-app test-react-deploy
cd test-react-deploy
than I moved it's content (without the .git folder) into my application repo:
cp -r .gitignore node\_modules package.json public src yarn.lock ~/test-react-deploy
cd ~/test-react-deploy
I added the following lines to package.json:
"homepage": "https://oren.github.io/food",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
and I installed gh-pages:
npm install --save gh-pages
I pushed everything to github and deploy with:
npm run deploy
But I see 404 when I go to https://oren.github.io/food
(BTW, I don't have a folder called food in my github pages)
Thanks!
It seems you are creating your gh-page under your test-react-deploy project, so you should see what is happening here: https://oren.github.io/test-react-deploy/
I tried following the exact instructions listed in the react documentation on how to deploy a working app to github pages. When I ran npm run deploy. It kept failing at the gh-pages -d build saying that the 'gh-pages' is not an internal or external command. I made sure I had the latest versions of node and npm installed
I had installed gh-pages using the -g tag to make it globally available. Tried adding to the system path variable leading to the node modules folder where i knew gh-pages was loaded. Still nothing.
Finally i tried running it from the git bash window instead of the cmd terminal. This hadn't occurred to me at first as all of the other npm commands worked. Don't know why this fixed things but it did. Just posting this so somebody else might be spared the pain
I had the same issue but finally managed to make it work. The main issue was that I hadn't installed Git for Windows, but I took some extra steps to make sure everything works fine.
Download and install Git for Windows from here
Run npm cache clean to clean npm cache
Run npm install npm#latest -g to install the latest version of npm
Add "homepage" : "http://myname.github.io/myapp", to
"package.json" file and replace the URL with correct GitHub pages URL. If you are not sure about the URL, open the project repository in the browser and go to "Settings" tab. Scroll down and find correct URL under "GitHub Pages".
Run npm install --save-dev gh-pages to install gh-pages module
Add the following 2 lines to "scripts" object in "package.json" file:
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
Finally, run npm run deploy to create an optimized production
build and deploy it on GitHub pages. If you haven't logged in to
Github for windows app before, Github app pops up and asks you to enter your username and password. When you've done that the deploy process will continue and uploads the production build on GitHub pages.
Hope that helps, happy coding.
If it says this, then node_modules/.bin/gh-pages doesn't exist (no, you don't need to install it globally). If it doesn't exist, then it means you either forgot to run npm install --save-dev gh-pages, or something went wrong during the installation.
I would not recommend installing it globally (although looks like it worked in your case).