Search code examples
httphttpsgeolocationlocalhostlan

Enable HTTP geolocation on local netwrok (not localhost) to allow multiple devices to access web site

I am working on a home project involving Leaflet, Django and GIS. On my main system I am running Linux (Ubuntu 20.04), while I also have an extra system running Win 10 Home. Last but not least I have an Android smartphone attached to the WiFi. All three are part of a LAN managed by my router (typical home setup).

I would like to test how well my Django project is running on multiple devices as well as different web without some advanced browsers.

Using the Live Server extension fro VS Code I can easily deploy a server without having in-dept knowledge about these things. On localhost (dev machine) I am able to load the web site without any issues, however on any other device that is accessing the server that is being run on my dev machine I get an issue regarding HTTP and geolocation.

From what I understand:

  • In recent years geolocation is allowed only for HTTPS connections or
  • if running on localhost, which is marked as secure (otherwise it would be too much trouble for the developers).

I am looking for an easy setup (for someone who is not familiar with web servers) to deploy my web site on my LAN and make it available to all connected devices. Is this even possible?

Solution

  • Credit goes to @deceze.

    By default the Live Server extension for VS Code has no HTTPS enabled. The protocol is supported but requires extra configuration steps.

    As a developer debugging a web site running on localhost is not an issue since such source is automatically accepted as trusted. However if the web site needs to be accessed from another device (e.g. a smartphone or a web browser on a different OS) HTTPS is required.

    Inside the VS Code project folder do the following:

    1. Create a self-signed certificate (OpenSSL tutorial on how to do it). If you already have one, skip this step.

    2. Place certificate and corresponding key file at a location, where VS Code has reading access to

    3. Create a .vscode directory if such is not present

    4. Add a settings.json file or edit the one that is already present there with the following entry called liveServer.settings.https:

      {
  "liveServer.settings.https": {
    "enable":     true,
    "cert":       "<ABSOLUTE_PATH_TO_CERTIFICATE_FILE>",
    "key":        "<ABSOLUTE_PATH_TO_CERTIFICATE_KEY_FILE>",
    "passphrase": "<PASSWORD_FOR_CERTIFICATE_KEY>"
  }
}

      Note that you need the absolute path to the files. Relative doesn't seem to work.

    5. Restart Live Server

    6. In web browser on target system add exception, which will pop up due to the nature of the self-signed certificate (not verified by any certificate authority).