4

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.

1
  • exact same problem with Firebase Hosting! Flutter 3.19.6 flutter version with 13.11.4 firebase version. Commented Jun 23, 2024 at 19:13

1 Answer 1

3

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>

Sign up to request clarification or add additional context in comments.

2 Comments

Thanks sir, can I copy this one? Do I need to add or edit? Is this fine already?
Yes... you can copy it. No problem. You can edit it to add any other resource that gets 404 again but it's fine the way it is already.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.