Search code examples
flutterdartflutter-web

Getting 404 errors on getting resources after deploying Flutter Web project into Azure Web

I got this error 404 which is not loading my resources and assets from my created flutter web application after deploying into Azure web app.

See the example photo: Browser console log

I use FTP method to upload files and used FileZilla as my tool. I upload all the files include in this generated files after running "flutter build web"

build/web/all_my_files

I already configured properly my pubspec.yaml file.

Note: This works all fine on GitHub pages but after I tried to deploy on azure this happens and I don't know why.

Solution

  • The web.config should be configured with the other external static files like .json. It should be deployed beside the Flutter index.html file.

    The web.config should be like the following:

    <?xml version="1.0"  encoding="utf-8" ?>
  
<configuration>
    <system.webServer>
        <staticContent>
            <!-- JSON Manifests -->
            <mimeMap fileExtension=".json" mimeType="application/json" />
            <!-- Fonts -->
            <mimeMap fileExtension=".otf" mimeType="application/octet-stream" />
            <mimeMap fileExtension=".ttc" mimeType="application/octet-stream" />
            <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
            <mimeMap fileExtension="woff" mimeType="application/font-woff" />
            <mimeMap fileExtension="woff2" mimeType="application/font-woff2" />
        </staticContent>
    </system.webServer>
</configuration>