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 JSON file externally using AWS S3, Firebase, or Vercel, ensuring it has the correct
Content-Type. - Use a backend proxy like Cloudflare Workers or Netlify Functions to serve the file indirectly.
- Host on a custom subdomain using a separate server if available.
- Webflow does not support root-level JSON uploads, so uploading inside Webflow may cause issues.
Webflow does not support direct uploads of JSON files to the root directory, which is required for apple-app-site-association.json to enable features like Universal Links. Below are the best workarounds to achieve this.
1. Use a Third-Party Hosting Service
- Host the file externally on a service like AWS S3, Firebase, or Vercel.
- Ensure it is served with the
Content-Type: application/jsonheader. - Some services require paid plans to serve the file at the root domain.
2. Host It via an API Proxy
- Use a backend service like Cloudflare Workers or Netlify Functions to proxy the request.
- This method allows serving the file as required by Apple from your Webflow domain indirectly.
3. Use a Custom Domain with a Server
- If you have access to a separate hosting service, add a subdomain (e.g.,
api.yoursite.com) and host the file there.
4. Consider Webflow Limitations
- Webflow does not allow root-level JSON file uploads.
- Attempting to upload
.jsoninside Webflow’s Assets panel will serve it incorrectly, often interfering with Lottie animations.
Summary
Webflow does not support direct hosting of apple-app-site-association.json at the root. The best solution is to use an external hosting service or a proxy setup via Netlify, Cloudflare, or another provider capable of serving root-level JSON files with the correct MIME type.