ReactJs Application returning 404 Not Found for a static file

Question

I have a ReactJs application that was created using react-create-app. I have deployed my application to an Azure App Service Plan (sku F1).

When running the application in local host the background video runs as expected. However, after deployment I find that the server is returning a 404 not found for my .mp4 file (and thereby not loading the background video as expected).

Debug Console in browser showing 404 on load of .mp4

Request General Info:

Request URL: https://abouthorusrm.azurewebsites.net/static/media/typing.203864c7a88151d96941.mp4
Request Method: GET
Status Code: 404 Not Found
Remote Address: 13.89.172.5:443
Referrer Policy: strict-origin-when-cross-origin

Request Headers:

Accept: */*
Accept-Encoding: identity;q=1, *;q=0
Accept-Language: en-US,en;q=0.8
Connection: keep-alive
Cookie: ARRAffinity=f4edef8e8ae33d792aa347f6380e743b9805a4dd08725995c30ae1f829052383;ARRAffinitySameSite=f4edef8e8ae33d792aa347f6380e743b9805a4dd08725995c30ae1f829052383
Host: abouthorusrm.azurewebsites.net
Range: bytes=0-
Referer: https://abouthorusrm.azurewebsites.net/
Sec-Ch-Ua: "Not/A)Brand";v="99", "Brave";v="115", "Chromium";v="115"
Sec-Ch-Ua-Mobile: ?0
Sec-Ch-Ua-Platform: "Windows"
Sec-Fetch-Dest: video
Sec-Fetch-Mode: no-cors
Sec-Fetch-Site: same-origin
Sec-Gpc: 1
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36

Response Headers:

Content-Length:103
Content-Type: text/html
Date: Sun, 06 Aug 2023 21:41:53 GMT
Server: Microsoft-IIS/10.0
X-Powered-By: ASP.NET

I am expecting this file to load and display the .mp4 file as a background of my web app.

The file that is returning 404 is located in the optimized build folder of my react app at the following path:

build/static/media/typing.203864c7a88151d96941.mp4

And I have verified (via Kudu) that the file with the same case-sensitive naming is located on the server at the following path:

C:\home\site\wwwroot\static\media\typing.203864c7a88151d96941.mp4

Screenshot of Web Server filesystem in kudu

I have attempted to add a web.config file to the server to allow .mp4 mime types with the following content:

<configuration>
   <system.webServer>
         <staticContent>
            <mimeMap fileExtension=".mp4" mimeType="video/mp4" />
            <mimeMap fileExtension=".webm" mimeType="video/webm" />
            <mimeMap fileExtension=".svg" mimeType="image/svg+xml">
         </staticContent>
   </system.webServer>
</configuration>

This, however, did not resolve the issue at hand.

Strangely enough, there is an .svg file that is being referenced from this same directory that renders without issue.

Debug Console in browser showing successful load of .svg in same directory as .mp4

Answer 1

I have tried with the same Approach that which you have provided and got the same error.

I have modified the code as below. In App.js file added the source for .mp4.

App.js:

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Welcome to React MP4 App</h1>
      <video controls autoPlay loop className="background-video">
        <source src="/sample-mp4-file-small.mp4" type="video/mp4" />
        Your browser does not support the video tag.
      </video>
      <p>This is a sample React app with an MP4 video.</p>
    </div>
  );
}

export default App;

App.css:

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Local:

• I have deployed React app to azure app service successfully.

• File structure path in KUDU:

Output:

Further any clarification required refer this SO link.