Couper Documentation

edge

SPA

The spa blocks configure the Web serving for SPA assets. Can be defined multiple times as long as the base_path+paths is unique.

Block nameContextLabel
spaServer BlockOptional
spa {
    base_path = "/my-app" # mounts on /my-app(/**,/special)
    bootstrap_file = "./htdocs/index.html"
    paths = ["/**", "/special"]
}

Bootstrap Data

As it could get complicated to configure an SPA based on its environment (urls, clientIDs, ...) Couper can inject those environment based values into the bootstrap_file before serving it to the client.

The first bootstrap_data_placeholder will be replaced with the evaluated value of bootstrap_data. This happens on startup and is meant to inject env values.

bootstrap_data Example

# couper.hcl
spa {
    bootstrap_file = "./htdocs/index.html"
    paths = ["/**"]
    bootstrap_data = {
      url: env.MY_API_URL,
      prop: "value",
    }
}

<!-- ./htdocs/index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <script>
      try {
        window.AppConfig = __BOOTSTRAP_DATA__;
      } catch(e) {
        console.warn('DEVELOPMENT MODE: ', e)
        window.AppConfig = {} // fallback for local development
      }
    </script>
  </head>
  <body>App</body>
</html>

The result would be the following snippet. Just place this <script> tag before all other script references in the head tag. Then the application can access the window.AppConfig object to bootstrap its configuration.

<!-- ... -->
  <script>
    try {
      window.AppConfig = {
        "url": "https://docs.couper.io/",
        "prop": "value",
      };
    } catch(e) {
      console.warn('DEVELOPMENT MODE: ', e)
      window.AppConfig = {} // fallback for local development
    }
  </script>
<!-- ... -->

Attributes

NameTypeDefaultDescription
access_control
tuple (string)
[]

Sets predefined access control for spa block context.

add_response_headers
object
-

Key/value pairs to add as response headers in the client response.

base_path
string
-

Configures the path prefix for all requests.

bootstrap_data
object
-

JSON object which replaces the placeholder from bootstrap_file content.

bootstrap_data_placeholder
string
"__BOOTSTRAP_DATA__"

String which will be replaced with bootstrap_data.

bootstrap_file
string
-

Location of the bootstrap file.

custom_log_fields
object
-

Log fields for custom logging. Inherited by nested blocks.

disable_access_control
tuple (string)
[]

Disables access controls by name.

paths
tuple (string)
[]

List of SPA paths that need the bootstrap file.

remove_response_headers
tuple (string)
[]

List of names to remove headers from the client response.

set_response_headers
object
-

Key/value pairs to set as response headers in the client response.

Nested Blocks

NameDescription
cors

Configures CORS settings (zero or one).