3

I published my first react app to my shared hosting.

It was multi-page react application, After I built my project successfully, I did Yarn Build which made a build folder

I uploaded that built folder to my hosting but for some reason my hosting is only showing the homepage and no other pages (The other pages were working in localhost)

This is the link to my website: http://spaceyfi.com/ and this is the link to my github repo https://github.com/irohitb/portfolio-

In the repo, routes, I have a path named printing 

 <Route exact path="/printing" component={Printing} />'

but when I go to spaceyfi.com/printing, it doesn't open up.

[Update:] Here is my build folder which only contains one HTML file (if that is relevant) https://github.com/irohitb/portfolio-/tree/master/build

[Question:] How can I fix it?

iRohitBhatia
  • 3,808
  • 6
  • 38
  • 88
  • I'm still very new to React so I'm just making an observation, but you are exporting your components with lowercase and calling them with uppercase `export default printing` and `component={Printing}` - Not sure if this is causing the page to not be found? – Mike Diglio Aug 23 '18 at 13:35
  • @MikeDiglio Even I am also new, but still, In JS (probably) if you use `export default` then you can import it with whatever name you want i.e I can even use something like component={Ptg} until and unless I am importing it with that name i.e `import Ptg from './container/Printing/printing.js'` – iRohitBhatia Aug 23 '18 at 13:41

3 Answers3

3

You have a static website with one index.html. You want react-router to handle all the requests and the navigation for you.

Right now, when you hit spaceyfi.com/printing, The Apache server searches for directory printing and index.html in the directory. Not finding one, it's response is 404 not found.

In webpack development mode dev server config has historyApiFallback fo that purpose:

  devServer: {
    inline: true,
    port: 8080,
    historyApiFallback: {
      index: '/'
    }
  }

To configure your web server to make react-router handle ALL the routes, you need to modify the redirection rules.

If you use Amazon S3 for statis hosting, read this guide.

If you're using other service for static hosting, refer to the documentation. The configuration should look something like this:

enter image description here

I hope this answer was helpful and pointed you to the right (re)direction.

Make sure to use react-routerLink component for navigation as well.

yotke
  • 1,015
  • 2
  • 12
  • 24
  • It indeed guided me to navigate in the correct direction and I am so thankful for your support but I found an alternate post which provides a very easy answer. I will share it in the answer section – iRohitBhatia Aug 23 '18 at 15:20
  • 1
    @static_null, see this [answer](https://stackoverflow.com/questions/46056414/getting-404-for-links-with-create-react-app-deployed-to-github-pages) – yotke Aug 27 '18 at 11:59
2

So, I was using a hosting by Namecheap (shared hosting) and in order to use other routes you need to do this

In the directory where we are uploading/putting our files.. We need to create an .htaccess. In that .htaccess put this configuration (for me copied and past did the job)

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
iRohitBhatia
  • 3,808
  • 6
  • 38
  • 88
0

For GCP Storage (Google equivalent of S3), I followed yotke's suggestion and it worked great:

gsutil web set -m index.html -e index.html
user3111995
  • 1