Skip to content

Commit 9b89a98

Browse files
committed
Update connect device instructions
1 parent bcb3234 commit 9b89a98

4 files changed

Lines changed: 9 additions & 18 deletions

File tree

docs/getting-started/testing.md

Lines changed: 9 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -17,27 +17,18 @@ 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)
23+
24+
3. You will see a command such as `ngrok http <port number>`. Copy that command and execute it in the terminal.
25+
26+
![](/images/getting-started/ngrok-output.png)
3127

32-
5. From the new browser window, copy the port number appended to the end of the localhost URL
28+
4. Take the URL like: `https://xxx-xxx-xxx.ngrok-free.dev`, paste that into the Proxy URL
3329

34-
![SimulatorPort](/images/getting-started/simulator-port.png)
30+
![](/images/getting-started/pasted-url.png)
3531

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-
```
4032

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.
4233

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

0 commit comments

Comments
 (0)