### Example App Setup and Run Source: https://github.com/expo/snack/blob/main/docs/snack-sdk.md Instructions to build, install dependencies, and start the example application for the Snack SDK. ```bash yarn build cd ./example yarn yarn start ``` -------------------------------- ### Build and Run Example App Source: https://github.com/expo/snack/blob/main/packages/snack-sdk/README.md Commands to build the project, navigate to the example directory, and start the example application. ```sh yarn build cd ./example yarn start ``` -------------------------------- ### Install Dependencies and Start Runtime Source: https://github.com/expo/snack/blob/main/runtime/README.md Install project dependencies and start the runtime in development mode. This is the initial setup for both native and web player development. ```bash cd runtime yarn install expo start ``` -------------------------------- ### Run Snack SDK Example Source: https://github.com/expo/snack/blob/main/packages/snack-sdk/example/README.md Execute this command in the packages/snack-sdk/example directory to start the development server. ```bash yarn dev ``` -------------------------------- ### Start Snack Runtime Webplayer Source: https://github.com/expo/snack/blob/main/docs/expo-sdk-upgrade.md Command to start the runtime web-player locally for testing. ```bash expo start:web ``` -------------------------------- ### Start Native Runtime Development Source: https://github.com/expo/snack/blob/main/runtime/README.md Start the runtime for native development. This involves starting the Expo app and then using a QR code scanner on a device to load the runtime into Expo Go. ```bash expo start ``` -------------------------------- ### Install snack-runtime Source: https://github.com/expo/snack/blob/main/packages/snack-runtime/README.md Install the snack-runtime package using yarn. ```bash yarn add snack-runtime ``` -------------------------------- ### Start Expo Documentation Dev Server Source: https://github.com/expo/snack/blob/main/docs/expo-sdk-upgrade.md Instructions to start the Expo documentation dev server for testing Snack integration. ```bash Start the Expo [documentation dev-server](https://github.com/expo/expo/tree/master/docs#running-locally) ``` -------------------------------- ### Install snack-eslint-standalone Source: https://github.com/expo/snack/blob/main/packages/snack-eslint-standalone/README.md Install the package using yarn. ```bash $ yarn add snack-eslint-standalone ``` -------------------------------- ### Install Snack SDK Source: https://github.com/expo/snack/blob/main/docs/snack-sdk.md Install the Snack SDK using Yarn. ```sh yarn add snack-sdk ``` -------------------------------- ### Start Snackager (package bundler) Source: https://github.com/expo/snack/blob/main/website/README.md Starts the 'snackager' server locally. The snack-proxies will automatically route traffic to this server when possible. ```sh # expo/snack cd snackager yarn yarn start ``` -------------------------------- ### Start Web Player Development Source: https://github.com/expo/snack/blob/main/runtime/README.md Start the runtime specifically as a web-player for browser-based development. This command or option allows for testing the web version of the runtime. ```bash expo start --web ``` -------------------------------- ### Example Commit Messages Source: https://github.com/expo/snack/blob/main/CONTRIBUTING.md Examples of correctly formatted commit messages for different project components. ```git [docs] Fix typo in xxx [runtime] Add support for SDK 40 [sdk] Add test-case for custom transports [snackager] Improve logging for git imports [website] Update loading icon ``` -------------------------------- ### Start Expo API Server (www) Source: https://github.com/expo/snack/blob/main/website/README.md Starts the 'www' server locally. Ensure you are in the correct directory within the Expo Universe repository. ```sh # expo/universe cd server/www yarn yarn start ``` -------------------------------- ### Start Expo Website Source: https://github.com/expo/snack/blob/main/website/README.md Starts the Expo website locally. This is required for testing authenticated flows on snack.expo.test. ```sh # expo/universe cd server/website yarn yarn start ``` -------------------------------- ### Start Snack web-player locally Source: https://github.com/expo/snack/blob/main/website/README.md Starts the web-player locally. This allows you to develop and test the web player without relying on the S3 and CDN version. ```sh # expo/snack cd runtime expo start:web ``` -------------------------------- ### Start Website with Custom API Server URL Source: https://github.com/expo/snack/blob/main/website/README.md Override the default API server URL when starting the website. This is useful for development and testing against different API environments. ```sh API_SERVER_URL=https://api.expo.test yarn start ``` ```sh API_SERVER_URL=https://proxy-production-api.expo.test yarn start ``` -------------------------------- ### Example Bundle Request Source: https://github.com/expo/snack/blob/main/snackager/README.md Example cURL command to request a bundle for `react-native-paper` version 4.1.0, including iOS, Android, and web platforms. ```sh curl "http://localhost:3012/bundle/react-native-paper@4.1.0?platforms=ios,android,web" ``` -------------------------------- ### Install snack-babel-standalone Source: https://github.com/expo/snack/blob/main/packages/snack-babel-standalone/README.md Add snack-babel-standalone to your project dependencies using yarn. ```bash $ yarn add snack-babel-standalone ``` -------------------------------- ### Request Bundle API Source: https://github.com/expo/snack/blob/main/snackager/README.md Make a GET request to this endpoint to obtain a bundle for a specified package and version. Platforms can be specified as a comma-separated list. ```sh /bundle/[name]@[version]?platforms=ios,android ``` -------------------------------- ### Get Package Bundle Source: https://github.com/expo/snack/blob/main/snackager/README.md Requests a bundled version of an NPM package for specified platforms. If the bundle is not yet generated, it will be created and returned as pending. If already bundled, it returns the bundle details and its location on S3. ```APIDOC ## GET /bundle/[name]@[version]?platforms=ios,android ### Description Requests a bundled version of an NPM package for specified platforms. If the bundle is not yet generated, it will be created and returned as pending. If already bundled, it returns the bundle details and its location on S3. ### Method GET ### Endpoint /bundle/[name]@[version] ### Parameters #### Query Parameters - **platforms** (string) - Required - Comma-separated list of platforms (e.g., `ios,android,web`). - **rebuild** (boolean) - Optional - If true, forces a rebuild of the package. Only effective when `DEBUG_LOCAL_FILES` is enabled. ### Response #### Success Response (200) - **pending** (boolean) - If true, the bundle is being generated. - **version** (string) - The exact version of the bundled package. - **hash** (string) - A hash of the bundled code. - **dependencies** (array) - A list of dependencies included in the bundle. ### Response Example ```json { "pending": true } ``` ```json { "version": "4.1.0", "hash": "a1b2c3d4e5f6", "dependencies": [ "react-native-vector-icons" ] } ``` ``` -------------------------------- ### Listen for State Changes Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-api/classes/snack.md Adds a listener to observe changes in the Snack's state. The listener receives the current state and the previous state. Returns a function to unsubscribe the listener. Example demonstrates logging a name change. ```typescript const unsubscribe = Snack.addStateListener((state, prevState) => { if (state.name !== prevState.name) { console.log('name changed: ', state.name); } }); Snack.setName('unforgiven orange'); // // Make a change to the state unsubscribe(); // Remove listener ``` -------------------------------- ### Deploy Native Runtime and Webplayer Source: https://github.com/expo/snack/blob/main/docs/expo-sdk-upgrade.md Commands to deploy the native runtime and webplayer to staging and production environments. ```bash yarn deploy:staging yarn deploy:web:staging yarn deploy:prod yarn deploy:web:prod ``` -------------------------------- ### Build Snack SDK Source: https://github.com/expo/snack/blob/main/packages/snack-sdk/example/README.md Run this command in the packages/snack-sdk directory to build the SDK. ```bash yarn build ``` -------------------------------- ### Lint, Build, Test, and Document Project Source: https://github.com/expo/snack/blob/main/packages/snack-sdk/README.md Commands to ensure code quality, build the project, run tests, and update documentation before committing changes. ```sh yarn lint yarn build yarn test yarn doc ``` -------------------------------- ### Import and Usage Before Migration (snack-sdk v2) Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-migration.md Illustrates the import statements and basic usage of SnackSession and ExpoSnackFiles with flow typings in snack-sdk v2. ```js import { SnackSession } from 'snack-sdk'; // 2.x.x import type { ExpoSnackFiles } from 'snack-sdk'; // 2.x.x const files: ExpoSnackFiles = { 'App.js': { type: 'CODE', contents: `console.log('Hello Snack!');`, }, }; const session = new SnackSession({ ... }); session.sendCodeAsync(files); ``` -------------------------------- ### Get Current Snack State Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-api/classes/snack.md Returns the current state of the Snack, including its files, dependencies, and other metadata. This is a synchronous operation. ```typescript const state = Snack.getState(); ``` -------------------------------- ### Basic Snack SDK Usage Source: https://github.com/expo/snack/blob/main/docs/snack-sdk.md Create and configure a Snack instance, set it online, retrieve its state and URL, and then take it offline. ```ts import { Snack } from 'snack-sdk'; // Create Snack const snack = new Snack({ files: { 'App.js': { type: 'CODE', contents: ` import * as React from 'react'; import { View, Text } from 'react-native'; export default () => ( Hello Snack! ); ` } } }); // Make the Snack available online snack.setOnline(true); const { url } = await snack.getStateAsync(); // You can now use the url and show it as a QR code // to open the Snack in the Expo client. // Stop Snack when done snack.setOnline(false); ``` -------------------------------- ### Save Snack and Get URL Source: https://github.com/expo/snack/blob/main/docs/snack-sdk.md Save a Snack to Expo servers using `saveAsync`. This returns the unique Snack `id` and `url`. ```typescript const snack = new Snack({ files: { ... }, dependencies: { ... } }); const { id, url } = await snack.saveAsync(); console.log(url); // "exp://exp.host/@jsghakdshgs" ``` -------------------------------- ### Run Lint, Build, and Test Commands Source: https://github.com/expo/snack/blob/main/packages/snack-content/README.md Execute these commands to ensure code quality and test coverage before committing. ```sh yarn lint yarn build yarn test ``` -------------------------------- ### Get Snack State Source: https://github.com/expo/snack/blob/main/docs/snack-sdk.md Retrieve the current state of a Snack instance, including its name, description, and SDK version. The state is read-only and should not be modified directly. ```typescript const snack = new Snack({ name: 'Wonderful orange', description: `It's a wonderful world`, sdkVersion: '37.0.0' }); const { name, description, sdkVersion } = snack.getState(); console.log(name, description, sdkVersion); ``` -------------------------------- ### Get Snack Download URL Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-api/classes/snack.md Retrieves the URL for downloading the Snack as a zip file. This method will automatically save any unsaved changes before generating the URL. ```typescript const downloadUrl = await Snack.getDownloadURLAsync(); ``` -------------------------------- ### Get Snack State Asynchronously Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-api/classes/snack.md Waits for any pending operations, such as dependency resolution, to complete before returning the current state of the Snack. This is useful when ensuring the Snack is fully ready. ```typescript const state = await Snack.getStateAsync(); ``` -------------------------------- ### Create Snack with Initial Dependencies Source: https://github.com/expo/snack/blob/main/docs/snack-sdk.md Initialize a new Snack instance with specified dependencies and code files. This is useful for setting up a project with pre-defined libraries and application code. ```typescript import { Snack } from 'snack-sdk'; // Create Snack const snack = new Snack({ dependencies: { 'expo-linear-gradient': { version: '8.2.1' } }, files: { 'App.js': { type: 'CODE', contents: ` import * as React from 'react'; import { LinearGradient } from 'expo-linear-gradient'; export default () => ( ); ` } } }); ``` -------------------------------- ### Serve Local Bundle Files Source: https://github.com/expo/snack/blob/main/snackager/README.md Use this cURL command to fetch bundled output files when `DEBUG_LOCAL_FILES` is enabled. This allows for debugging by serving files directly from disk. ```sh curl http:/localhost:3012/serve/react-navigation@3.3.2-ios/bundle.js ``` -------------------------------- ### Deploy Snack Web Player to Staging Source: https://github.com/expo/snack/blob/main/runtime/__internal__/DEPLOYING.md Deploy the Snack web player to the staging environment. This version is used by the Snack web preview. ```bash yarn deploy:web:staging ``` -------------------------------- ### Deploy Snack Web Player to Production Source: https://github.com/expo/snack/blob/main/runtime/__internal__/DEPLOYING.md Deploy the Snack web player to the production environment. This version is used by the Snack web preview. ```bash yarn deploy:web:prod ``` -------------------------------- ### Request Client Preview Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-api/classes/snack.md Requests a preview from all connected clients. The preview URLs are available in the `previewURL` field of each connected client object returned in the promise. ```typescript const clients = await Snack.getPreviewAsync(); ``` -------------------------------- ### Login to Expo Production Source: https://github.com/expo/snack/blob/main/runtime/__internal__/DEPLOYING.md Log in to the Expo production environment before deploying. ```bash expo login ``` -------------------------------- ### Create Snack with Pre-resolved Dependencies Source: https://github.com/expo/snack/blob/main/docs/snack-sdk.md Initialize a Snack instance using dependencies that have already been resolved and bundled. This can speed up the process when reusing previously processed dependencies. ```typescript const snack = new Snack({ dependencies: { 'expo-font': { version: '8.2.1' } } }); // Wait for the dependencies to be resolved const { dependencies } = await snack.getStateAsync(); console.log(`expo-font handle ${dependencies['expo-font'].handle}`); // string -> https://... // Create a Snack with pre-resolved dependencies const newSnack = new Snack({ dependencies }); ``` -------------------------------- ### Login to Expo Staging Source: https://github.com/expo/snack/blob/main/runtime/__internal__/DEPLOYING.md Log in to the Expo staging environment before deploying. ```bash EXPO_STAGING=1 expo login ``` -------------------------------- ### Deploy Snack Runtime to Staging Source: https://github.com/expo/snack/blob/main/runtime/__internal__/DEPLOYING.md Deploy the Snack runtime to the staging environment. This version is used by the Expo client. ```bash yarn deploy:staging ``` -------------------------------- ### Publish Snack SDK to Next Channel Source: https://github.com/expo/snack/blob/main/docs/expo-sdk-upgrade.md Use the 'next' channel to allow partners to test the new Expo SDK. Update the version in package.json, build the project, and then publish with the --tag next flag. ```bash yarn build npm publish --tag next ``` -------------------------------- ### Listen for Connected Clients Source: https://github.com/expo/snack/blob/main/docs/snack-sdk.md Add a state listener to monitor `connectedClients`. This allows you to detect when new clients connect and log their platform information. ```typescript snack.addStateListener((state, prevState) => { if (state.connectedClients !== prevState.connectedClients) { for (const key in state.connectedClients) { if (!prevState.connectedClients[key]) { console.log('A client has connected! ' + state.connectedClients[key].platform); } } } }); ``` -------------------------------- ### Upgrade Expo SDK and Dependencies Source: https://github.com/expo/snack/blob/main/docs/expo-sdk-upgrade.md Use these commands to upgrade the Expo SDK and fix project dependencies. ```bash yarn add expo@^... yarn expo install --fix ``` -------------------------------- ### Snack Constructor Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-api/classes/snack.md Initializes a new instance of the Snack class. ```APIDOC ## constructor \+ **new Snack**(`options`: [SnackOptions](../README.md#snackoptions)): [Snack](snack.md) #### Parameters: Name | Type | ------ | ------ | `options` | [SnackOptions](../README.md#snackoptions) | **Returns:** [Snack](snack.md) ``` -------------------------------- ### Deploy Snack Runtime to Production Source: https://github.com/expo/snack/blob/main/runtime/__internal__/DEPLOYING.md Deploy the Snack runtime to the production environment. This version is used by the Expo client. ```bash yarn deploy:prod ``` -------------------------------- ### Serve Bundled Files Source: https://github.com/expo/snack/blob/main/snackager/README.md Serves the generated bundle files directly. This endpoint is typically used for debugging purposes when `DEBUG_LOCAL_FILES` is enabled. ```APIDOC ## GET /serve/[name]@[version]/bundle.js ### Description Serves the generated bundle files directly. This endpoint is typically used for debugging purposes when `DEBUG_LOCAL_FILES` is enabled. ### Method GET ### Endpoint /serve/[name]@[version]/bundle.js ### Parameters #### Path Parameters - **name** (string) - Required - The name of the NPM package. - **version** (string) - Required - The version of the NPM package. ### Response #### Success Response (200) - **bundle.js** (file) - The JavaScript bundle file. ``` -------------------------------- ### getPreviewAsync Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-api/classes/snack.md Requests a preview from connected clients and returns information about the previews. ```APIDOC ## getPreviewAsync ▸ **getPreviewAsync**(): Promise<[SnackConnectedClients](../README.md#snackconnectedclients)> Requests a preview from the connected clients. The previews are returned in the `previewURL` field of each connectedClient. **Returns:** Promise<[SnackConnectedClients](../README.md#snackconnectedclients)> ``` -------------------------------- ### getPreloadedModules Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-api/README.md Retrieves a list of modules that are preloaded in the current SDK environment. ```APIDOC ## getPreloadedModules ### Description Retrieves a list of modules that are preloaded in the current SDK environment. ### Signature getPreloadedModules(): string[] ``` -------------------------------- ### Web Preview Integration with Snack SDK Source: https://github.com/expo/snack/blob/main/docs/snack-sdk.md Integrates Snack SDK for web previewing by creating an iframe and passing its contentWindow ref. The webPreviewURL is updated and used as the iframe's source. Supported from SDK 40 onwards. ```jsx import * as React from 'react'; import { Snack } from 'snack-sdk'; export default () => { const webPreviewRef = React.useRef(null); const [snack] = React.useState(() => new Snack({ ... webPreviewRef, }) ); const { webPreviewURL } = snack.getState(); return (
...