Deploying from Github to Netlify

This is my Github repo This is my Netlify place of deployment . 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": "."

  • "source": "**",	
    "destination": "/index.html"```

* "homepage": "/home/react-app/",

* "homepage": "/home",

  • "homepage": "/"

* "homepage": ""

at the ‘root’ of my file tree I have tried.

  • adding a .toml file with …
 base = "/"
 publish = "/public/"

and/ or

 from = "/*"	
 to = "/about"	(just another page in the app)
 status = 200
  • adding a server.js with …
var express   =     require("express");
var app       =     express();

  • 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! :slight_smile: I would love some help or suggestions or anything you can think of that might help!

Jean Peel

I had two problems that @ colinthornton helped me solve. But I could not mark them both as solution.

  1. 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.
  2. 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…

from = "/"
to = "/"

from = "/about"
to = "/about"

from = "/portfolio"
to = "/portfolio"

from = "/resume"
to = "/resume"

from = "/blog"
to = "/blog"

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 " 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…

This says you are right and it should work…

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

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

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

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.

  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:  jsx-a11y/anchor-is-valid

  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:

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. or leave it blank for a random name. You can update the site name later.
? Site name (optional): undefined

Site Created

Admin URL:
Site ID:   d199c30c-af51-4dc0-acba-4f9893ccbe1e
Please provide a publish directory (e.g. "public" or "dist" or "."):
? 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!

Website Draft URL:

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!