Recently, I needed to deploy a Flutter app directly on the Web. Since Flutter 2.0, It has been fairly simple to add Web support to an existing app.

I decided to write a small article in order to share my finding about how to host a Flutter Web app and an ++code>apple-app-site-association++/code> file on the same Firebase hosting deploy. This file is needed to provide Universal Link on iOS.

At the end of the article you will be able to deep link into iOS without needing a custom scheme thanks to Firebase Hosting!

Compile the app for the Web

Firstly, you need to add the Web support to your app.

To add web support to an existing you can run this command in your project folder with Flutter 2:

++pre>++code data-line-start="15" data-line-end="17">flutter create .
++/code>++/pre>

It will add a ++code>web++/code> folder. It will then be a matter of updating your packaging or following specific web instructions.

For instance, an app with more than 25 packages took only 30 minutes to migrate to Flutter Web. You only need to go through each package of your ++code>pubspec.yaml++/code> file and check if the package is compatible for the web or add the correct ++code>kIsWeb++/code> condition.

Once everything is updated to support Flutter Web, you can run this command:

++pre>++code data-line-start="25" data-line-end="27">flutter build web
++/code>++/pre>

If everything is successful you'll have a folder ++code>web++/code> in the ++code>build++/code> folder!

Deploy to Firebase Hosting

For this second step, you need to activate Firebase Hosting directly on the Firebase console. Once it's done, you can run the

++pre>++code data-line-start="35" data-line-end="37">firebase init
++/code>++/pre>

command and select the ++code>Hosting++/code> key by pressing space.

You can then select or create a Firebase project and choose these options:

++pre>++code data-line-start="45" data-line-end="49">? What do you want to use as your public directory? (public) build/web
? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) y
? Set up automatic builds and deploys with GitHub? (y/N) N
++/code>++/pre>

Once it's done, you can run the ++code>firebase deploy++/code> command to deploy your Website:

++pre>++code data-line-start="53" data-line-end="55">firebase deploy --only hosting
++/code>++/pre>

Add the apple-app-site-association file

Now we want to add the ++code>apple-app-site-association++/code> file in order to mutualize all the links to the same domain!

What I had to learn the hard way is that Apple outdated documentation is still living on the Apple website alongside the new documentation.
The example file I'll show you is valid as of today (July 2021) but it should stay within the same idea.

Add an ++code>apple-app-site-association++/code> in the ++code>web/.well-known/++/code> folder. The content of the file is the following:

++pre>++code data-line-start="66" data-line-end="87">{
 "webcredentials": {
   "apps": ["TEAMID.com.example.product"]
 },
 "applinks": {
   "apps": [],
   "details": [
     {
       "appID": "TEAMID.com.example.product",
       "paths": ["*"],
       "appIDs": ["TEAMID.com.example.product"],
       "components": [
         {
           "/": "/*"
         }
       ]
     }
   ]
 }
}
++/code>++/pre>

You'll have to replace the ++code>TEAMID++/code> with your Apple Team ID and the ++code>com.example.product++/code> with your bundle ID.

Then replace your ++code>firebase.json++/code> file (generated at the previous step at the root of your project) with this:

++pre>++code data-line-start="93" data-line-end="122">{
 "hosting": {
   "public": "build/web",
   "appAssociation": "NONE",
   "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
   "headers": [
     {
       "source": "/.well-known/apple-app-site-association",
       "headers": [
         {
           "key": "Content-Type",
           "value": "application/json"
         }
       ]
     }
   ],
   "rewrites": [
     {
       "source": "/.well-known/apple-app-site-association",
       "destination": "/.well-known/apple-app-site-association"
     },
     {
       "source": "**",
       "destination": "/index.html"
     }
   ]
 }
}
++/code>++/pre>

You can then rebuild you ++code>build/web++/code> with the ++code>firebase build web++/code> command.

Once the compilation finished, you can relaunch your deploy command:

++pre>++code data-line-start="128" data-line-end="130">firebase deploy --only hosting
++/code>++/pre>

The ++code>apple-app-site-association++/code> should be present on your website at https://project-id.web.app/.well-known/apple-app-site-association.

You can use this tool to check if the ++code>apple-app-site-association++/code> is properly setup.

Conclusion

I tried to summarise and condense a maximum of my experience. If you need any more clarification don't hesitate to ping me on Twitter @BeGuillaume.

Have a nice day!