UI Deployment

Esquio UI is a regular ASP.NET Core project as Blazor Wasm, you can get the code and deploy as you want, by default you need to configure the Database to be used ( Sql Server, Postress or MySql ) and the OpenId provider.

To simplify a local deployment we provide different Docker compose files located on build directory:

docker-compose -f ./build/docker-compose-demo-with-ui-sqlserver up --build
docker-compose -f ./build/docker-compose-demo-with-ui-npgsql up --build
docker-compose -f ./build/docker-compose-demo-with-ui-mysql up --build

By default, a OpenId provider with https://demo.identityserver.io is used but you can change to use any other standard OpenId ( Auth0 etc ) or Azure AD.

Docker

On https://hub.docker.com/r/xabarilcoding/esquioui you can find also Esquio UI docker images.

To run locally, pull it typing:

docker pull xabarilcoding/esquioui:4.0.0

To run this image, you have to set several environment variables, indicating some database and OpenId server properties:

docker run xabarilcoding/esquioui:4.0.0 -p 9000:80 \
 -e Data__ConnectionString=<your-connection-string> \
 -e Data__Store=[SqlServer|MySql|NpgSql]
 -e Security__DefaultUsers__0__ApplicationRole=[Contributor|Reader|Management]
 -e Security__DefaultUsers__0__SubjectId=<your-subject-id>
 -e Security__OpenId__ClientId=<openid-clientid> \
 -e Security__OpenId__Audience=<openid-audience> \
 -e Security__OpenId__Scope=<openid-scope> \
 -e Security__OpenId__Authority=<openid-authority> \
 -e Security__OpenId__ResponseType=<openid-response-type> \
 -e Security__OpenId__IsAzure=<IsAzure>

• Security__OpenId__ClientId: your client id interactive.public on https://demo.identityserver.io
• Security__OpenId__Audience: your security audience, this value is used on AddJwtBeaer to validate Beaer Tokens api on https://demo.identityserver.io
• Security__OpenId__Scope: your security audience api on https://demo.identityserver.io
• Security__OpenId__Authority: your authority https://demo.identityserver.io
• Security__OpenId__ResponseType: your openid flow response type to use code
• Security__OpenId__IsAzure: If you are using azure Ad as your provider this needs to be true

To configure Azure AD please follow existing docs on this like this. An example of AAD configuration is:

• Security__DefaultSubjectClaimType”: "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress",
• Security__OpenId__ClientId: "762ed2b1-8107-44d5-9c9b-72c75749fb35"
• Security__OpenId__Audience: "c1cc1b6a-7580-49e5-8ab8-0f3cc9f97127" remove the url prefix that AAD use api://
• Security__OpenId__Scope: c1cc1b6a-7580-49e5-8ab8-0f3cc9f97127/ui
• Security__OpenId__Authority: your authority https://login.microsoftonline.com/bf3ae910-a895-44e6-aed1-0ed9601d9035
• Security__OpenId__ResponseType: code
• Security__OpenId__IsAzure: true

Kubernetes

Alternatively, you can deploy it on your kubernetes cluster in a simple way.

Save your connection string into a file:

echo '<your-connection-string>' > ./connection-string.txt

And create a secret using this file:

kubectl create secret generic esquio-ui-secret --from-file=connection-string=./connection-string.txt

Save the following yaml in a file named esquio-ui.yaml:

apiVersion: v1
kind: Service
metadata:
  name: esquio-ui-release
  labels:
    app.kubernetes.io/name: esquio-ui
    app.kubernetes.io/instance: esquio-ui-release
spec:
  type: LoadBalancer
  ports:
    - port: 80
      targetPort: http
      protocol: TCP
      name: http
  selector:
    app.kubernetes.io/name: esquio-ui
    app.kubernetes.io/instance: esquio-ui-release
---
apiVersion: apps/v1beta2
kind: Deployment
metadata:
  name: esquio-ui-release
  labels:
    app.kubernetes.io/name: esquio-ui
    app.kubernetes.io/instance: esquio-ui-release
spec:
  replicas: 1
  selector:
    matchLabels:
      app.kubernetes.io/name: esquio-ui
      app.kubernetes.io/instance: esquio-ui-release
  template:
    metadata:
      labels:
        app.kubernetes.io/name: esquio-ui
        app.kubernetes.io/instance: esquio-ui-release
    spec:
      containers:
        - name: esquio-ui
          image: "xabarilcoding/esquioui:3.0.0"
          imagePullPolicy: IfNotPresent
          env:
            - name: ASPNETCORE_ENVIRONMENT
              value: "Development"
            - name: DATA__CONNECTIONSTRING
              valueFrom:
                secretKeyRef:
                  name: esquio-ui-secret
                  key: connection-string
            - name: DATA__STORE
              value: "[SqlServer|NpgSql|MySql]"
            - name: SECURITY__DEFAULTUSERS__0__APPLICATIONROLE
              value: "[Contributor|Reader]"
            - name: SECURITY__DEFAULTUSERS__0__SUBJECTID
              value: "<your-subject-id>"
            - name: DATA__STORE
              value: "[SqlServer|NpgSql|MySql]"
            - name: SECURITY__OPENID__CLIENTID
              value: "<your-openid-clientid>"
            - name: SECURITY__OPENID__AUDIENCE
              value: "<openid-audience>"
            - name: SECURITY__OPENID__SCOPE
              value: "<openid-scope>"
            - name: SECURITY__OPENID__AUTHORITY
              value: "<openid-authority>"
            - name: SECURITY__OPENID__RESPONSETYPE
              value: "<openid-response-type>"
            - name: Security__OpenId__IsAzure
              value: "<true/false>"
          ports:
            - name: http
              containerPort: 80
              protocol: TCP

And apply it with the command:

kubectl apply -f esquio-ui.yaml