Using CloudKit JS for a React web app

Question

egiadans OP

Created Jan ’24

Replies 1

Boosts 2

Participants 2

Hello, everyone!

I'm currently working in creating a new web app that will replicate the functionalities of an existing iOS and Mac app.

However, since those apps rely on CloudKit to manage all user information, we decided on using CloudKit JS as our backend for our web app. The framework we chose for developing our frontend is React.

The question is, since this documentation only mentions the CloudKit JS usage through a CDN (embedded directly in the HTML file) I wanted to ask:

is there a "suggested" method for using CloudKit JS in a React project other than importing the CDN in the main html file?
in case not, should we use a "traditional" server to access data like they suggest in this thread?

All your help will be very much appreciated.

Best regards, Eduardo

Boost

Answer 1

steveharrison OP

Sep ’24

Hey Eduardo,

There's a library on npm, https://github.com/typescriptlibs/tsl-apple-cloudkit, that allows you to import the CloudKit JS library into your app using an ES6 import like so:

import * as CloudKit from 'tsl-apple-cloudkit';

Your bundler will then combine that with your other dependencies (like React) and your application code, rather than having to include the CloudKit JS script tag separately and then wait for it to load.

tsl-apple-cloudkit also gives you TypeScript types for most of the library functions.

I've written an example app using tsl-apple-cloudkit + Next.js + React + TailwindCSS: https://github.com/steveharrison/cloudkitjs-examples/tree/main/nextjs-cloudkit.

It's definitely not intuitive using CloudKit JS, so I've written a guide on it here: https://www.steveharrison.dev/exploring-cloudkit-js/. (It includes a section on the Next.js demo app.)

I've been accessing CloudKit using a client-side token, and this works perfectly fine if you just need the data on the Front End. If you want to manipulate the data on the Back End / combine with other server-side logic then the server-side token would be a good choice for that.

Hope this helps—let me know if you have any more questions!

1