CODEWITHSUNDEEP
node.jsreactjsgithub-pages
J.Schneider
J.Schneider

Reputation: 33

Deploying React app to github pages. GET ... net::ERR_ABORTED

GitHub: https://github.com/Justin-Schneider/portfolio

Link to Page: https://justin-schneider.github.io/portfolio/

The Link brings up nothing and I get the following two Errors:

GET https://justin-schneider.github.io/portfolio/justin-schneider.github.io/portfolio/static/css/main.233e2870.css net::ERR_ABORTED
GET https://justin-schneider.github.io/portfolio/justin-schneider.github.io/portfolio/static/js/main.c60b5716.js net::ERR_ABORTED

npm run deploy executes correctly

package.json

{
"name": "my-website",
"version": "0.1.0",
"private": true,
"homepage": "justin-schneider.github.io/portfolio",
"dependencies": {
  "react": "^16.2.0",
  "react-bootstrap": "^0.31.5",
  "react-dom": "^16.2.0",
  "react-scripts": "1.0.17"
},
"scripts": {
  "deploy" : "npm run build&&gh-pages -d build",
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test --env=jsdom",
  "eject": "react-scripts eject"
},
"devDependencies": {
  "gh-pages": "^1.1.0"
}
}

Upvotes: 3

Views: 2121

Answers (4)

sudo01
sudo01

Reputation: 31

"homepage": "."

This will Work!

As @Maksim Luzik have described the problem above.

We need to replace our URL in package.json with a '.' for the path.

For example :- This..

https://{username}.github.io/portfolio/justinschneider.github.io/portfolio/static/css/main.233e2870.css

will be...

./justinschneider.github.io/portfolio/static/css/main.233e2870.css

Hope you will get the idea.

Upvotes: 3

J.Schneider
J.Schneider

Reputation: 33

In my package.json I needed "https://justin-schneider.github.io/portfolio" and not simply "justin-schneider.github.io/portfolio"

my updated package.json 

{
"name": "my-website",
"version": "0.1.0",
"private": true,
"homepage": "https://justin-schneider.github.io/portfolio",
"dependencies": {
  "react": "^16.2.0",
  "react-bootstrap": "^0.31.5",
  "react-dom": "^16.2.0",
  "react-scripts": "1.0.17"
 },
"scripts": {
  "deploy" : "npm run build&&gh-pages -d build",
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test --env=jsdom",
  "eject": "react-scripts eject"
  },
"devDependencies": {
  "gh-pages": "^1.1.0"
}
}

Upvotes: 0

Maksim Luzik
Maksim Luzik

Reputation: 6733

It seems that in your react-scripts build react is building with relative path, thus referencing incorrectly https://justin-schneider.github.io/portfolio/justin-schneider.github.io/portfolio/static/css/main.233e2870.css instead of your correct url: https://justin-schneider.github.io/portfolio/static/css/main.233e2870.css. If you can't change the dist path for the css and js in react-build, you can consider using https://webpack.js.org/ as css and js bundler, there you can set your options for static directory in a way that you can reference them correctly.

Upvotes: 0

Fadi Abo Msalam
Fadi Abo Msalam

Reputation: 7197

in your nodejs make sure that you make the build folder static so it can be accessed from the browser 

   app.use(express.static('./client/build/'));
   app.use('/', express.static('./client/build/index.html'));

Upvotes: 0

Related Questions