///
This guide provides step-by-step instructions to set up and run the TRMNL Salah Prayer Times Plugin project locally for development and testing.
190 views
~190 views from guests
Guest views are estimated from total page views. These include anonymous visitors and users who weren't logged in when they viewed the page.
This guide provides step-by-step instructions to set up and run the TRMNL Salah Prayer Times Plugin project locally for development and testing.
Before you begin, ensure you have the following installed and configured:
npm install -g yarn.npm install -g serverless.serverless-offline, this is not strictly necessary but required for full deployment.The project leverages a robust set of libraries and tools:
To integrate the plugin with your TRMNL device, you need to register it in the TRMNL dashboard:
Log in to your TRMNL account and navigate to the plugin creation page: https://usetrmnl.com/plugins/my/new↗.
Configure the new plugin with the following details. Note that your-api-gateway-url refers to the endpoint URL of your deployed backend (e.g., from yarn serverless:deploy), not your local serverless-offline URL, as physical TRMNL devices cannot access local endpoints directly.
Salah TimesIslamic prayer times & Hijri date for TRMNLhttps://your-api-gateway-url/installhttps://your-api-gateway-url/installation-successhttps://your-api-gateway-url/managehttps://your-api-gateway-url/plugin-markupSupabase is used to store user-specific settings for the plugin.
user_settings table. Although the schema.sql file is not directly included in the provided content, the user_settings table should be created with the following structure (refer to src/clients/supabase/database.types.ts for a full schema definition if needed):
uuid: text (Primary Key), stores the TRMNL user's unique ID.city: text, stores the user's preferred city.country: text, stores the user's preferred country.method: int, stores the prayer calculation method ID.timeformat: text ('12h' or '24h').asr_method: text ('standard' or 'hanafi').maghrib_offset: int, offset for Maghrib prayer in minutes.created_at: timestamp with time zone.updated_at: timestamp with time zone.insert and update for authenticated users or service roles, as appropriate.SUPABASE_URL)SUPABASE_SERVICE_KEY)The project requires several environment variables for both TRMNL integration and Supabase connectivity. Create a .env file in the project root or export them in your shell:
TRMNL_CLIENT_ID and TRMNL_CLIENT_SECRET: Obtain these from your TRMNL plugin settings after creation.SUPABASE_URL and SUPABASE_SERVICE_KEY: Obtained from your Supabase project settings.IS_OFFLINE: Set this to true to skip TRMNL authentication headers during local development with serverless-offline.Follow these steps to get the backend running locally:
Install Dependencies: Navigate to the project root and install all required dependencies:
Run Locally: To start the serverless backend locally using serverless-offline, execute:
This command will start a local API Gateway endpoint, typically at http://localhost:3000. You can then test your API endpoints, such as http://localhost:3000/prayer-times?city=London&country=UK.
Local Template Preview: For developing and testing the TRMNL plugin templates (.liquid files), the project includes a preview script that renders them in a local web server:
yarn preview:build: Compiles the templates into static HTML files for preview.yarn preview:serve: Starts a local web server (usually at http://localhost:3001) to serve the compiled templates.yarn preview:watch: Monitors changes in src/templates and automatically rebuilds the preview.yarn preview: Runs build, watch, and serve concurrently, providing a live-reloading development experience for templates.Once your backend is deployed (or at least your your-api-gateway-url is available from a previous cloud deployment), you can add the plugin to your TRMNL device:
Salah Times private plugin to your TRMNL playlists.https://your-api-gateway-url/prayer-times?city={city}&country={country}&method={method} (and other endpoints) to fetch prayer times and render them on your e-ink display.src/templates/trmnl-plugin/ (e.g., markup.html for full-screen, half-view-markup.html, quadrant-view-markup.html), define how the data is displayed. These are handled by the plugin-markup-handler and do not need to be manually copied to your TRMNL device; the TRMNL platform will fetch them from your configured Plugin Markup URL.