ctrlShiftBryan / sleeper-mini-stub

An example project for third party integration in Sleeper.

Sleeper-Mini template

How to run

1. This project requires a working setup of React Native. Follow the steps in this guide under the React Native CLI Quickstart tab.
2. Sleeper uses the following tool versions for development. If you run into any issues with setup, you can try changing your environment to point to these versions. We recommend a version manager like asdf to automate switching these between projects.

Tool	Version
XCode	14.2
MacOS	12.6
java	zulu-11.56.19
nodejs	16.13.1
ruby	3.1.0
cocoapods	1.12.1

3. Install the latest version of our custom vscode-react-native plugin. This is a fork of the official project that includes fixes to run webpack with react native.
4. Clone this repo locally.
5. Run yarn from the template/ folder and pod install from template/ios to set up node modules and native dependencies.
6. If running in VS code, make sure to start the app from the vscode project file. This will automatically set your webpack dev server to the correct ports.
7. If running manually, make sure to run with yarn start and yarn ios. These will also make sure your dev ports are set up correctly.

To connect with a running prod app on your local network:

1. Contact us to enable developer mode on your account.
2. Start up the Sleeper app. This can be the production app, a development mode app in a simulator or on device, or a Mac Catalyst build.
3. If your account is marked as a developer, you may, at any point, physically shake your phone to open up a connection window. This displays your device's IP, current connection status to this template project on your computer, and buttons to refresh + send data manually to your PC at any time.
4. Tap on the last tab in the tab bar at the bottom of the screen. Select "Developer Mini" from the list.

5. Copy the IP address from the dev menu, and paste it in app.json.
6. Launch this app by following the steps in how to run above.
7. If all goes well, the Sleeper app will automatically connect after a few seconds.
8. You can now make any change you want in the mini, and when you hit the "refresh" button in Sleeper, the new code will update.

Editing the app

1. We've prepackaged this project with a few starter templates, located here.
2. Select a project to start with by editing app.json and changing the selected sample ID. Restart your packager each time you change this value.
3. All user changes should hook into the main index.js file of the sample you selected from these folders. Feel free to delete or modify components as necessary, but refrain from modifying any library files or index.tsx, as those handle some behind the scenes communication events.
4. Feel free to edit the top level package.json and add new packages to your project. Note that these packages either must already exist within Sleeper (if they include native code), or must be entirely comprised of javascript. For a list of packages included in Sleeper, check out mini_packages.json.
5. Some types and components have been provided for use through an included @sleeperhq/mini-core package. You can check out the repo here.
6. Further documentation and API hooks are in development.

Troubleshooting

Auto refresh stops working, or socket-related errors appear in the console.

Try restarting the phone that Sleeper is running on. Also stop and restart the packager for your development app.

How do I submit my mini?

You can run yarn build-mini to generate a .zip file containing all of your source code. Please contact us and send this file over when you are ready to release. In the future, this process will be automated.