Skip to content

Commit 56073e7

Browse files
authored
Update connect device instructions (#31)
* Update connect device instructions * Update connect device instructions * Update connect device instructions
1 parent bcb3234 commit 56073e7

4 files changed

Lines changed: 7 additions & 18 deletions

File tree

docs/getting-started/testing.md

Lines changed: 7 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -17,27 +17,16 @@ sidebar_position: 6
1717
To test your project on mobile devices, especially for AR experiences that require camera access, you'll need to serve your development server over HTTPS. We recommend using [ngrok](https://ngrok.com/) to create a secure tunnel to your local server.
1818

1919
1. Go to [ngrok.com](https://ngrok.com/) and create an account. Once signed in, follow the steps on the dashboard to install ngrok.
20-
2. Update (or verify) your project configuration. In the `config` folder, open `webpack.config.js` and look for the `devServer` object. Add (or verify) ngrok as an `allowedHost`:
21-
```javascript
22-
devServer: {
23-
// ... existing config
24-
allowedHosts: ['.ngrok-free.dev']
25-
}
26-
```
27-
3. Relaunch the desktop app or exit/reopen the project to refresh the build after updating the webpack configuration
28-
4. Open the Simulator/Preview and click the browser pop-out button
20+
2. Click "Connect Device" in the lower left corner.
2921

30-
![DesktopPopout](/images/getting-started/desktop-pop-out.png)
22+
![](/images/getting-started/click-connect-device.png)
3123

32-
5. From the new browser window, copy the port number appended to the end of the localhost URL
24+
3. You will see a command such as `ngrok http <port number>`. Copy that command and execute it in the terminal.
3325

34-
![SimulatorPort](/images/getting-started/simulator-port.png)
26+
![](/images/getting-started/ngrok-output.png)
3527

36-
4. Open a terminal window and run the following command, replacing [port] with the port obtained from the simulator browser pop-out
37-
```bash
38-
ngrok http [port]
39-
```
28+
4. Take the URL from the output, in the form `https://xxx-xxx-xxx.ngrok-free.dev`, and paste that into the Proxy URL field.
4029

41-
In the output you should see an ngrok URL that uses HTTPS and forwards to your local development server. You can paste this into your browser window and test your project on a mobile device.
30+
![](/images/getting-started/pasted-url.png)
4231

43-
![](/images/getting-started/ngrok-terminal.png)
32+
5. Scan the QR code on your test device.
167 KB
Loading
243 KB
Loading
123 KB
Loading

0 commit comments

Comments
 (0)