Skip to main content

Web Component

Preparation​

You should have a small app ready that is running on a web browser. E.g. something with:

  • Python Streamlit
  • R/Shiny
  • Vue.js

Your application should have a working Dockerfile.

Create a web Component in Project Manifest​

If you have developed a running web application, Pergola allows you to publish it right away. You just need to define a corresponding Component in your pergola.yaml.

A basic Component without web definitions looks like this:

version: v1

components:
  - name: my-web-component
    docker:
      file: Dockerfile
    resources:
      cpu: 1000m
      memory: 2Gi

So far, it is runnable, but you cannot reach it via your browser. Why? Because:

  • There is no entry point, you need an Url ( https://something...) that points to your running application.
  • Pergola protects its Components, you need to define that network requests are allowed in.

Define web entry point​

Your application needs to be available in your network, have a Url, be secured by HTTPS and certificates. Pergola takes care of everything necessary, you just need to define an 'ingress' (aka entrypoint). An ingress usually just needs a name, that will become part of the generated Url.
To define this, add an 'ingresses'-property to your pergola.yaml with a subproperty 'host' and your chosen name.

It could look like:

[...]
    ingresses:
      - host: superdashboard

This will lead Pergola to create a secured network path to your running app, reachable via https://superdashboard-PROJECT-STAGE.apps.YOUR-PERGOLA-DOMAIN. E.g. https://superdashboard-playgroundproject-dev.apps.pergola.mycompany.com

Pergola takes care of security certificates, DNS and other relevant technical preconditions for you.

For reference please see Ingress in Project Manifest.

Allow inbound requests to your Component​

The Component needs to accept traffic coming via the entry point defined earlier. (All traffic is blocked by default for security reasons).

You need:

[...]
    ports:
      - 80

This publishes port 80 in the Pergola Stage. Pergola automatically links the earlier created ingress to this port. Please note that the ports property generally allows other Components to communicate via the given port, but it does not have an influence on the scenario here.

If you specify more than one port - e.g. your Component exposes multiple services, like web-frontend on port 80 and an API on 8081 - you would need to map the ingress to one port explicitly! For example:

[...]
    ingresses:
      - host: superdashboard
        port: 80
    ports:
      - 80
      - 8081

For reference please see Ports in Project Manifest.

Final pergola.yaml​

Putting it all together, a fully working pergola.yaml could look like this:

version: v1

components:
  - name: my-web-component
    docker:
      file: Dockerfile
    resources:
      cpu: 1000m
      memory: 2Gi
    ingresses:
      - host: superdashboard
    ports:
      - 80

For full reference of pergola.yaml please see Project Manifest.