This is my Github repo https://github.com/JeanPeel/my_portfolio This is my Netlify place of deployment https://nifty-fermi-05d9e8.netlify.app/ . It just shows up white. But, if you inspect it you will see that my public/index.html page is loading. It is just not connecting with the react part. This works good on my computer with npm start and/or npm run build. I have have tried several things. These are the things I have tried
In package.json I have tried
* "homepage": "/home/react-app/",
* "homepage": "/home",
* "homepage": ""
at the ‘root’ of my file tree I have tried.
- adding a .toml file with …
[build]
base = "/"
publish = "/public/"
and/ or
[[redirects]]
from = "/*"
to = "/about" (just another page in the app)
status = 200
- adding a server.js with …
var express = require("express");
var app = express();
app.use("./src/pages/Home.js",express.static("home"));
app.use("./src/pages/About.js",express.static("about"));
app.use("./src/pages/Blog.js",express.static("blog"));
app.use("./src/pages/Connect.js",express.static("connect"));
app.use("./src/pages/Portfolio.js",express.static("portfolio"));
app.use("./src/pages/Resume.js",express.static("resume"));
- a webpact.config (I think I added this at root) with…
module.exports = {
entry: './src/index.js'
};
In the public folder I have tired adding…
- A _redirects.js file with…
/* /index.html 200
I have tried to read up on why it might be happening… But now I am STUMPED! 
I would love some help or suggestions or anything you can think of that might help!
Thanks.
Jean Peel
I had two problems that @ colinthornton helped me solve. But I could not mark them both as solution.
- I had my
_redirects file set as a .js file. But when the file is created you just need to call it _redirects no .js or anything.
- I had my Publish Directory settings wrong. I need it to be set to
/build. The build command was correct I needed it to set to npm run build.
Maybe give this a try? I’m not sure, but I believe Netlify only hosts static sites, which means you need to deploy the /build directory that’s created by running npm run build.
1 Like
That makes sense. I will try that. Thanks
According to that article I linked you’ll need to write some configuration for your routing.
If you choose to use something for routing (like React Router for example), you will need to set up a redirect and rewrite rule for the single page app.
1 Like
I am using React Router… I tried that npm run build again… same result as before… now working on configuration of my routing… Thanks for the input!
I am not sure I know how to do this redirecting… It deploys at localhost/ on my computer… On Netlify I am given some random link for now until I change it. It is suppose to deploy here to …nifty-fermi…
Ok I made my _redirect.js file show this…
/ /index.html
Darn! I was hopeful this would work! I added a .toml file with this code…
[[redirects]]
from = "/"
to = "/"
[[redirects]]
from = "/about"
to = "/about"
[[redirects]]
from = "/portfolio"
to = "/portfolio"
[[redirects]]
from = "/resume"
to = "/resume"
[[redirects]]
from = "/blog"
to = "/blog"
[[redirects]]
from = "/connect"
to = "/connect"
that did not work… but it could be that I am not understanding how to do it correctly… my start page is set to / nothing changed there. but when I type in my other pages like /about I get this error message " nifty-fermi-05d9e8.netlify.app redirected you too many times." so that is something new. I wonder if I set my start page to something like /home if that will help.
(This is all conjecture on my part, I’ve never deployed a React app to Netlify)
I don’t think you’ll need all those redirects, the first article I linked suggested that the single line
/* /index.html 200
should be enough. Don’t forget the star. The star is a placeholder for any route. This is basically saying to redirect a request to any route to go to /index.html, which is linked to your React Router code, which will then use JavaScript to handle rendering the correct page component.
I’ll try to hack up a minimal project so I can give you better advice.
1 Like
Thanks for your input…
I have been at this page before and tried that before… but I did not understand why I needed it. When you told me it was likely caused by my React-Router-Dom element that helped me understand why I should focus on routing…
before I came on this forum that code you suggested did not work. But when you sent me there again I tried it again… and it did not work… that is why I tried to change it up…
Well… I learned something… I was doing the redirect file wrong. I added a file called _redirect.js but no I only needed a file called _redirect In that file I tried that code again…
/* /index.html 200
and I am sad to say it did not work.
Okay, I was able to get a basic site up and working with it here https://5ee1f61cbf5617aea2356fae--silly-easley-5fe335.netlify.app/
The thing I did was create a file called _redirects and placed it in the /public directory, this will make it so that it is copied into your build folder. The content of that file is as above:
/* /index.html 200
1 Like
Alright, I’ve got it working for your site https://5ee1f75e034dc7d0b8553553--jolly-payne-6f000c.netlify.app/
When you ran netlify deploy, did you set the “Publish directory” to build?
1 Like
OMG!!! Thank you! ![redirects|604x500]
this is what I have
(upload://fWIp0EEq8OB1igc97HsOmUv8Xqu.png)
maybe my deploy settings are wrong?
Here’s a big dump of my console when I ran npm run build and npx netlify-cli deploy:
my_portfolio on master [!?] via ⬢ v14.4.0
❯ npm run build
> my_portfolio@0.1.0 build /home/colin/source/JeanPeel/my_portfolio
> react-scripts build
Creating an optimized production build...
Compiled with warnings.
./src/components/NavBar/index.js
Line 30:25: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
./src/pages/Resume.js
Line 31:25: <iframe> elements must have a unique title property jsx-a11y/iframe-has-title
Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.
File sizes after gzip:
47.81 KB build/static/js/2.32f24e15.chunk.js
13.45 KB build/static/js/main.7984c210.chunk.js
1.67 KB build/static/css/main.aacd8cdc.chunk.css
774 B build/static/js/runtime-main.f788fbad.js
The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
You may serve it with a static server:
npm install -g serve
serve -s build
Find out more about deployment here:
bit.ly/CRA-deploy
my_portfolio on master [!?] via ⬢ v14.4.0 took 3s
❯ npx netlify-cli deploy
This folder isn't linked to a site yet
? What would you like to do? + Create & configure a new site
? Team: Colin Thornton's team
Choose a unique site name (e.g. super-cool-site-by-colinthornton.netlify.app) or leave it blank for a random name. You can update the site name later.
? Site name (optional): undefined
Site Created
Admin URL: https://app.netlify.com/sites/jolly-payne-6f000c
URL: https://jolly-payne-6f000c.netlify.app
Site ID: d199c30c-af51-4dc0-acba-4f9893ccbe1e
Please provide a publish directory (e.g. "public" or "dist" or "."):
/home/colin/source/JeanPeel/my_portfolio
? Publish directory /home/colin/source/JeanPeel/my_portfolio/build
Deploy path: /home/colin/source/JeanPeel/my_portfolio/build
Deploying to draft URL...
✔ Finished hashing 29 files
✔ CDN requesting 10 files
✔ Finished uploading 10 assets
✔ Draft deploy is live!
Logs: https://app.netlify.com/sites/jolly-payne-6f000c/deploys/5ee1f75e034dc7d0b8553553
Website Draft URL: https://5ee1f75e034dc7d0b8553553--jolly-payne-6f000c.netlify.app
If everything looks good on your draft URL, deploy it to your main site URL with the --prod flag.
netlify deploy --prod
1 Like
my redirects looks like this…
When it asks for the “Publish directory”, you should input build.
1 Like
Yeah, the “Publish directory” setting should be /build, which is where the npm run build script creates the files to be deployed.
The _redirects file looks good.
1 Like
YAY!!! It works!!! Thank you soooo much!
What a relief it was to get that working yesterday. Thank you for taking the time!
