Testing device orientation (gyroscope) on localhost using Vite
Tags: vite, tutorial, typescript, react
Published: 2023-06-28 14:05:54

I'm making a tilt component atm and wanted to make it respond to gyroscope (device orientation) changes. there were some caveats with testing it locally so I decided to write this post to explain it.

##1. Device Orientation Event

To detect device orientation (gyroscope) changes, you need to add an event listener for the `deviceorientation` event. this is how it's done in React using TypeScript:
```ts
const handleDeviceOrientation = useCallback(
  (e: DeviceOrientationEvent) => {
    // do something with `e.alpha`, `e.beta`, and `e.gamma`
  },
  []
);

useEffect(() => {
  window.addEventListener(
    'deviceorientation',
    handleDeviceOrientation
  );
  return () =>
    window.removeEventListener(
      'deviceorientation',
      handleDeviceOrientation
    );
}, [handleDeviceOrientation]);
```
We can then get the rotation values in degrees around each axis from the event object:
  - *e.alpha* : rotation around the Z axis
  - *e.beta* : rotation around the X axis
  - *e.gamma* : rotation around the Y axis

## 2. Testing in Chrome
To test device orientation in Chrome, you can use the `Sensors` tab in Chrome Devtools. to access it:
1. `F12` to open DevTools 
2. `Three dots`->`More Tools`->`Sensors`
3. In the `Orientation` section, you can drag/rotate the 3d phone model around to change the device orientation and see the effect in your application:

![Device Orientation in Google Chrome](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6irv238ikvki0f89wx8e.png)

## 3. Testing on your phone
Now you probably want to test your application on your phone to see how it actually works. First, you need to make your dev server accessible to your local network. To do that, run the dev server with the `-- --host` flag. (no, it's not a typo!)
```
npm run dev -- --host
```
Now your dev server is exposed to your local network and it should list the IP addresses/ports it's listening to, like:
```
➜  Local:   http://localhost:5173/
➜  Network: http://192.168.1.x:5173/
```
Make sure your phone is connected to the same network as your PC and open the listed address/port. it should connect and show your application. (I usually do this to test all my applications on my phone in addition to Chrome's responsive view mode)
Now, you will notice that the device orientation event doesn't work on your phone!

## 4. Vite dev server with HTTPS
Your phone doesn't give access to the device orientation (gyroscope) sensor when your app is served under the `HTTP` protocol. It *has* to be served under `HTTPS` for it to work!
To run your dev server in HTTPS, do these steps:
1. Install the `@vitejs/plugin-basic-ssl` package:
```
npm i @vitejs/plugin-basic-ssl
```
2. Edit your `vite.config.ts` file to reflect these changes:
```ts
import basicSsl from '@vitejs/plugin-basic-ssl'
plugins: [basicSsl()] // add basicSsl() to the plugins array
```
If you're using React, your `vite.config.ts` file should look something like this now:
```ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import basicSsl from '@vitejs/plugin-basic-ssl';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), basicSsl()],
});
```
Now when you run the `npm run dev -- --host` command, your dev server will run under the HTTPS protocol and the listed addresses will begin with `https://`.
After going to the listed address/port on your phone, you will see this warning message: `Your connection is not private (NET::ERR_CERT_AUTHORITY_INVALID)` 
Tap on `Advanced` and select the `Proceed to ... (unsafe)` option.

🎉 Congratulations! now you can test/debug device orientation (gyroscope) on localhost using your phone!