title: Downloading a PDF file in ReactJS works locally but doesn't work on Amazon Amplify AWS
body: <p>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.</p>
  <p><strong>The Problem</strong>:
  I was trying to get a PDF to download in my react app.
  This is the embedded code for the download:</p>
  <pre class="lang-js prettyprint-override"><code>import ResumePDF from &quot;../../files/Resume.pdf&quot;;
  
  // somewhere in a react functional component...
  &lt;a href={ResumePDF} target=&quot;_blank&quot; rel=&quot;noreferrer&quot; download=&quot;zolyomi_resume.pdf&quot;&gt;
      &lt;Button&gt;download&lt;/Button&gt;
  &lt;/a&gt;
  </code></pre>
  <p>Now, I verified that the file <strong>was in the correct location</strong> and was being imported properly. Indeed, when I ran this <em>locally</em>, it had no issues whatsoever. The problem came when I deployed to AWS Amplify (committed to the linked github repo).</p>
  <p><strong>The Solution</strong>:
  In AWS Amplify, there is a specific portion of the <em>App Settings</em> where you specify that certain file types are linked to certain extensions.</p>
  <p>Basically, you have to <strong>specify</strong> that the .pdf file is a valid form of redirectable file.</p>
  <ol>
  <li>Head to your AWS Amplify console</li>
  <li>Navigate to the app having the issue</li>
  <li>Select Rewrites and Redirects from the left sidebar</li>
  </ol>
  <p><a href="https://i.stack.imgur.com/tae8pm.png" rel="noreferrer"><img src="https://i.stack.imgur.com/tae8pm.png" alt="Rewrites and Redirects" /></a></p>
  <ol start="4">
  <li>Edit the rewrite that looks like a long Regex string. The pdf extension is <strong>not included in this list</strong> by default, so you have to add it. After the word <code>css</code> (or any other file extension) add the following: <code>|pdf</code>. Make sure that you keep this as a <code>rewrite</code> and not a <code>redirect</code>. It should look like this:</li>
  </ol>
  <p><a href="https://i.stack.imgur.com/wXU6d.png" rel="noreferrer"><img src="https://i.stack.imgur.com/wXU6d.png" alt="long text" /></a></p>
  <ol start="5">
  <li>Save, ensure it updates in the console, and then refresh the page. It should work now.</li>
  </ol>
  <p><strong>TL;DR</strong> Amazon Amplify makes you specify file types that are redirectable. By default, PDF is not. Other file types besides <code>css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json</code> are not either, so you have to add them in yourself.</p>