Downloading a PDF file in ReactJS works locally but doesn't work on Amazon Amplify AWS

Question

I have already found the solution to this issue and it is included in this post. This is just to alert anyone who is suffering through the same issue.

The Problem: I was trying to get a PDF to download in my react app. This is the embedded code for the download:

import ResumePDF from "../../files/Resume.pdf";

// somewhere in a react functional component...
<a href={ResumePDF} target="_blank" rel="noreferrer" download="zolyomi_resume.pdf">
    <Button>download</Button>
</a>

Now, I verified that the file was in the correct location and was being imported properly. Indeed, when I ran this locally, it had no issues whatsoever. The problem came when I deployed to AWS Amplify (committed to the linked github repo).

The Solution: In AWS Amplify, there is a specific portion of the App Settings where you specify that certain file types are linked to certain extensions.

Basically, you have to specify that the .pdf file is a valid form of redirectable file.

1. Head to your AWS Amplify console
2. Navigate to the app having the issue
3. Select Rewrites and Redirects from the left sidebar

4. Edit the rewrite that looks like a long Regex string. The pdf extension is not included in this list by default, so you have to add it. After the word css (or any other file extension) add the following: |pdf. Make sure that you keep this as a rewrite and not a redirect. It should look like this:

5. Save, ensure it updates in the console, and then refresh the page. It should work now.

TL;DR Amazon Amplify makes you specify file types that are redirectable. By default, PDF is not. Other file types besides css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json are not either, so you have to add them in yourself.

Answer 1

The fundamental issue here is that your aws amplify is missing an entry in the rewrites & redirects section. The default configuration for your app will have the following:

• source address -> </^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/> with corresponding target address -> /index.html.

If you look more closely, the regex allows only certain file-types - and pdf is NOT a part of it. You can simply edit this row and change the source address to </^[^.]+$|\.(?!(pdf|css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>. Notice that I have pre-fixed it with pdf| ... this should provide you the needed fix.

You can access the redirects section by going to your aws amplify app's home page, and then go to the app settings -> rewrites & redirects.

IMO the above is a hot-fix, and not a clean solution. A big pdf file can create packaging and serving troubles for you. The correct way to go about this is to drop these files into your object-store S3 and configure the redirects correctly. You can read more about redirects here. You can even automate these steps in your amplify.yml's pre-build steps.