Skip to content

website

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

website

README.md

website

This is the web app for snack.expo.dev and for embedded Snacks.

Getting started

Before running the web app, make sure you have followed all the steps in the Contributing Guide.

Start the website by running yarn start from the root of the repository.

To view the website, open https://snack.expo.test (Expo employees, requires Universe set up via install-tools) or http://localhost:3011 (external contributors).

The API server defaults to https://proxy-staging-api.expo.test. API requests only work for Expo employees. Override with API_SERVER_URL when starting:

API_SERVER_URL=https://api.expo.test yarn start
API_SERVER_URL=https://proxy-production-api.expo.test yarn start

Running development services locally

When you have access to the Expo Universe repository, you can choose to run certain Expo services locally.

Expo API server (www)

Start the www server. To point Snack at it, set API_SERVER_URL=https://api.expo.test when starting (see "Getting started" above).

# expo/universe
cd server/www
yarn
yarn start

Expo Website

Start the Expo website at https://expo.test. Required for testing authenticated flows on https://snack.expo.test so that credentials can be shared.

# expo/universe
cd server/website
yarn
yarn start

Snackager (package bundler)

Start the snackager server. snack-proxies automatically detects the locally running Snackager server and routes all trafic to it when possible.

# expo/snack
cd snackager
yarn
yarn start

Snack web-player

By default, the web player is loaded from s3 and a CDN. When developing locally, start the web-player locally and select "localhost" in the SDK versions picker.

# expo/snack
cd runtime
expo start:web

Testing local Snack runtime on device

Use ngrok to set up a tunnel to your locally-running www instance.

  1. Replace 'staging-api.expo.dev' with your ngrok url, in the host of the Snack constructor (client/components/App.tsx).
  2. Restart local snack server.
  3. Send to device.

Note that a some Expo client APIs are hardcoded to prod so they won't hit the ngrok tunnel.

Disabling cache with Service Worker

In chrome devtools, check "Bypass for network" under Application > Service workers to skip the service worker cache when working on the page. Remember to keep the devtools open so this takes effect.

File organization

The web server is under src/server/. The build scripts also generate a build subdirectory with the compiled JS; this is the JS that actually runs.

The code for the client is located under src/client/. The webpack build creates a dist/ folder which is ignored from version control.

Scripts related to deployment, like the Dockerfile, are under deploy. Note: even though the scripts are under deploy, you must run them from the root of the repository; they are sensitive to cwd.

Query Parameters

You can pass certain parameters in the Snack URL to customize the behavior of the Snack.

Here is a summary of all the parameter options that you can use:

All query parameter values must be URL encoded

parameter default description type
dependencies Comma separated list of <name>@<version>. SnackDependency
description The description of your Snack. string
files Allows you to inline files to load through a query param, useful for doc maintainers who don't want to maintain twice the code (both markdown and snack, itself). Read more about files. SnackFiles
name The name of your Snack. When creating a new Snack, a random name is assigned unless one is provided via this parameter. string
platform web The platform on which your Snack should be run in the Device Preview window. android | ios | mydevice | web
preview true Toggle to show the Device Preview. boolean
sdkVersion default SDK The Expo SDK version that your Snack should use. SDKVersion
sourceUrl One of two ways to send a file, via publicly-accessible URL of a JS file. string
supportedPlatforms All platforms Specify which platforms your Snack supports android | ios | mydevice | web
theme light The visual theme of your Snack. light | dark

Examples of Snack URLs

All of these examples should be prefixed with https://snack.expo.dev/.

parameter example
name ?name=Gordon%20Freeman
description ?description=Where%20is%20Half-Life%203
platform ?platform=mydevice
preview ?preview=false
sdkVerion ?sdkVersion=45.0.0
supportedPlatforms ?supportedPlatforms=android,ios
theme ?theme=dark
dependencies ?dependencies=%40expo%2Fvector-icons%40*%2C%40react-native-community%2Fmasked-view
files ?files=%7B%22type%22%3A%20%22CODE%22%2C%20%22contents%22%3A%20%22alert%28%27hello%27%29%3B%22%20%7D
sourceUrl ?sourceUrl=https://reactnavigation.org/examples/6.x/hello-react-navigation.js

Running the tests

We run unit tests with Jest. Run yarn test in another terminal to start Jest and have it continuously watch for changes. You also can run yarn jest if you want to run Jest without the watcher. Keep unit tests fast so that the feedback loop from them is fast.