CODEWITHSUNDEEP
javascripthtmlnode.jsreactjsaws-amplify
Lam
Lam

Reputation: 31

File works on React Webpack on localhost but does not work after pushed to AWS Amplify

I'm developing an app with React.js and I'm trying to host some pdf files on amplify, when I try to run it on localhost/3000 it works perfectly, I can read the pdf file like normal, new tab or embedded with html. But after I pushed it to github to run it on Amplify, I can't seem to access the pdf file anymore, neither embedded nor opening a new tab works.

First I import my resume in with Javascript

import myResume from '../assets/Lam-Dec-24.pdf'

Then I tried

<a href={myResume} style={{ color: "#1c1c1e" }} rel="noopener noreferrer" target="_blank">

<embed src={myResume} width="100%" height="1500px" />

I even moved the pdf files to the public folder and then I tried these with

src="%PUBLIC_URL%/Lam-Dec-24.pdf"

However nothing seems to work, and console doesn't throw any error whatsoever. Any suggestions on how to solve this?

Upvotes: 3

Views: 658

Answers (1)

Guilherme Batista
Guilherme Batista

Reputation: 11

It's difficult to say based on the amount of information provided, but my bet is that you followed AWS Amplify's documentation a long time ago and forgot about the Rewrites and redirects part. (It happened to me)

Just go to your Amplify Rewrites and redirects page and check if you have the following Source Address:

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

Notice that for it to work properly you need to add pdf (or any other ext that you want the user to be able to open directly) to the regex group.

Explanation

Most SPA (eg: React) frameworks support HTML5 history.pushState() to change browser location without triggering a server request. This works for users who begin their journey from the root (or /index.html), but fails for users who navigate directly to any other page. Using regular expressions, the following example sets up a 200 rewrite for all files to index.html except for the specific file extensions specified in the regular expression. Extracted from : https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html

Upvotes: 1

Related Questions