How to serve apple-app-site-association file on /apple-app-site-association page in ReactJS

I'm having a lot of trouble with serving a apple-app-site-association file in ReactJS project.

I've searched a lot of GitHub issues pages (for ReactJS, Gatsby, and Angular), forums, and a lot of online communities, and it seems that I can't find a solution for this.

What I've tried is:

• Adding the file into public/.well-known folder.
• Adding a separate route via react-router on path "/apple-app-site-association" and returning an tag with file
• Adding <link rel="apple-app-site-association" href="%PUBLIC_URL%/.well-known/apple-app-site-association"> into public/index.html

Testing through the "aasa-validator" returns:

Your file's 'content-type' header was not found or was not recognized.

Keep in mind that:

• The apple-app-site-association JSON file must not have a .json file extension.
• It has to be on "/apple-app-site-association" or "./well-known/apple-app-site-association" links on the website.
• I can't use a redirect to another page/link.

Thanks in advance!

Ps. If it helps, I'm using a Heroku for deployment.

You can serve the file using React Router. Put this in your index.js or App.js:

const reload = () => window.location.reload();
<Route path="/apple-app-site-association" onEnter={reload} />

More details here: https://brainbank.cc/jamie/lessons/programming-react/serve-static-file-txt-html-via-react-router

several days have passed and I didn't find an answer or solution. (And I really hate to see an unanswered stackoverflow question when I'm searching for a solution)

I've talked to a lot of people and pretty much everyone said this is impossible. Reason for that is that ReactJS is unable to return JSON type of response upon client sending a GET request.

So we transfered the file onto the back-end side which is working perfectly.

tl;dr It's not possible.

As discussed here, it is possible to server apple-app-site-association from NextJs.

Next.js uses the extension to automatically detect the content-type of the file. Since the file is extensionless, it's served as binary content—this should be compatible with Apple's verification.

If Apple requires specific headers, you can overwrite this type:

// next.config.js
module.exports = {
  experimental: {
    headers() {
      return [
        {
          source: "/.well-known/apple-app-site-association",
          headers: [{ key: "content-type", value: "application/json" }]
        }
      ];
    }
  }
};