How to run a vite project over HTTPS and accessible by local network

To run a Vite project over HTTPS and make it accessible over the local network, you'll need to do a few things:

1. Generate a local SSL certificate.
2. Configure Vite to use the SSL certificate.
3. Ensure your device and the development server are on the same network.
4. Access the server using the local network IP.

Here's a step-by-step guide:

Step 1: Generate a local SSL certificate

You can use mkcert to create a locally-trusted certificate. First, install mkcert and set up the local CA:

# Install mkcert (you might need to use sudo depending on your system)
brew install mkcert

# Install the local CA
mkcert -install

Then, generate the certificate for your local domain (you can use localhost or any other domain you prefer):

# Create a certificate for localhost (you can replace localhost with your desired domain)
mkcert localhost

This will generate two files: localhost.pem (the certificate) and localhost-key.pem (the private key).

Step 2: Configure Vite to use the SSL certificate

In your Vite project, you'll need to modify the vite.config.js (or vite.config.ts if you're using TypeScript) to include the HTTPS configuration:

import fs from 'fs';
import path from 'path';

export default {
  server: {
    https: {
      key: fs.readFileSync(path.resolve(__dirname, 'path/to/localhost-key.pem')),
      cert: fs.readFileSync(path.resolve(__dirname, 'path/to/localhost.pem')),
    },
    // Make sure the server is accessible over the local network
    host: '0.0.0.0',
  },
};

Replace 'path/to/localhost-key.pem' and 'path/to/localhost.pem' with the actual paths to your generated certificate files.

Step 3: Ensure your device and the development server are on the same network

Make sure that the computer running the Vite development server and the mobile device you want to test with are connected to the same local network.

Step 4: Access the server using the local network IP

Find the local IP address of your computer (it usually looks like 192.168.x.x). You can find this in your network settings or by running ipconfig (on Windows) or ifconfig (on macOS/Linux) in the terminal.

Once you have the IP address, you can access your Vite project from your mobile device by navigating to https://<YourComputer'sLocalIP>:3000 (replace <YourComputer'sLocalIP> with your actual IP address and 3000 with the port Vite is running on, if different).

Remember that because the certificate is only trusted locally, your browser may warn you about the site's security certificate. You'll need to proceed with the warning to access the site.

By following these steps, you should be able to run your Vite project over HTTPS and access it from any device on your local network.