{"id":23605932,"url":"https://github.com/phallguy/shallendar","last_synced_at":"2025-11-05T12:30:31.262Z","repository":{"id":268623222,"uuid":"904963809","full_name":"phallguy/shallendar","owner":"phallguy","description":"Tools for making calendars on Canva","archived":false,"fork":false,"pushed_at":"2024-12-17T22:21:56.000Z","size":173,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-12-27T13:13:48.185Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/phallguy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-17T22:18:50.000Z","updated_at":"2024-12-17T22:21:35.000Z","dependencies_parsed_at":"2024-12-17T23:33:58.664Z","dependency_job_id":null,"html_url":"https://github.com/phallguy/shallendar","commit_stats":null,"previous_names":["phallguy/shallendar"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phallguy%2Fshallendar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phallguy%2Fshallendar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phallguy%2Fshallendar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phallguy%2Fshallendar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/phallguy","download_url":"https://codeload.github.com/phallguy/shallendar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239458919,"owners_count":19642099,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-27T13:13:52.218Z","updated_at":"2025-11-05T12:30:31.175Z","avatar_url":"https://github.com/phallguy.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Canva App\n\nWelcome to your Canva App! 🎉\n\nThis is a starting point for your app using your chosen template. The complete documentation for the platform is at [canva.dev/docs/apps](https://www.canva.dev/docs/apps/).\n\n**Note:** This code and documentation assumes some experience with TypeScript and React.\n\n## Requirements\n\n- Node.js `v18` or `v20.10.0`\n- npm `v9` or `v10`\n\n**Note:** To make sure you're running the correct version of Node.js, we recommend using a version manager, such as [nvm](https://github.com/nvm-sh/nvm#intro). The [.nvmrc](/.nvmrc) file in the root directory of this repo will ensure the correct version is used once you run `nvm install`.\n\n## Quick start\n\n```bash\nnpm install\n```\n\n## Running your Canva App\n\n### Step 1: Start the local development server\n\nTo start the boilerplate's development server, run the following command:\n\n```bash\nnpm start\n```\n\nThe server becomes available at \u003chttp://localhost:8080\u003e.\n\nThe app's source code is in the `src/app.tsx` file.\n\n### Step 2: Preview the app\n\nThe local development server only exposes a JavaScript bundle, so you can't preview an app by visiting \u003chttp://localhost:8080\u003e. You can only preview an app via the Canva editor.\n\nTo preview an app:\n\n1. Create an app via the [Developer Portal](https://www.canva.com/developers/apps).\n2. Select **App source \u003e Development URL**.\n3. In the **Development URL** field, enter the URL of the development server.\n4. Click **Preview**. This opens the Canva editor (and the app) in a new tab.\n5. Click **Open**. (This screen only appears when using an app for the first time.)\n\nThe app will appear in the side panel.\n\n\u003cdetails\u003e\n  \u003csummary\u003ePreviewing apps in Safari\u003c/summary\u003e\n\nBy default, the development server is not HTTPS-enabled. This is convenient, as there's no need for a security certificate, but it prevents apps from being previewed in Safari.\n\n**Why Safari requires the development server to be HTTPS-enabled?**\n\nCanva itself is served via HTTPS and most browsers prevent HTTPS pages from loading scripts via non-HTTPS connections. Chrome and Firefox make exceptions for local servers, such as `localhost`, but Safari does not, so if you're using Safari, the development server must be HTTPS-enabled.\n\nTo learn more, see [Loading mixed-content resources](https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content#loading_mixed-content_resources).\n\nTo preview apps in Safari:\n\n1. Start the development server with HTTPS enabled:\n\n```bash\nnpm start --use-https\n```\n\n2. Navigate to \u003chttps://localhost:8080\u003e.\n3. Bypass the invalid security certificate warning:\n   1. Click **Show details**.\n   2. Click **Visit website**.\n4. In the Developer Portal, set the app's **Development URL** to \u003chttps://localhost:8080\u003e.\n5. Click preview (or refresh your app if it's already open).\n\nYou need to bypass the invalid security certificate warning every time you start the local server. A similar warning will appear in other browsers (and will need to be bypassed) whenever HTTPS is enabled.\n\n\u003c/details\u003e\n\n### (Optional) Step 3: Enable Hot Module Replacement\n\nBy default, every time you make a change to an app, you have to reload the entire app to see the results of those changes. If you enable [Hot Module Replacement](https://webpack.js.org/concepts/hot-module-replacement/) (HMR), changes will be reflected without a full reload, which significantly speeds up the development loop.\n\n**Note:** HMR does **not** work while running the development server in a Docker container.\n\nTo enable HMR:\n\n1. Navigate to an app via the [Your apps](https://www.canva.com/developers/apps).\n2. Select **Configure your app**.\n3. Copy the value from the **App origin** field. This value is unique to each app and cannot be customized.\n4. In the root directory, open the `.env` file.\n5. Set the `CANVA_APP_ORIGIN` environment variable to the value copied from the **App origin** field:\n\n   ```bash\n   CANVA_APP_ORIGIN=# YOUR APP ORIGIN GOES HERE\n   ```\n\n6. Set the `CANVA_HMR_ENABLED` environment variable to `true`:\n\n   ```bash\n   CANVA_HMR_ENABLED=true\n   ```\n\n7. Restart the local development server.\n8. Reload the app manually to ensure that HMR takes effect.\n\n## Running an app's backend\n\nSome templates provide an example backend. This backend is defined in the template's `backend/server.ts` file, automatically starts when the `npm start` command is run, and becomes available at \u003chttp://localhost:3001\u003e.\n\nTo run templates that have a backend:\n\n1. Navigate to the [Your apps](https://www.canva.com/developers/apps) page.\n2. Copy the ID of an app from the **App ID** column.\n3. In the starter kit's `.env` file, set `CANVA_APP_ID` to the ID of the app.\n\n   For example:\n\n   ```bash\n   CANVA_APP_ID=AABBccddeeff\n   CANVA_APP_ORIGIN=#\n   CANVA_BACKEND_PORT=3001\n   CANVA_FRONTEND_PORT=8080\n   CANVA_BACKEND_HOST=http://localhost:3001\n   CANVA_HMR_ENABLED=FALSE\n   ```\n\n4. Start the app:\n\n   ```bash\n   npm start\n   ```\n\nThe ID of the app must be explicitly defined because it's required to [send and verify HTTP requests](https://www.canva.dev/docs/apps/verifying-http-requests/). If you don't set up the ID in the `.env` file, an error will be thrown when attempting to run the example.\n\n## Customizing the backend host\n\nIf your app has a backend, the URL of the server likely depends on whether it's a development or production build. For example, during development, the backend is probably running on a localhost URL, but once the app's in production, the backend needs to be exposed to the internet.\n\nTo more easily customize the URL of the server:\n\n1. Open the `.env` file in the text editor of your choice.\n2. Set the `CANVA_BACKEND_HOST` environment variable to the URL of the server.\n3. When sending a request, use `BACKEND_HOST` as the base URL:\n\n   ```ts\n   const response = await fetch(`${BACKEND_HOST}/custom-route`);\n   ```\n\n   **Note:** `BACKEND_HOST` is a global constant that contains the value of the `CANVA_BACKEND_HOST` environment variable. The variable is made available to the app via webpack and does not need to be imported.\n\n4. Before bundling the app for production, update `CANVA_BACKEND_HOST` to point to the production backend.\n\n## Configure ngrok (optional)\n\nIf your app requires authentication with a third party service, your server needs to be exposed via a publicly available URL, so that Canva can send requests to it.\nThis step explains how to do this with [ngrok](https://ngrok.com/).\n\n**Note:** ngrok is a useful tool, but it has inherent security risks, such as someone figuring out the URL of your server and accessing proprietary information. Be mindful of the risks, and if you're working as part of an organization, talk to your IT department.\nYou must replace ngrok urls with hosted API endpoints for production apps.\n\nTo use ngrok, you'll need to do the following:\n\n1. Sign up for a ngrok account at \u003chttps://ngrok.com/\u003e.\n2. Locate your ngrok [authtoken](https://dashboard.ngrok.com/get-started/your-authtoken).\n3. Set an environment variable for your authtoken, using the command line. Replace `\u003cYOUR_AUTH_TOKEN\u003e` with your actual ngrok authtoken:\n\n   For macOS and Linux:\n\n   ```bash\n   export NGROK_AUTHTOKEN=\u003cYOUR_AUTH_TOKEN\u003e\n   ```\n\n   For Windows PowerShell:\n\n   ```shell\n   $Env:NGROK_AUTHTOKEN = \"\u003cYOUR_AUTH_TOKEN\u003e\"\n   ```\n\nThis environment variable is available for the current terminal session, so the command must be re-run for each new session. Alternatively, you can add the variable to your terminal's default parameters.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphallguy%2Fshallendar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphallguy%2Fshallendar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphallguy%2Fshallendar/lists"}