How to use the cloudform.Fn.Ref 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"]);

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
        ])
    }
});

const template = {
        Description: `core-${pascalCaseDomainName(config.ROOT_DOMAIN)}`,
        Parameters: {
            RootDomain: {
                Description: "Root domain at which the system is hosted.",
                Type: "String",
                Default: config.ROOT_DOMAIN
            }
        },
        Resources: {
            HostedZone
        },
        Outputs: {
            HostedZoneId: {
                Description: `HostedZoneId for ${config.ROOT_DOMAIN}`,
                Value: Fn.Ref("HostedZone"),
                Export: {
                    Name: `${pascalCaseDomainName(config.ROOT_DOMAIN)}HostedZone`
                }
            }
        }
    };

    if (!(await apiGatewayAccountExists())) {
        (template.Resources as any).ApiGatewayAccount = ApiGatewayAccount;
        (template.Resources as any).ApiGatewayPolicy = ApiGatewayPolicy;
        (template.Resources as any).ApiGatewayRole = ApiGatewayRole;
    }

    if (deployCert) {
        (template.Resources as any).Certificate = Certificate;
        (template.Outputs as any).Certificate = {

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;
};

}
            }
        }
    };

    if (!(await apiGatewayAccountExists())) {
        (template.Resources as any).ApiGatewayAccount = ApiGatewayAccount;
        (template.Resources as any).ApiGatewayPolicy = ApiGatewayPolicy;
        (template.Resources as any).ApiGatewayRole = ApiGatewayRole;
    }

    if (deployCert) {
        (template.Resources as any).Certificate = Certificate;
        (template.Outputs as any).Certificate = {
            Description: `SSL Certificate covering *.${config.ROOT_DOMAIN}`,
            Value: Fn.Ref("Certificate"),
            Export: {
                Name: `${pascalCaseDomainName(config.ROOT_DOMAIN)}Certificate`
            }
        };
    }

    return template;
};

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 { 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");