React: Accessing a page outside React app, inside public folder

Question

I have a React application created by create-react-app. The app works fine, but I have run into a problem

I need to test som ad things on a plain html site, no additional React code. The problem I have is that the ads.txt tags need to be crawled by Google, which can take up to 24 hours on a new page/URL, time that I don't really have.

So I did the following. In my repo under /public folder I added a folder /ad-test with an index.html inside. When I serve it locally using npm start and go to http://localhost:3000/ad-test, it works fine.

Great, I thought and deployed it to the production environment, but now when I try to go to http://[my-site]/ad-test or http://[my-site]/yo-test/index.html it does not work (I get the React 404 site that I created).

I looked here and if I understand correctly, it is not possible to do it the way that I tried since the build stage will not include the public folder. Am I correct in this?

Any idea how to solve this?

EDIT:

I have a good knowledge of React and React Router in general, the app already uses <Switch><Route ... /></Switch> with a catch-all route directing to Not Found Component and the bottom.

The problem I have is that we include some ad scripts from an ad provider. The ads are not displayed in the application (adblockers totally removed from browser etc.) and the provider thinks that we have made errors in the React code.

We don't think that we made any errors (the ads were displayed fine in our test environment but not in prod) and we have to prove that React is not to blame for the ads not showing.

To do this we created a static HTML file with all ads hardcoded, no React components or other things that might disturb. BUT, because of ads and Google crawlers and ads.txt, we need to have the static test page under the same domain as our main page/application.

This is why I ask if it is possible to somehow add a static HTML that can be reached from http://my.page/test-page.html without being "intercepted" by react router, i.e. it exists outside React but on the same server.

Answer 1

When you use react by create-react-app, it means you are building a single-page application.

What this means is that after running npm run build you will have a build folder with only one html file called index.html in that fold.

This index.html does not know and has no relationship with your added 'index.html' in ad-test folder.

If you want your ad-test html to be recognised by react, you need to make it a component of app.js and use react-router to give it a pathname.

It is very simple.

First, install react-router-dom;

Second, set up react-router-dom;refer to https://reacttraining.com/react-router/web/guides/quick-start

Third, give your add-test component a pathname.Your js code should look something like this:

<Route path='/ad-test' component={AdTest} />

IMPORTANT:

After you deploy your app, always remember you just built a single-page application.

You only have one html in your app.

Please make sure when you test your app after you deployed you must tell your service provider that no matter what pathname a user inputs in the address bar you always redirect it to the index.html

The build stage includes the public folder:

If you have a picture in the public folder, and this picture was imported to other components it will be shown after you run npm run build

Hope it helps.