This is the web app for snack.expo.dev and for embedded Snacks.
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.
When you have access to the Expo Universe repository, you can choose to run certain Expo services locally.
Start the www server. snack-proxies automatically detects the local server and routes all trafic to localhost:3000 when possible.
# expo/universe
cd server/www
yarn
yarn startStart the Expo website. snack-proxies automatically detects the local server and routes all trafic to localhost:3001 when possible.
When testing authentication, it is important that the chalet expo.test domain is used, otherwise authentication credentials cannot be accessed by snack.expo.test.
# expo/universe
cd server/website
yarn
yarn startStart 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 startBy 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:webUse ngrok to set up a tunnel to your locally-running www instance.
- Replace 'staging.exp.host' with your ngrok url, in the host of the Snack constructor (client/components/App.tsx).
- Restart local snack server.
- Send to device.
Note that a some Expo client APIs are hardcoded to prod so they won't hit the ngrok tunnel.
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.
The service worker needs HTTPS to work on the snack.expo.test domain. To set it up with Chalet, we need to add the cert.pem and key.pem files under the ~/.chalet directory. To create these files, first create a configuration file for the certificate with the following content (let's call it req.conf):
[req]
distinguished_name = req_distinguished_name
x509_extensions = v3_req
prompt = no
[req_distinguished_name]
C = US
ST = Oregon
L = Portland
O = Expo
OU = Org
CN = expo.test
[v3_req]
keyUsage = critical, digitalSignature, keyAgreement
extendedKeyUsage = serverAuth
subjectAltName = @alt_names
[alt_names]
DNS.1 = expo.test
DNS.2 = snack.expo.testThen run the following command in the same directory where you created the file to generate the certificate:
openssl req -x509 -newkey rsa:4096 -sha256 -keyout key.pem -out cert.pem -days 365 -nodes -config req.confPlace the generated cert.pem and key.pem files under the ~/.chalet directory and chalet should be setup to work with SSL.
You'll also need to add the certificate to the system. Under Keychain Access > Certificates, drag and drop the cert.pem file to do that. Double click the certificate and mark it as trusted under the "Trust" section.
Now, log out and log back in to your computer (or restart) to make Chalet to reload the certificates to serve.
Now you should be able to access the snack server at https://snack.expo.test.
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.
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 |
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 |
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.