
Setting Up Deep Linking in Angular with AWS Amplify Hosting
Navigating the Challenges of Deep Linking in Angular with AWS Amplify Hosting
apple-app-site-association
file, and for Android, it's handled by the assetlinks.json
file. These files need to be hosted properly in the root of your web server, under a .well-known/
directory, and that’s where AWS Amplify comes into play if you are using Amplify hosting for Angular project.apple-app-site-association
file should be placed inside the src/assets/.well-known/
directory. This allows Angular to copy the file into the build output, ensuring it gets served correctly when the app is deployed.1
2
3
4
src/
assets/
.well-known/
apple-app-site-association
apple-app-site-association
file should look like this:1
2
3
4
5
6
7
8
9
10
11
{
"applinks": {
"apps": [],
"details": [
{
"appID": "TEAM_ID.BUNDLE_ID",
"paths": ["*"]
}
]
}
}
*
means any path within the app can be opened via a deep link.angular.json
file.assets
section of your angular.json
file, you need to add an entry for the .well-known
directory to ensure it’s copied during the build process:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
"architect": {
"build": {
"options": {
"assets": [
"src/favicon.ico",
"src/assets",
{
"glob": "**/*",
"input": "src/assets/.well-known",
"output": "/.well-known/"
}
]
}
}
}
}
.well-known
folder (and everything inside it) is copied into the root of the final build output.apple-app-site-association
with the correct headers, and it also doesn’t automatically rewrite URLs to .json
format when needed..well-known/apple-app-site-association
to be rewritten to .well-known/apple-app-site-association.json
. While this worked fine for that specific URL, the rest of the website went down for about two hours. It took me a while to realize that the order of the rewrite rules was causing the problem..well-known
rule first, followed by other rules for the rest of the website. However, this sequence made the Amplify rewrite engine get stuck, causing an issue where the website would not load as expected. Although the .well-known
URL was working fine, the other pages were not. It was a frustrating situation, and I realized that the sequence of the rewrite rules was the root cause of the issue.- I placed the
.well-known
rule first in the sequence. - Then, I added the rewrite rules to exclude
.well-known
and include other URLs for the rest of the website.
/apple-app-site-association
are correctly rewritten to .apple-app-site-association.json
. This step was important because iOS expects the file to be in .json
format, but users might request it without the extension.1
2
3
4
5
{
"source": "/.well-known/apple-app-site-association",
"target": "/.well-known/apple-app-site-association.json",
"status": "200"
}
index.html
for proper routing in the Angular app:1
2
3
4
5
{
"source": "/^(?!\.well-known/)(?!.*\.(css|js|jpg|jpeg|png|gif|svg|woff|ttf|eot|ico|mp4|mp3|json)$).*",
"target": "/index.html",
"status": "200"
}
index.html
page, which is typical for single-page applications (SPAs) built with Angular.apple-app-site-association
file should be served, and everything worked as expected:https://your-amplify-app-url/.well-known/apple-app-site-association
I verified that the file was accessible and confirmed that it was being served with the correct content type and caching headers.
apple-app-site-association
file is being served correctly, you can use Apple's verification tool:https://app-site-association.cdn-apple.com/a/v1/yourdomain.com
This URL should return the contents of the
apple-app-site-association.json
file and show that it's being served with the correct Content-Type
(application/json
). If it works, your iOS deep linking is correctly configured.assetlinks.json
file in the same .well-known/
directory. The process is very similar to what we’ve done for iOS, and once set up, deep linking will work seamlessly across both platforms.