Webflow sync, pageviews & more.
NEW

How can I upload and host the "apple-app-site-association.json" file on Webflow without encountering any issues related to lottie?

TL;DR
  • Host the apple-app-site-association file externally (e.g., Netlify, Vercel, Firebase) at exactly /.well-known/apple-app-site-association with MIME type application/json and no redirects.
  • Use a reverse proxy (e.g., Cloudflare Workers) to serve the file correctly from your domain since Webflow cannot manage path or MIME type requirements.

To host the apple-app-site-association.json file on Webflow, you must work around Webflow's limitations on file hosting—specifically, that it doesn't support serving JSON files at the root level or with the correct application/json MIME type by default.

1. Understand the Requirements

  • Apple expects the apple-app-site-association file to be located at exactly:
    https://yourdomain.com/.well-known/apple-app-site-association
  • No extension (not .json)
  • Must be served with the correct Content-Type: application/json
  • Cannot be redirected or proxied
  • Hosting options like Lottie JSON in Webflow are handled as file downloads with incorrect MIME type or path and will not work

2. Limitations of Hosting JSON on Webflow

  • Webflow doesn't allow placing files at the root (/.well-known/) or changing MIME types.
  • Uploading a .json file via the Webflow Asset Manager is treated as a downloadable asset, not a server-hosted file.

3. Use a Workaround with an External Hosting Service

You need to host the file externally and point to it properly:

  • Use a server or static file hosting provider:
  • GitHub Pages
  • Firebase Hosting
  • Netlify
  • Vercel
  • AWS S3 with CloudFront
  • Ensure correct path and MIME type:
  • File URL must be: https://yourdomain.com/.well-known/apple-app-site-association
  • MIME type must be application/json
  • Set up domain correctly:
  • If you're using a custom domain in Webflow (e.g., yourdomain.com), you'll need to handle /.well-known routing outside Webflow

4. Best Practice: Use a Reverse Proxy

Since Webflow cannot serve this file directly, use a proxy:

  • Set up a reverse proxy in Cloudflare Workers, Netlify functions, or Vercel edge functions
  • Redirect requests from /.well-known/apple-app-site-association to your hosted file
  • Ensure:
  • No redirects, Apple doesn’t follow them
  • Hosted file returns HTTP 200 with the correct application/json content type

If hosting the file correctly is too complex and you're only testing, consider using Firebase Dynamic Links or another platform that abstracts these requirements.

Summary

Webflow cannot correctly host the apple-app-site-association file due to routing and MIME type limitations. To implement Universal Links, host this file externally (e.g., Netlify, Vercel) and point to it with a reverse proxy or DNS setup. Webflow’s built-in asset hosting and Lottie support are not compatible with this specific Apple requirement.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Can Webflow be used to create blogs as a part of a website? If so, what is the process for building a blog into a Webflow site?
How can I create a similar effect for charts and graphs in Webflow?
How can I use Webflow to dynamically adjust the column numbers and content order based on different devices and views?
How do I make a contact-slide-in-sidebar scrollable in Webflow on mobile devices? Also, how can I coordinate the actions of two triggers so they don't bug when opening and closing the sidebar?
Can Facebook Messenger be added to a Webflow website?
How can I fix the issue of having a small amount of background image below the fold on mobile browsers in Webflow? I have tried using custom CSS and JavaScript codes, but it did not work.
How can I disable autoplay and enable hover-based play for background videos in Webflow?
How can I integrate Google Analytics into my Webflow website and track specific button clicks using the event tracking feature?
What is your process for hosting client websites outside of Webflow to increase revenue and make your agency more profitable, especially for non-CMS websites? Can you please provide information on where you host it, the disadvantages of doing this, and any other considerations to keep in mind? Additionally, if you recommend using another CMS for external hosting, what CMS would you suggest for someone who has only worked with Webflow?
How can I vertically center a container inside a section in Webflow? Thanks.
How can I create an initial scroll to activate an anchor point to a second section of a page in Webflow?
How can I change the image within a link block when hovering over it in Webflow?
Is it possible to change the color of the placeholder text in a Webflow form to make it more visible?
How can I make a background video fullscreen on Webflow, specifically on screens with a resolution of 1920px and above, while still maintaining full screen on all other resolutions? The video I have is 1920x1080 and I don't mind if it appears pixelated on larger resolutions as long as it fills the screen. Why is it so difficult to achieve this? I work with game engines but I'm still struggling with this tool.
How can I fix the "Uncaught ReferenceError: $ is not defined" and "Uncaught SyntaxError: Unexpected token <" errors on my Webflow site?
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I dynamically redirect to a CMS created after form submission in Webflow?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!
How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?