How do I display my html page in the preview panel? ✅ SOLVED

Previews
1

Hi there,
Question says it all, I can’t figure out a way to display my html page (named form.html) in the IDX preview panel on the right.
Any idea, please? Thanks

2

You can install “live server” extension and start a preview server for the html page!

1 Like
3

Thanks! I thought it would open in the IDX preview panel but it opens a new browser tab, just like by running a localhost:3000
Better than nothing.

4

You would need to define which page you want executed via the dev.nix file in the preview section… not quite sure how to do it for vanilla html pages though

5

From the documentation I’ve done this:

idx = {
    # enable previews
    previews = {
      enable = true;
      previews = {
        web = {
          command = [
            "python3"
            "src/form.html"
#            "--"
#            "--port"
#            "$PORT"
#            "--host"
#            "0.0.0.0"
#            "--disable-host-check"
          ];
          manager = "web";
        };
      };
    };

But I get:

Error:     <!DOCTYPE html>
Error:     ^
Error: SyntaxError: invalid syntax

The Python interpreter tried to execute my form.html file as if it was a py script, giving me SyntaxError. The HTML file is executed directly by python which is wrong, no clue how to fix this.

6

@Fred3.0 - you can use the dev.nix contents from the plain HTML project instead:

# To learn more about how to use Nix to configure your environment
# see: https://developers.google.com/idx/guides/customize-idx-env
{ pkgs, ... }: {
  # Which nixpkgs channel to use.
  channel = "stable-23.11"; # or "unstable"
  # Use https://search.nixos.org/packages to find packages
  packages = [
    pkgs.nodejs_20
    pkgs.python3
  ];
  # Sets environment variables in the workspace
  env = {};
  idx = {
    # Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"
    extensions = [
      # "vscodevim.vim"
    ];
    # Enable previews and customize configuration
    previews = {
      enable = true;
      previews = {
        web = {
          command = ["python3" "-m" "http.server" "$PORT" "--bind" "0.0.0.0"];
          manager = "web";
        };
      };
    };
  };
}

That should avoid this error.

1 Like
7

Superbe!
I could not get that nix file from the template since I’ve progressed too much on my current project with a python-flask / poetry setup. But I’ve just copied the below lines that interested me and voila.

previews = {
      enable = true;
      previews = {
        web = {
          command = [ "python3" "-m" "http.server" "$PORT" "--bind" "0.0.0.0" ];
          manager = "web";
        };
      };
    };
1 Like