Project works locally, but shows blank on GitHub pages [duplicate] - javascript

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

Related

Having trouble updating GitHub pages with React App

I have a deployed active react app through GitHub pages and I'm looking to update it with newer code, i.e. color changes, update text, etc. The code has already been pushed to my GitHub repo, on my main branch but it's not updating the live GitHub page. I'm obviously missing something but couldn't find anything reading documentation or other stackoverflow questions. Can anyone help? Also I've seen a lot of people posting their package.json so here's mine
Edit: I already have the github pages live with prior code, but pushing the newer code to live is what I need help with.
{
"name": "react-portfolio",
"version": "1.0.0",
"private": "true",
"homepage": "N/A",
"dependencies": {
"#testing-library/jest-dom": "^5.16.2",
"#testing-library/react": "^12.1.3",
"#testing-library/user-event": "^13.5.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "^5.0.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run 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"
}
}
I think you should to consider to add gh-pages-deploy in your script list.
Because of it will enable you to deploy straight to your github pages with one simple command.
But first, you neet to do npm install gh-pages-deploy -g to install the package globally in your environtment.
Here was the docs for gh-pages-deploy.
Thank you
You can use GH-pages-deploy to deploy your project to GitHub Pages
# install it from npm and symlink it into your PATH
npm install gh-pages-deploy -g
# now run it!
gh-pages-deploy
Or you can do several options to be able to run GH-pages-deploy by looking at the following documentation

eslint Failed to load config "react-app" to extend from. when making changes in project

I created a react app using yarn create react-app. Then I run yarn start and the project run properly on localhost. However, when I make an edit to a file (add a new tag, rename contents of a div..) the app throws an error and fails to compile with the error
[eslint] Failed to load config "react-app" to extend from.
Eslint is already installed. The crazy thing is, opening the package.json file and saving it solves the issue and the project compiles with the new changes. However I'd have to do this every time I make a change.
I am using Ubuntu on WSL .
Here is my package.json file
{
"name": "gmail-clone",
"version": "0.1.0",
"private": true,
"dependencies": {
"#reduxjs/toolkit": "^1.8.1",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.0.1",
"#testing-library/user-event": "^14.1.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^8.0.1",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.0"
},
"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"
]
}
}
A few ways to solve the issues:
Add the eslint-config-react-app
yarn add eslint-config-react-app -D OR yarn add eslint-config-react -D
Remove this code from package.json
"extends": [
"react-app"
]
},
Remove yarn.lock and reinstall node modules.
I had a similar problem, and I resolved it by installing eslint-config-react-app:
yarn add eslint-config-react-app -D

Why is my React App not loading on localhost?

I've been working on with React for a while, successfully using npm start to view how my application is running.
At some point, my app stopped loading at http://localhost:3000/.
I get this in the terminal:
Compiled successfully!
You can now view contact-list in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.1.16:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
In my Chrome browser, it looks like it's just perpetually loading, showing no errors. Nothing is showing up in the console.
I tried deleting the browser cache.
I tried checking http://192.168.1.16:3000. It also just perpetually loaded.
I tried another project on the same port and it worked, so it doesn't seem like an issue with the port.
Here is my package.json:
{
"name": "contact-list",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.10",
"#testing-library/react": "^11.2.6",
"#testing-library/user-event": "^12.8.3",
"bootstrap": "^5.1.3",
"react": "^18.1.0",
"react-dom": "^17.0.2",
"react-router-dom": "^6.3.0",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.1"
},
"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"
]
}
}
Does anyone know what could be going wrong?
Not enough data. But one of the reasons could be that at some point port 3000 was not released correctly. Try to kill the process by port, or simply reboot the system

React Js : Failed to Compile

I moved to windows 11 from Linux , so i imported all my code from Linux..to windows .
So whenever i try to run a react project , I get a compile error stating :
Failed to compile
./src/index.js
Module not found: Can't resolve 'react/jsx-dev-runtime' in 'D:\code\react-workspace\react-advanced-2020-master\src'
This error occurred during the build time and cannot be dismissed.
React. js is an open-source JavaScript library that is used for building user interfaces specifically for single-page applications. It's used for handling the view layer for web and mobile apps. React also allows us to create reusable UI components, Had to write something as it was displaying error :)
I tried npm i -g react-scripts and npm clean install
package.json
{
"name": "tutorial",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.3"
},
"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 am getting a compile error with css-loader/dist/runtime/api.js "Error: ENOENT: no such file or directory" using ReactJS

I am using react-responsive-carousel to build out a carousel on a react site. I installed the package with yarn add and got everything working nicely. I then copied and pasted the .scss files from the project git repo into my own project to use as a base (same class names etc) for styling it my own way. Then my project started throwing errors. Specifically this:
./node_modules/css-loader/dist/runtime/api.js
Error: ENOENT: no such file or directory, open '/mysite/node_modules/css-loader/dist/runtime/api.js'
I have since deleted the .scss files since it was with that change that the error appeared, this did nothing, oddly. I have also tried manually installing css-loader and babel-core as suggested on similar problems, but this did nothing and css-loader still doesn't show up in my node-modules folder.
this is my package.json
{
"name": "mysite",
"version": "0.1.0",
"private": true,
"dependencies": {
"apollo-boost": "^0.4.3",
"apollo-client": "^2.6.3",
"apollo-link-http": "^1.5.15",
"babel-core": "^6.26.3",
"css-loader": "^3.0.0",
"eslint-loader": "^2.2.1",
"graphql": "^14.4.2",
"graphql-tag": "^2.10.1",
"node-sass": "^4.12.0",
"react": "^16.8.6",
"react-apollo": "^2.5.8",
"react-dom": "^16.8.6",
"react-lightbox-component": "^1.2.1",
"react-markdown": "^4.1.0",
"react-responsive-carousel": "^3.1.49",
"react-router": "^5.0.1",
"react-router-dom": "^5.0.1",
"react-scripts": "3.0.1",
"webpack": "^3.0.0"
},
"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"
]
}
}
any ideas what could be going wrong here? I used create-react-app to start the project, do I need to eject it and edit some webpack config file maybe?
It's really weird since the issue started when I added new .scss files, which I since deleted but this didn't revert the issue.
Any help would be much appreciated.

Categories

Resources