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/
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 built an app using React App, to create a monsters Rolodex website. it works fine on my localhost, however, after pushing it to GitHub pages it only shows title and search box. It's missing images and text.
my text editor is VS code, I am on windows pc.
the URL is https://jirehg.github.io/my-monsters-roladex/
Try to push it via gh-pages.
1.add pachage as a dev-dependency via npm install gh-pages --save-dev
2.make sure you add to package.json:
"homepage": "http://{username}.github.io/{repo-name}"
3.make sure to add these scripts to package.json:
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
4.Add it as a remote and npm run deploy
For special reasons I want to share the package.json file between two folders web (the react app) and mobile:
▸ mobile/
▸ node_modules/
▾ web/
▸ public/
▸ src/
README.md
package-lock.json
package.json
yarn.lock
In my package.json file I've added this:
"web-start": "react-scripts start", under scripts. However, when I run it in the root folder (/Users/edmund/Documents/src/banana-client) I get this:
➜ banana-client git:(master) ✗ yarn web-start
yarn web-start v0.24.6
$ react-scripts start web
Could not find a required file.
Name: index.html
Searched in: /Users/edmund/Documents/src/banana-client/public
error Command failed with exit code 1.
Is there a way I can add a root directory?
For this particular use case, I would recommend you to go ahead with Yarn workspaces.
Using Yarn workspaces, you can have multiple projects inside a single repository with a main package.json file at root level that projects share and project level package.json that they don't share and use individually.
Running yarn install will install all your dependencies at the root level, which is configurable if you don't want some packages to install at root.
You can have scripts in root that can help you run internal projects in that workspace.
So your final project structure will look something like this:
- project_root
- web
- node_modules
- package.json
- mobile
- node_modules
- package.json
- node_modules
- package.json
Learn more about Yarn workspaces here: https://yarnpkg.com/lang/en/docs/workspaces/
Look at this example here to understand it's basic usage:
https://github.com/pedronauck/yarn-workspaces-example
I'd agree that Yarn workspaces may help you accomplish what you are after. Otherwise, you will have to eject as the configuration for the appIndexJs (set to /src/index.js) is set in config/paths.js in the react-scripts package. Once ejected, you can modify the config/paths.js variable appIndexJs to accommodate a varying appIndex.
Building on above answer just do:
"web-start": "cd web && npm start"
Adding this workaround solved the same problem for me:
"web-start": "cd web && react-scripts start"