i created a create-react-app
and want to use filetypes like webp
or mp3
.
When i run my application on localhost via npm run start
everything works fine, but after my deployment on my server (which uses npm run build
and delivers the build folder) it doesn't load filetypes like mp3
or webp
anymore. Why is this happening? i think its any simple configuration in react or anything like that, but i cant solve this problem by my own. Thanks for your help.
CodePudding user response:
The issue may be with typescript (if that is what you're using). Typescript will convert .ts
and .tsx
files to .js
, but not move most other files over to build
. If they are in a separate assets
directory, you have to ensure that gets deployed too. If this is the issue, you have a few choices.
You can manually move the files over to build
as a 'post' deploy step (using say, a shell script).
You can use a bundler like webpack
to help you maintain the references to those other assets and bundle them correctly.
CodePudding user response:
I finally found the problem that caused this behaviour. Amazon AWS Amplify creates a rewrite rule for single page applications (SPA). You can find this setting under Rewrites and redirects
in your Amplify application settings. There you will find a rewrite rule with following source address:
</^[^.] $|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.] $)/>
...change it to...
</^[^.] $|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json|mp3)$)([^.] $)/>
... for example, to allow mp3 files. This is also important to allow webp-Images or woff2-Fonts.