Can't deploy react application - reactjs

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

Related

React - I can't deploy to github with npm run deploy

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

create react app with github pages, not updating

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.

shows readme page after deploying react-app

I deployed react-app to GitHub, and when I open it, it shows readme page
I followed these commands
git init
git add .
git commit -m 'upload'
git branch -M main
git remote add origin https://github.com/charyyev2000/React-Quiz-App.git
git push -u origin main
I added the homepage to my package.json
i will list down the steps for deployment :
1 npm i gh-pages inside your root dir
2 add this to your package.json
"scripts": {
//...
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}
3 then run this cmd
npm run deploy

how to deploy react app with github gh-pages

I have created react application without using boilerplate create-react-app. I want to deploy it with git hub. Can I deploy it ? if yes, can anyone suggest steps ?
Assuming you have gh-pages package installed and you know how to deploy a index.html for example, add this in your package.json scripts:
scripts: {
...,
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}
Then run npm run deploy.
Take a look at this in depth article about it, if you get stuck, or leave some comments to this answer
https://dev.to/yuribenjamin/how-to-deploy-react-app-in-github-pages-2a1f

Why does my repository change after running npm run deploy?

I have a repository of react code that I deployed to github pages. The code deployed properly and is showing up at the right url, but the repository completely changed. A static folder was created with a bunch of chunk.js files and whatnot. My problem is that I am unsure how to update my code now that it is full of these strange files.
I'm not exactly sure what I should do. A solution I have in mind is just to redeploy to a different branch every time, though I assume that isn't the most elegant way to do things.
I ran npm run deploy.
What I expected was that after deploying, my regular repository would show up with all the code I wrote, but there's now a static folder with a bunch of chunk files that I have no idea how to work with. Any help would be appreciated.
Follow following steps --
Step 1: Add homepage to package.json
"homepage": "https://myusername.github.io/my-app",
Step 2: Install gh-pages and add deploy to scripts in package.json
npm install --save gh-pages
Add the following scripts in your package.json:
"scripts": {
+ "predeploy": "npm run build",
+ "deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
Step 3: Deploy the site by running npm run deploy
npm run deploy
Step 4: For a project page, ensure your project’s settings use gh-pages
Finally, make sure GitHub Pages option in your GitHub project settings is set to use the gh-pages branch:
Step 5: Optionally, configure the domain
mywebsite.com
reference : https://create-react-app.dev/docs/deployment GitHub Pages Section

Resources