AppClipQuickStart

Instructions on how to make and publish an app clip. This will eventually get cleaned up and transformed into an article.

  1. Add a new target

File -> New -> Target

  1. Choose “App Clip,” then hit Next

Screen Shot 2021-04-03 at 3 18 51 PM

  1. Fill in the name of your app clip (I did “MyCoolAppClip”)

Screen Shot 2021-04-03 at 3 19 50 PM

  1. Press Activate

Screen Shot 2021-04-03 at 3 20 22 PM

  1. Your project navigator should look like this:

Screen Shot 2021-04-03 at 3 21 23 PM

  1. Now add, edit, and make the App Clip just like you would for a normal Xcode project. For example, I added this inside MyCoolAppClip -> ContentView.swift:

struct ContentView: View {
    var body: some View {
        Text("Hello, world! This is an app clip")
            .padding()
    }
}

Screen Shot 2021-04-03 at 3 22 57 PM

  1. Once you’re done. it’s time to configure the URLs. First, go to Project Settings -> Targets -> MyCoolAppClip -> Signing and Capabilities -> + Capability.

Screen Shot 2021-04-03 at 3 23 50 PM

  1. In the popup, select “Associated Domains”.

Screen Shot 2021-04-03 at 3 26 01 PM

  1. Add your domain inside the text field, in the form of appclips:<DOMAIN_NAME>. Mines is appclips:getfind.app.

Important!

I’m pretty sure you need to own a custom domain first. I bought a domain, getfind.app, then linked it to GitHub Pages. You should also buy a domain (https://yourwebsite.com) first.

Screen Shot 2021-04-03 at 3 26 48 PM

  1. That’s all you need on the app side. Now, it’s time to configure the web page where the app clip will be launched from. You’ll need a place to host an apple-app-site-association file.
  2. I used GitHub Pages, because it’s free. I’ve already set up everything in this repo, so click Use this template at the top of this page. Enter a name for your repo (I did “MyAppClipWebsite”).
Use this template Make sure to check “Include all branches”
Screen Shot 2021-04-03 at 3 33 11 PM Screen Shot 2021-04-03 at 3 33 30 PM

Then, link your newly-generated repo to your custom domain:

Instructions to link your GitHub pages website to your custom domain

  1. Enable GitHub Pages in the Settings tab of the newly-made repo. Select branch GitHubPages and / (root) folder.

Screen Shot 2021-04-03 at 3 42 44 PM

  1. Select the “GitHubPages” branch, then check out the apple-app-site-association file.

---
layout: none
permalink: .well-known/apple-app-site-association
---

{
    "appclips": {
        "apps": [
            "YA533DMD5J.aheze.AppClipQuickStart.Clip
        ]
    }
}
  1. Replace YA533DMD5J with your own Team ID. You can find this at:
https://developer.apple.com/account/#/membership/

Screen Shot 2021-04-03 at 3 39 07 PM

  1. Also, replace aheze.AppClipQuickStart.Clip with your app clip’s Bundle ID. You can find this inside Xcode, at Project Settings -> Targets -> MyCoolAppClip -> Signing and Capabilities -> Bundle Identifier.

Screen Shot 2021-04-03 at 3 41 08 PM

  1. Wait a little bit, then try going to https://YOURGITHUBUSERNAME.github.io/MyAppClipWebsite/.well-known/apple-app-site-association (replace MyAppClipWebsite with the name of your newly-generated repo). Your browser should download that file, which should look something like this:

Screen Shot 2021-04-03 at 3 46 40 PM

If you linked GitHub Pages to your custom domain correctly, you should also be able to download the file at https://yourwebsite.com/.well-known/apple-app-site-association. For example, going to https://getfind.app/.well-known/apple-app-site-association will download the file.

  1. That’s all you need. Now, once you upload your app to App Store Connect, you should be able to configure your app clip.

Screen Shot 2021-04-03 at 3 47 43 PM

  1. Once your app has been approved, try going to https://yourwebsite.com. You should see the app clip!

That should be it. You can find a live example at getfind.app.

If you have any questions, here’s my contact info:

GitHub

View Github