External Website

Defined intabs.hcl

The external website resource embeds external web content in the lab interface. It allows users to access third-party websites, documentation, tools, or web applications directly within the lab environment.

Use Cases

As a lab author, you can use external website resources to provide access to external tools and resources:

• Documentation Access: Embed official documentation sites, API references, and technical guides directly in the lab
• Cloud Consoles: Access cloud provider management interfaces (e.g. AWS Console, Google Cloud Console)
• SaaS Platform Access: Provide access to services that require their own window and cannot be embedded in iframes

External website resources bridge lab activities with the broader ecosystem of web-based tools and documentation.

HCL Syntax

Basic Syntax

resource "external_website" "name" {
  url = "https://docs.kubernetes.io"
}

Full Syntax

resource "external_website" "name" {
  url                 = "https://console.aws.amazon.com"
  open_in_new_window = true
}

Fields

Field	Type	Required	Description
url	string	✓	Enter the full HTTPS URL of the website to embed. Only secure HTTPS URLs are allowed for security reasons. ConstraintsURL must start with https://
open_in_new_window	bool	—	Enable this if the website blocks iframe embedding (X-Frame-Options header). When true, the link opens in a new window with full browser functionality. Defaultfalse

Examples

Documentation Reference

resource "external_website" "kubernetes_docs" {
  url = "https://kubernetes.io/docs/"
}

Web Console Access

resource "external_website" "aws_console" {
  url                 = "https://console.aws.amazon.com"
  open_in_new_window = true
}

Online Tools

resource "external_website" "json_formatter" {
  url = "https://jsonformatter.org"
}

resource "external_website" "regex_tester" {
  url = "https://regex101.com"
}

API Documentation

resource "external_website" "swagger_docs" {
  url = "https://petstore.swagger.io"
}

resource "external_website" "graphql_playground" {
  url = "https://graphql-playground.com"
}

Learning Resources

resource "external_website" "docker_tutorial" {
  url = "https://www.docker.com/101-tutorial"
}

resource "external_website" "git_reference" {
  url                 = "https://git-scm.com/docs"
  open_in_new_window = false
}

Usage in Layout

External websites are referenced in layout tabs:

resource "layout" "with_external_sites" {
  column {
    width = "40"
    instructions {}
  }

  column {
    width = "30"

    tab "terminal" {
      target = resource.terminal.main
      active = true
    }
  }

  column {
    width = "30"

    tab "docs" {
      target = resource.external_website.kubernetes_docs
      title  = "K8s Docs"
    }

    tab "console" {
      target = resource.external_website.aws_console
      title  = "AWS Console"
    }
  }
}

Display Behavior

Embedded (Default)

When open_in_new_window = false:

• Website loads in an iframe within the lab tab
• Users stay within the lab environment
• Navigation is contained within the tab
• Some sites may block iframe embedding (X-Frame-Options)

New Window

When open_in_new_window = true:

• Website opens in a new browser window/tab
• Full browser functionality available
• Users can switch between lab and website
• Bypasses iframe restrictions

Security Considerations

HTTPS Requirement

## ✅ Valid - HTTPS URL
resource "external_website" "valid_site" {
  url = "https://docs.example.com"
}

# ❌ Invalid - HTTP not allowed
resource "external_website" "invalid_site" {
  url = "http://docs.example.com"  # Will cause validation error
}

Best Practices

1. HTTPS Only: Always use HTTPS URLs for security and compatibility
2. Test Embedding: Verify sites work in iframes before deployment
3. Reliable Sources: Use stable, well-maintained external sites
4. New Window Strategy: Use open_in_new_window = true for sites that require full browser functionality or may block iframe embedding