React app not deploying correctly in Github pages - reactjs

I followed a tutorial to deploy a React app to github pages. When I deploy, I get no error messages, but when I check the URL, I just see a blank page (see https://bd21.github.io/tallyup-frontend-demo/).
It runs locally fine using "npm start". Whenever I deploy I just run "npm run deploy".
My repository is here: https://github.com/bd21/tallyup-frontend-demo
Here is my package.json:
{
"name": "tallyup-frontend-demo",
"version": "0.1.0",
"private": true,
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.22",
"#fortawesome/free-solid-svg-icons": "^5.10.2",
"#fortawesome/react-fontawesome": "^0.1.4",
"#types/jest": "24.0.18",
"#types/lodash": "^4.14.138",
"#types/node": "12.7.4",
"#types/react": "16.9.2",
"#types/react-dom": "16.9.0",
"#types/react-router-dom": "^4.3.5",
"bootstrap": "^4.3.1",
"lodash": "^4.17.15",
"moment": "^2.24.0",
"node-fetch": "^2.6.0",
"react": "^16.9.0",
"react-bootstrap": "^1.0.0-beta.12",
"react-dom": "^16.9.0",
"react-router-dom": "^5.0.1",
"react-scripts": "3.1.1",
"typescript": "3.6.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"homepage": "http://bd21.github.io/tallyup-frontend-demo",
"devDependencies": {
"gh-pages": "^2.1.1"
}
}
When I look at the network calls in the Chrome inspector, I don't see any 4xx or 5xx calls. You can verify that here.
https://bd21.github.io/tallyup-frontend-demo/
Why isn't my app deploying/displaying correctly?

your site is working properly in Github pages,
maybe the problem is with your react router code as it was routing something

When you use "npm run deploy", don't you receive any errors?
Cuz if it runs without any errors, «build» directory and «gh-pages» branch created then you can easily change branch of your repository (for github pages in settings) on «gh-pages» branch and after minutes, you can see your own github pages.
If you did all above, check index.html in «build» directory.
It should show an html of your React project correctly.
Another thing i had problem with, you should add origin remote for your repository (not other name just origin) :
Git remote add origin
I hope i'll help you.

Related

404 error after adding custom domain to deployed reactjs app hosted by github pages

I've created a reactjs app and I deployed it to github pages with the command npm run deploy this all works great and I can see my app running when i open it from the
settings>pages in my repo. However, I am trying to add a custom domain and this is causing me trouble. I configured the IPs and everything for the DNS according to gh-pages documentation and the DNS checks all pass when i add the domain name. But when i go to the domain in my browser I get all 404 errors like this:
Im thinking it could be something wrong with my package.json, I was thinking I need to change the "homepage" value to my new domain instead of the http://<Github-username>.gihub.io/<repoName>/ I set it to when i deployed the app? Ive tried this but it doesnt work to load the page at that url.
So Im wondering if anyone has run into this issue after deploying to gh-pages and then adding a custom domain?
this is my package.json:
{
"homepage": "http://CRJones7.github.io/learned/",
"name": "learned",
"version": "0.1.0",
"private": true,
"dependencies": {
"#primer/octicons-react": "^17.9.0",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"bootstrap": "^5.2.3",
"jquery": "^3.6.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.4.4",
"react-scripts": "5.0.1",
"reactstrap": "^9.1.5",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"gh-pages": "^4.0.0"
}
}
I figured out the solution, I just needed to re-deploy my page with
npm run deploy

Heroku R14 warning for no apparent reason maybe strict mode problem?

I am getting a R14 warning on my app so I did reduce my app to only the home page to track the issue but what happened is the warning is still there any idea what might cause this ? I am kind of afraid that my package.json is wrong, so basically my app is only home page no functionality nothing could it be that my starting scripts are wrong and the app is starting in dev ? also I have and issue with strict mode how to disable strict mode in production ? I had to comment out the strict mode because the app is getting deployed on strict mode for some reason ?
2022-01-10T19:45:53.658182+00:00 heroku[web.1]: Process running mem=551M(107.7%)
2022-01-10T19:45:53.663719+00:00 heroku[web.1]: Error R14 (Memory quota exceeded)
{
"name": "app",
"version": "0.1.0",
"private": true,
"engines": {
"node": "14.17.4",
"npm": "6.14.14"
},
"dependencies": {
"#emotion/react": "^11.7.1",
"#emotion/styled": "^11.6.0",
"#material-ui/core": "^4.12.3",
"#material-ui/icons": "^4.11.2",
"#material-ui/lab": "^4.0.0-alpha.60",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"#types/html2canvas": "^1.0.0",
"#types/jest": "^27.0.2",
"#types/jspdf": "^2.0.0",
"#types/node": "^16.11.6",
"#types/react": "^17.0.33",
"#types/react-dom": "^17.0.10",
"#types/react-router-dom": "^5.3.2",
"#types/uuid": "^8.3.3",
"html2canvas": "^1.3.3",
"jspdf": "^2.4.0",
"notistack": "^1.0.10",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-ga": "^3.3.0",
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.3",
"typescript": "^4.4.4",
"uuid": "^8.3.2",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Your start script runs react-scripts start:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
That is almost certainly wrong.
Assuming this is a standalone app, React shouldn't actually be running on Heroku. Instead, you should build a production build at compile time and then Heroku just needs to host your files as static files. This uses very little memory.
One option is to use this buildpack, which promises a zero-config way to get apps created via create-react-app up and running on Heroku:
This buildpack deploys a React UI as a static web site. The Nginx web server provides optimum performance and security for the runtime.
Configure your app to use this buildpack:
heroku buildpacks:set mars/create-react-app
Then redeploy.

GitHub Pages Page Not Found for React App

I am trying to publish my single page website to github pages, but I've run into an issue. When I go to the link for my website, it gives me a 404 error with this message: "File not found. The site configured at this address does not contain the requested file. If this is your site, make sure that the filename case matches the URL. For root URLs (like http://example.com/) you must provide an index.html file."
I've looked at the documentation, watched videos, and looked up other people who are having this issue, but nothing will solve it.
I have a main and a gh-pages branch. Right now I have it set to build from the gh-pages branch. If I change it to main I get the same issue.
Here is my package.json file:
"homepage": "http://bpyle02.github.io/portfolio",
"name": "portfolio",
"version": "0.1.0",
"private": true,
"dependencies": {
"#craco/craco": "^6.4.2",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"aos": "^3.0.0-beta.6",
"autoprefixer": "9",
"gh-pages": "^3.2.3",
"postcss": "7",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icon": "^1.0.0",
"react-icons": "^4.3.1",
"react-router": "^6.0.2",
"react-router-dom": "^6.0.2",
"react-scripts": "4.0.3",
"react-scroll-into-view": "^1.10.1",
"scroll-into-view": "^1.16.0",
"tailwindcss": "npm:#tailwindcss/postcss7-compat",
"web-vitals": "^1.0.1"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -b main -d build",
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Here is the link to the repo: https://github.com/bpyle02/portfolio
You need to upload only the contents of your build folder to the gh-pages branch. I think it will benefit you to read about how GitHub Pages works.
The create-react-app documentation explains how to address your scenario:
https://create-react-app.dev/docs/deployment/#github-pages
Here's the most important information (without setting this before building your app, it won't work):
Open your package.json and add a homepage field for your project:
"homepage": "https://myusername.github.io/my-app",
Create React App uses the homepage field to determine the root URL in the built HTML file.
This might also be relevant to your app:
https://create-react-app.dev/docs/deployment/#serving-the-same-build-from-different-paths

Failed to Deploy React App to Heroku - Unable to Deploy

I have made a reactjs app. It's just the front-end. So no nodes and databases are added. When I am trying to deploy it to Heroku, I am always facing the same error and couldn't resolve it. I have added the logs and my package.json file.
Package.json
{
"name": "reactapp",
"version": "0.1.0",
"private": true,
"engines": {
"node": "12.17.0",
"npm": "6.14.4"
},
"dependencies": {
"#material-ui/core": "^4.11.0",
"#material-ui/icons": "^4.9.1",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"bootstrap": "^4.5.0",
"font-awesome": "^4.7.0",
"react": "^16.13.1",
"react-bootstrap": "^1.0.1",
"react-dom": "^16.13.1",
"react-helmet": "^6.1.0",
"react-rating-stars-component": "^1.1.0",
"react-router-dom": "^5.2.0",
"react-script-tag": "^1.1.2",
"react-scripts": "3.4.1",
"reactstrap": "^8.5.1",
"shards-react": "^1.0.3",
"styled-components": "^5.1.1",
"typescript": "^3.9.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {}
}
You're trying to start your app in production with react-scripts start which is actually meant for development. To deploy a Create React App you need to build it and have a server that serves the build folder. That's because you're essentially building a static frontend application instead of a fully fledged backend API, which is what Heroku usually is for.
If you want to deploy with Heroku, you need to use the Create React App buildpack. You can add a buildpack to an existing dyno in the settings section of the UI or in using the heroku CLI:
heroku buildpacks:set mars/create-react-app -a APP_NAME
From next release onwards your app will use the buildpack. For further explanation visit the buildpack repository linked above.

Deploying react app to heroku giving H10 error code

I've created a react app using create-react-app.It is working well in my local server.But when I tried to deploy it to heroku it is crashing.I don't know why it is crashing.
In heroku logs --tail its showing error code=H10 desc=App crashed.I searched about this issue and nothing helpful for me.
My question is similar to this question : React app runs locally, crashes when on Heroku error code=H10
But I'm unable to understand the solution they given.
My package.json file is as follows:
{
"name": "lets-chat",
"version": "0.1.0",
"private": true,
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.28",
"#fortawesome/free-brands-svg-icons": "^5.13.0",
"#fortawesome/free-regular-svg-icons": "^5.13.0",
"#fortawesome/free-solid-svg-icons": "^5.13.0",
"#fortawesome/react-fontawesome": "^0.1.9",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"dotenv": "^8.2.0",
"firebase": "^7.14.0",
"moment": "^2.24.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
I don't know what's wrong in this file.Should I make any changes in this file to get my problem solved?
heroku logs --tail gave the report as follows:
Check out this link (in case none of the solutions from that other post helped your case): https://dev.to/webdevraj/deploy-a-react-app-on-heroku-the-right-way-5efo
Pay attention to #6 where they mention the buildpack.
When using create-react-app and deploying to
dont delete the favicon.ico and manifest.json
also in package.json above scripts insert "engines": {
"npm": "6.x",
"node": "12.x"
},
//NOTE CHECK YOUR NODE AND NPM VERSIONS BY TYPING npm -v and node -v for accurate versions//
In heroku after heroku create command, go to heroku and change buildback under settings to https://github.com/mars/create-react-app-buildpack
Dont add other scripts or change the start, build scripts!
This should clear all h10 errors when deploying to heroku, if they dont i suggest you create a new directory and copy your files there and start over, this link is a great guide to deploy
https://dev.to/smithmanny/deploy-your-react-app-to-heroku-2b6f
I also had same issue. I could figure out it is something to do with react version.
I changed the version and it worked. Update your version in package.json and see if it works.
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.2.0"

Resources