I have a script that generates sitemap.xml file in the public directory. It is accessible in localhost:3000/sitemap.xml when it is in development. But when it goes for build, I cant access the file from the public folder. I made some research and I found out build doesnt have access of the public folder! Please help me with a way to access the public/sitemap.xml if there is any, if not is it possible to show .xml format as a page in reac-router-dom?

I have a script that generates sitemap.xml file in the public directory. It is accessible in localhost:3000/sitemap.xml when it is in development. But when it goes for build, I cant access the file from the public folder. I made some research and I found out build doesnt have access of the public folder! Please help me with a way to access the public/sitemap.xml if there is any, if not is it possible to show .xml format as a page in reac-router-dom?

• javascript
• reactjs
• react-router-dom
• sitemap

• why not using something like npmjs./package/react-router-sitemap ? or do you want to implement one yourself ? – WaLid LamRaoui Commented Nov 4, 2021 at 11:12
• 1 also can you please post your package.json file and some code samples so we have a better understanding on what's going on. – WaLid LamRaoui Commented Nov 4, 2021 at 11:14
• @WaLidLamRaoui I have already generated the sitemap by writing a script that uses fs to generate sitemap.exe and store it in public folder. I think react-router-sitemap does the same. The issue I am facing is the sitemap is in the build folder as well but it cant be accessible in production. returning me a 404 – Zeed Tanue Commented Nov 4, 2021 at 11:24
• once you build all the content of the public folder is moved to the build folder. verify if the sitemap.xml exist in the build folder. Then your server should return the /sitemap.xml file. if it still gives 404 then there must be a configuration problem with the server. – Himanshu Patil Commented Nov 6, 2021 at 19:46
• @HimanshuPatil could you elaborate a little more? I have the sitemap.exe in my build folder. What kind of configuration issue it might be or something, because it is being deployed and everything else is working so on – Zeed Tanue Commented Nov 7, 2021 at 16:38

3 Answers 3

Reading through your question and ments there isn't a lot to work with, however I can inform you of a couple of things.

• The reason your sitemap might work locally and not on a build is because you're very likely using webpack-dev-server (if you're using CRA then you're using it), which in return uses express to locally serve your files. When you build it will no longer be using that server and you'll need your own custom server.

• When you build your files for production it will output all your files to static js/css files which then need to be served using some or other server (express/nginx/apache). In your question you've not specified what server you're using, beyond the development server, so I can only assume that you probably don't have any and/or are depending on some host that you're using without realizing that you're using one.

• When you want to serve something like .xml, you have to configure the server to actually serve .xml files. Also you should not be serving .xml as any form of react route, it's not a route and it has nothing to do with react. Your request should directly hit the server, i.e. nginx, and that server should be configured to serve the .xml file.

• In your ments you mentioned that it's "sitemap.exe", I'm not sure if that's a typo but you can't serve and run .exe files over web and no server will be configured to do so by default. The sitemap.xml or sitemap.txt should contain only the valid xml or text content and also make sure it's actually in the build directory once you've built it.

• If the .xml exists in your build and all of that's fine then the only thing left you need is to add a location block to your nginx server, or to add a get route to your express (or static resources) in order to actually serve that file. If your server is giving you a 404 at that point it likely means it isn't recognizing .xml files at all. That needs to be configured in your server.

In nginx it means you need something like location = /sitemap.xml.
In express it means you need something like app.get('/sitemap.xml').

A default nginx installation with try_files $uri $uri/ =404 should work for .xml as well.

For folks using AWS amplify as hosting service : In AWS amplify there is an option called "Rewrites and Redirects". There you have to add 'xml' in the rewrite (200) rule.

</^[^.]+$|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json|xml)$)([^.]+$)/>

I solved a similar issue by going into the "Rewrites and redirects" section and adding a rule says the "source address" of "/sitemap.xml" will redirect to "/sitemap.xml" and prioritized that rule over the rule in which </^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json)$)([^.]+$)/> is redirected to /index.html.