{"id":20444933,"url":"https://github.com/snapchat/minis-samples","last_synced_at":"2025-07-06T23:02:03.183Z","repository":{"id":38074713,"uuid":"495012342","full_name":"Snapchat/minis-samples","owner":"Snapchat","description":"Sample Snap Minis","archived":false,"fork":false,"pushed_at":"2023-05-26T19:40:33.000Z","size":7071,"stargazers_count":8,"open_issues_count":0,"forks_count":5,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-26T18:21:21.762Z","etag":null,"topics":["minis","snapchat"],"latest_commit_sha":null,"homepage":"https://docs.snap.com/minis/sdk-v3/reference/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Snapchat.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-05-22T09:19:47.000Z","updated_at":"2024-04-23T04:33:36.000Z","dependencies_parsed_at":"2022-08-08T23:00:39.711Z","dependency_job_id":null,"html_url":"https://github.com/Snapchat/minis-samples","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Snapchat%2Fminis-samples","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Snapchat%2Fminis-samples/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Snapchat%2Fminis-samples/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Snapchat%2Fminis-samples/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Snapchat","download_url":"https://codeload.github.com/Snapchat/minis-samples/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248648862,"owners_count":21139371,"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":["minis","snapchat"],"created_at":"2024-11-15T10:10:09.580Z","updated_at":"2025-04-13T00:23:50.965Z","avatar_url":"https://github.com/Snapchat.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# minis-samples\n\n[Snap Minis](https://minis.snapchat.com/) are bite-size utilities made for friends. They’re built with HTML5, so they’re easy to develop.\nPlus, they work for all Snapchatters, on any kind of device, with no installation required.\n\nThis repo contains sample Snap Minis built using [Create React App](https://create-react-app.dev/docs/getting-started) and Typescript.\nSnap Minis do not need to be built with Create React App or Typescript. Any web framework that bundles the entire application into a single HTML5 bundle can be used.\n\nThese samples serve as a guide for developers to quickly get started building their Snap Mini. Please consult our [docs](https://docs.snap.com/minis/getting-started/home/) if you have any questions not answered in this readme.\n\n## Setup\n\nWe recommend using [yarn](https://classic.yarnpkg.com/lang/en/docs/install/#mac-stable) for package management.\n\n```\ngit clone git@github.com:Snapchat/minis-samples.git\ncd minis-samples\nyarn\n```\n\nThe minimum Snapchat version for these samples is 11.82.\n\nThese common commands will work from any mini under `minis`. For sample, you can `cd minis/sample` and run `yarn start` to run the sample mini on your localhost:3000.\n```\nyarn start                      # run on localhost:3000\nyarn minis:build\nyarn minis:release -b \u003cbuild id\u003e\nyarn minis:target -r \u003crelease\u003e -u \u003cSnapchat usernames\u003e\n```\n\nThe build version and release name is by default $git config --global user.name).${current unix time}`. The build notes are the git hash with the current git user. These can be overridden by passing additional args to snapdev.\n```\nyarn minis:build -v \u003cversion\u003e -n \u003cnotes\u003e\nyarn minis:release -b \u003cbuild id\u003e -n \u003cname\u003e\n```\n\nMinis npm scripts (e.g. minis:build) require snapdev CLI. It can be installed [here](https://docs.snap.com/minis/downloads).\n\n### Rapid Development\nRapid development allows changes to a Snap Mini to be instantly reloaded into Snapchat.\n\n1. Run `yarn start`. You should see the following\n```\nYou can now view sample-mini in the browser.\n\n  Local:            http://localhost:3000\n  On Your Network:  http://192.168.1.2:3000\n```\n2. Create a rapid development build with that port and URL. The build can sometimes fail if \"/\" is not added after the port.\n```\nyarn minis:build-rapid\n```\nThat script will add the URL from `yarn rapid:host --silent`. If that URL is wrong from `yarn rapid:host --silent`, then run\n```\nyarn minis:build-rapid -u \u003cURL from above\u003e\n```\n\nThe rapid will be named the rapid.\\\u003cgit username\\\u003e.\\\u003cunix time\\\u003e. It will have the URL as the notes.\n\n3. Target yourself to that build\n```\nyarn minis:release -b \u003cbuild from before\u003e\nyarn minis:target -r \u003crelease from before\u003e -u \u003cuser name\u003e\n```\n\nOpen up Snapchat while you are on that same WiFi network.\n\nIf you have an android device, it is possible to [remote debug the webview](https://developer.chrome.com/docs/devtools/remote-debugging/webviews/#open_a_webview_in_devtools) that the Snap Mini is running in.\n\n## Additional Resources\n- [Typescript](https://www.typescriptlang.org/docs/handbook/2/basic-types.html)\n- [React](https://reactjs.org/docs/hello-world.html)\n- [Create React App](https://create-react-app.dev/docs/getting-started)\n- [React Typescript](https://github.com/typescript-cheatsheets/react#reacttypescript-cheatsheets)\n\nFor manging network calls, we recommend [SWR](https://swr.vercel.app/) or [React Query](https://react-query.tanstack.com/overview) with fetch or [axios](https://axios-http.com/docs/api_intro).\n\nWe recommend using Chrome with the [Chrome debug tools](https://developer.chrome.com/docs/devtools/device-mode/) for local debugging.\n\nWe recommend using [React Router](https://reactrouter.com/docs/en/v6/getting-started/tutorial#add-some-routes) to create a multipage mini.\n\nImportant notes:\n- [MemoryRouter](https://reactrouter.com/docs/en/v6/routers/memory-router) is required because routers with browser history will \nrefresh the webpage and cause issue with receiving client events on Android\n- The default URL path for Minis when opened is not \"/\", so use a match all for the Minis' main page (e.g. ```\u003cRoute path=\"*\" element={\u003cMainPage /\u003e} /\u003e```.\n- Swipe actions can be implemented with [react-swipeable](https://github.com/FormidableLabs/react-swipeable).\n\n## Repo Development\nTo run any mini, cd into their directory (e.g. `cd minis/sample` ). Alternatively, all the commands can be run from the root using `workspace`.\n\n```\nyarn workspace @snapchat/minis-sample start\n```\n\n[Husky](https://typicode.github.io/husky/#/) is set up to lint staged files.\n\nFrom the top level,\n```\nyarn lint                 # run lint\nyarn lint:fix             # fix lint\n```\n\nPlease read this [doc](create_react_app.md) to learn more about the Create React App commands.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsnapchat%2Fminis-samples","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsnapchat%2Fminis-samples","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsnapchat%2Fminis-samples/lists"}