{"id":21294611,"url":"https://github.com/trace2798/canva_ai_color_palette_devpost","last_synced_at":"2025-03-15T17:12:38.618Z","repository":{"id":252857397,"uuid":"841658385","full_name":"trace2798/canva_ai_color_palette_devpost","owner":"trace2798","description":null,"archived":false,"fork":false,"pushed_at":"2024-09-18T15:12:50.000Z","size":306,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-22T06:48:07.059Z","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/trace2798.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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-08-12T21:11:57.000Z","updated_at":"2024-09-18T15:12:55.000Z","dependencies_parsed_at":"2025-01-22T06:45:00.959Z","dependency_job_id":"97a6e60e-8c59-4fd2-9a41-ed5b32d35e4e","html_url":"https://github.com/trace2798/canva_ai_color_palette_devpost","commit_stats":null,"previous_names":["trace2798/canva_ai_color_palette_devpost"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trace2798%2Fcanva_ai_color_palette_devpost","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trace2798%2Fcanva_ai_color_palette_devpost/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trace2798%2Fcanva_ai_color_palette_devpost/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trace2798%2Fcanva_ai_color_palette_devpost/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/trace2798","download_url":"https://codeload.github.com/trace2798/canva_ai_color_palette_devpost/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243762269,"owners_count":20343979,"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-11-21T13:59:54.769Z","updated_at":"2025-03-15T17:12:38.595Z","avatar_url":"https://github.com/trace2798.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Canva Apps SDK starter kit\n\nWelcome to the **Apps SDK starter kit** for Canva's app development platform. 🎉\n\nThis repo contains everything you need to get an app up and running in a matter of minutes, including a boilerplate project and lots of examples. The complete documentation for the platform is at [canva.dev/docs/apps](https://www.canva.dev/docs/apps/).\n\n**Note:** The starter kit 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\ngit clone git@github.com:canva-sdks/canva-apps-sdk-starter-kit.git\ncd canva-apps-sdk-starter-kit\nnpm install\n```\n\n## Using the boilerplate\n\n### Step 1: Start the local development server\n\nThe `src` directory contains the boilerplate of an app.\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### (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 starter kit's 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\u003cdetails\u003e\n  \u003csummary\u003ePreviewing apps in Safari\u003c/summary\u003e\n\n  By 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\n  Canva 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\n  To learn more, see [Loading mixed-content resources](https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content#loading_mixed-content_resources).\n\n  To preview apps in Safari:\n\n  1. Start the development server with HTTPS enabled:\n\n  ```bash\n  # Run the main app\n  npm start --use-https\n\n  # Run an example\n  npm start \u003cexample-name\u003e --use-https\n  ```\n\n  2. Navigate to \u003chttps://localhost:8080\u003e.\n  3. Bypass the invalid security certificate warning:\n    1. Click **Show details**.\n    2. Click **Visit website**.\n  4. In the Developer Portal, set the app's **Development URL** to \u003chttps://localhost:8080\u003e.\n\n  You 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\u003c/details\u003e\n\n## Running an example's backend\n\nSome examples have a backend. This backend is defined in the example'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 examples 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 in the apps table.\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 example:\n\n   ```bash\n   npm start fetch\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrace2798%2Fcanva_ai_color_palette_devpost","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftrace2798%2Fcanva_ai_color_palette_devpost","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrace2798%2Fcanva_ai_color_palette_devpost/lists"}