So I am uploading a single page client side react app on netlify. And I get a "404 page not found" message when I deploy it.
I have tried a _redirects file with /* /index.html 200 in the public folder, but that did not work
I tried changing the settings in build command to "CI= npm run build" , that also did not do anything other than cause another error saying "Command failed with exit code 254: CI= npm run build" so I edited it back the blank default value for the build command.
https://jolly-bhaskara-654af5.netlify.app/
https://github.com/moedeera/MySite2/tree/main/client
Here is my folder structure
client-----
|
|
Node_modules
package.json
package-lock.json
.gitignore
.readme
.src
.Public ----------
|
|
_redirects
index.html
manifest.json
robots.txt
favicon.ico
my package.json reads
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.15.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"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"
]
}
}
Can someone please help me understand what is going wrong and how can I deploy this properly ?
Related
I created a simple react-app and I was able to run it locally. However I am unable to deploy the app on elastic beanstalk using eb cli or manually.
There seems to be no node server running, hence the health checks were failing.
How can I resolve this error?
Environment health has transitioned from Pending to Degraded. Initialization completed 6 seconds ago and took 2 minutes. Impaired services on all instances.
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"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"
]
}
}
I have also noticed the following message
Instance deployment: You didn't specify a Node.js version in the 'package.json' file in your source bundle. The deployment didn't install a specific Node.js version.
So I have updated the package.json with the following, however it didn't help.
"engines" : {
"npm" : ">=8.0.0 <9.0.0",
"node" : ">=16.0.0 <17.0.0"
}
I am a little bit perplexed here as I attempt to launch my first react project online.
I'm using AWS Amplify, I have connected my github repo, and have everything linked together, from VS Code I can push to my github, which then after a minute or so displays the changes inside of my AWS Amplify website, so I believe I have the vscode - GH - amplify pipeline operating properly...
I initialized a base react app, on the AWS site and it works as expected,
The dev server on localhost displays the same spinning logo and
Edit src/App.js and save to reload
I then added some extra random text as a test, within the app.js,
It added my hello world test text in the localhost. I push it to GH, it then appears exactly the same on my Amplify site as it does on dev server. the same react initial page but now both have the test text. I then delete all the components of the app.js
add a simple header nav bar, update package.json to include a couple dependencies (chakra-ui) and then the whole thing breaks.
I'm sorry if this is a dumb question but do I need to do anything outside of vs code, in order to have the package.json updates not ruin the compiling?
In VS Code i need to npm install packages do I need to do this somewhere inside AWS Amplify?
here is the json that works fine
{
"name": "react-amplify-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"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"
]
}
}
I then try to add the JSON file from my full react project where i made a decently involved (for me anyway) website.
Here is the updated JSON that makes it not work anymore
{
"homepage": "https://avarga1.github.io/My-Portfolio/",
"name": "myreactportfolio11",
"version": "0.1.0",
"private": true,
"dependencies": {
"#chakra-ui/core": "^0.8.0",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"iframe-resizer": "^4.2.11",
"react": "^18.2.0",
"react-bootstrap": "^2.7.0",
"react-dom": "^18.2.0",
"react-s3": "^1.3.1",
"react-scripts": "^5.0.1",
"scripts": "^0.1.0",
"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"
}
}
What am I missing???
Thanks in advance.
Having some trouble debugging my react app. This app was created using create-react-app, so I should be able to run 'npm start' and see the app run in the localhost window in my browser, but instead I see nothing, and in the Elements tab of chrome devtools shows a tag saying "You need to enable javascript to run this app".
Not sure what is going on here. I had this app running perfectly fine yesterday, and I didn't change anything to the package.json.
Here's what my package.json looks like:
`
`{
"name": "app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.4.3",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"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"
]
}
}`
`
Can anybody help me with this? I tried adding a common solution, to add "proxy": "localhost:5000", but that didn't solve the problem.
I was expecting the app to successfully start in the browser.
I am making simple react.js app using react-table.
I tried to run it locally using npm start and it is working fine.
But when I tried to deploy it on github pages, it just shows a blank page. I have followed all the steps for deploying react app on gh pages.
Here is the gh repository : https://github.com/7phalange7/react-table
the main branch has the project code, and gh-pages branch is deployed on github pages.
Should there be a problem deploying react-table on github pages ?
package.json for reference
{
"name": "react-table-example",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "^4.0.3",
"react-table": "^7.7.0",
"web-vitals": "^1.1.2",
"homepage": "https://7phalange7.github.io/react-table/"
},
"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",
"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": "^3.2.3"
}
}
Edit :
still not sure what is the issue here, but I copied all the code to a new react project and then deployed on github pages and it is working fine now. I guess since this was the first time deploying react project, somehow I messed up something.
try changing the private to 'false' in your package.json
just finished a huge app and tried to deploy it on github but it started throwing 404 errors. I tried to create a fresh new one with just one change in the HTML (just to see that is customized) and it's throwing the same error. The dev version works, the production not.
Here is the error:
DevTools failed to load SourceMap: Could not load content for chrome->
extension://hgmhmanijnjhaffoampdlllchpolkdnj/js/lib/purify.min.js.map:
HTTP error: status code
404, net::ERR_UNKNOWN_URL_SCHEME favicon.ico:1 GET
https://kirilchristov.github.io/favicon.ico 404 manifest.json:1 GET
https://kirilchristov.github.io/manifest.json 404 manifest.json:1
Manifest: Line: 1, column: 1, Syntax error.
Here is a link to the repo: Github Repo
Here is the package.json with the scripts:
{
"home":"https://kirilchristov.github.io/renker",
"name": "gr",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3"
},
"scripts": {
"predeploy": "npm run build",
"deploy":"gh-pages -d build",
"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"
]
}
}
You need three things for CRA to work on gh-pages
A branch with the prod files (default is gh-pages)
✅ You have that (I checked)
Settings enabling gh-pages and select the branch if not default and serve from root
✅ You have that as well, you say
The homepage key inside your package.json
❌ You have home instead of homepage https://create-react-app.dev/docs/deployment#building-for-relative-paths
Try fixing that in your package.json
{
"homepage":"https://kirilchristov.github.io/renker",
"name": "gr",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3"
},
"scripts": {
"predeploy": "npm run build",
"deploy":"gh-pages -d build",
"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"
]
}
}