How to use the cloudform.Fn.Join function in cloudform

}
        },
        DefaultRootObject: "index.html",
        Enabled: true,
        HttpVersion: "http2",
        // Logging: {
        //     IncludeCookies: false,
        //     Bucket: '', // TODO:
        //     Prefix: '' // TODO:
        // },
        Origins: [
            {
                Id: "s3Origin",
                DomainName: Fn.GetAtt("ClientBucket", "DomainName"),
                S3OriginConfig: {
                    OriginAccessIdentity: Fn.Join("/", [
                        "origin-access-identity/cloudfront",
                        Fn.Ref("ClientOriginAccessIdentity")
                    ])
                }
            }
        ],
        PriceClass: "PriceClass_100", // PriceClass_100 | PriceClass_200 | PriceClass_All
        ViewerCertificate: {
            AcmCertificateArn: Fn.ImportValue(
                `${pascalCaseDomainName(config.ROOT_DOMAIN)}Certificate`
            ),
            MinimumProtocolVersion: "TLSv1.1_2016",
            SslSupportMethod: "sni-only"
        }
    }
}).dependsOn(["ClientBucket", "ClientOriginAccessIdentity"]);

export const BasePathMapping = (branch: string) => {
    const basePathMapping = new ApiGateway.BasePathMapping({
        RestApiId: Fn.Ref("ApiGateway"),
        DomainName: Fn.Join(".", [Fn.Ref("SubDomain"), config.ROOT_DOMAIN]),
        BasePath: Fn.Ref("BasePath"),
        Stage: Fn.Ref("GitHubBranch")
    });

    if (branch === "master") {
        basePathMapping.dependsOn("DomainName");
    } else {
        basePathMapping.dependsOn("ApiGatewayStage");
    }

    return basePathMapping;
};

import { Route53, Fn } from "cloudform";
import { config } from "../../config";
import { pascalCaseDomainName } from "../../lib";

export const ServerRecordSet = new Route53.RecordSet({
    Name: Fn.Join(".", [Fn.Ref("SubDomain"), config.ROOT_DOMAIN]),
    Type: "A",
    HostedZoneId: Fn.ImportValue(`${pascalCaseDomainName(config.ROOT_DOMAIN)}HostedZone`),
    AliasTarget: {
        DNSName: Fn.GetAtt("DomainName", "DistributionDomainName"),
        HostedZoneId: Fn.GetAtt("DomainName", "DistributionHostedZoneId")
    }
}).dependsOn("DomainName");

import { S3, Fn } from "cloudform";

export const ClientBucketPolicy = new S3.BucketPolicy({
    Bucket: Fn.Ref("ClientBucket"),
    PolicyDocument: {
        Version: "2012-10-17",
        Statement: [
            {
                Sid: "Allow CloudFront read access",
                Effect: "Allow",
                Action: "s3:GetObject",
                Resource: Fn.Join("", [Fn.GetAtt("ClientBucket", "Arn"), "/*"]),
                Principal: {
                    CanonicalUser: Fn.GetAtt("ClientOriginAccessIdentity", "S3CanonicalUserId")
                }
            }
        ]
    }
}).dependsOn("ClientOriginAccessIdentity");

import { CloudFront, Fn } from "cloudform";
import { config } from "../../config";
import { pascalCaseDomainName } from "../../lib";

export const ClientDistribution = new CloudFront.Distribution({
    DistributionConfig: {
        Aliases: [Fn.Join(".", [Fn.Ref("SubDomain"), config.ROOT_DOMAIN])],
        Comment: Fn.Join("", [
            "cloudfront distribution for ",
            Fn.Ref("SubDomain"),
            ".",
            config.ROOT_DOMAIN
        ]),
        CustomErrorResponses: [
            {
                ErrorCachingMinTTL: 60,
                ErrorCode: 404,
                ResponseCode: 404,
                ResponsePagePath: "/index.html"
            }
        ],
        DefaultCacheBehavior: {
            AllowedMethods: ["GET", "HEAD"],
            TargetOriginId: "s3Origin",

import { CloudFront, Fn } from "cloudform";
import { config } from "../../config";
import { pascalCaseDomainName } from "../../lib";

export const ClientDistribution = new CloudFront.Distribution({
    DistributionConfig: {
        Aliases: [Fn.Join(".", [Fn.Ref("SubDomain"), config.ROOT_DOMAIN])],
        Comment: Fn.Join("", [
            "cloudfront distribution for ",
            Fn.Ref("SubDomain"),
            ".",
            config.ROOT_DOMAIN
        ]),
        CustomErrorResponses: [
            {
                ErrorCachingMinTTL: 60,
                ErrorCode: 404,
                ResponseCode: 404,
                ResponsePagePath: "/index.html"
            }
        ],
        DefaultCacheBehavior: {
            AllowedMethods: ["GET", "HEAD"],

import { CloudFront, Fn } from "cloudform";
import { config } from "../../config";
/**
 *
 * Fn.Ref('OriginAccessIdentity') returns access identity, such as E15MNIMTCFKK4C.
 * Fn.GetAtt('OriginAccessIdentity', 'S3CanonicalUserId') returns Amazon S3 canonical user ID
 *  - for example: b970b42360b81c8ddbd79d2f5df0069ba9033c8a79655752abe380cd6d63ba8bcf23384d568fcf89fc49700b5e11a0fd
 *
 */

export const ClientOriginAccessIdentity = new CloudFront.CloudFrontOriginAccessIdentity({
    CloudFrontOriginAccessIdentityConfig: {
        Comment: Fn.Join("", [
            `origin access identity for `,
            Fn.Ref("SubDomain"),
            ".",
            config.ROOT_DOMAIN
        ])
    }
});

import { Logs, Fn } from "cloudform";

export const LogGroup = new Logs.LogGroup({
    LogGroupName: Fn.Join("-", ["api-gateway-log-group", Fn.Ref("GitHubBranch")]),
    RetentionInDays: 30
});

import { Route53, Fn } from "cloudform";
import { config } from "../../config";
import { pascalCaseDomainName } from "../../lib";

export const ClientRecordSet = new Route53.RecordSet({
    Name: Fn.Join(".", [Fn.Ref("SubDomain"), config.ROOT_DOMAIN]),
    Type: "A",
    HostedZoneId: Fn.ImportValue(`${pascalCaseDomainName(config.ROOT_DOMAIN)}HostedZone`),
    AliasTarget: {
        DNSName: Fn.GetAtt("ClientDistribution", "DomainName"),
        HostedZoneId: "Z2FDTNDATAQYW2"
    }
}).dependsOn("ClientDistribution");