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.