Overview

The Scriptable TS Boilerplate is designed to make creating iOS widgets with the Scriptable App more fun and efficient. It offers hot-loading widgets served by Next.js, the safety of TypeScript, build and compilation configurations, and easy deployment to Vercel. With this boilerplate, users can easily create and update widgets for the Scriptable App.

Features

• Hot-loading widgets served by Next.js: Users can enjoy the convenience of hot-loading widgets, which means they can see changes to their widgets in real-time without manually refreshing.
• TypeScript safety: The use of TypeScript ensures that the code is strongly typed, reducing the likelihood of bugs and improving code maintainability.
• Build, compile, rollup and other configs: The boilerplate provides various configurations and build tools to streamline the development process.
• Easy deployment to Vercel: Users can easily deploy their widgets to the Vercel platform, making them accessible online.
• Automatic updates for live widgets: By pushing code changes to the main branch, users can automatically update their deployed widgets, ensuring users always have the latest version.

Installation

To start using the Scriptable TS Boilerplate, follow these steps:

1. Clone the project.
2. Link your GitHub account to Vercel and make the new project available to Vercel.
3. During the setup process, choose the subdirectory “scriptable-api”.
4. Once the setup is complete, you can start creating and updating your widgets.

To write and compile a new widget:

1. Create a new widgetModule in the ./widgets/code/widget-module directory.
2. Compile your widget by running either yarn build or yarn watch in the ./widgets directory.
3. Serve your widget by running yarn dev in the ./scriptable-api directory.
4. Your compiled widget should now be available on YOUR_LOCAL_DNS_NAME:3000/compiled-widgets/widget-modules/camelCasedName.js.

To load the widget on your device for the first time:

1. Copy the compiled WidgetLoader file (./scriptable-api/public/compiled-widgets/widgetLoader.js or from the demo site).
2. Paste the WidgetLoader into Scriptable with the necessary arguments and click play.

To iterate the widget:

1. Keep yarn watch running in the ./widgets directory.
2. Keep yarn dev running in the ./scriptable-api directory.
3. Any changes made to the widget code will be immediately reflected on your device.

Summary

The Scriptable TS Boilerplate is a helpful tool for developers who are creating iOS widgets with the Scriptable App. It offers features such as hot-loading widgets served by Next.js, TypeScript safety, build and compilation configurations, easy deployment to Vercel, and automatic updates for live widgets. The installation process is straightforward, and developers can start creating and iterating their widgets with ease.