Issue while Self hosting in K8s

[hellodhana]

I have deployed hoppscotch/hoppscotch:latest image in K8s with config map and secret store. Pod is running fine, but when I query base URL below, the page is blank.

https://amer.ingress.com/hoppscotch

Reason the page is blank is that its trying to load asset with without hoppscotch in URL. /hoppscotch is my prefix in ingress controller.

for example:
https://amer.ingress.com/assets/inter-cyrillic-ext-wght-normal-B2xhLi22.woff2
https://amer.ingress.com/assets/index-BLWbyyT9.js

Below is my config.

VITE_BASE_URL: "http://amer.ingress.com/hoppscotch"
VITE_SHORTCODE_BASE_URL: "http://amer.ingress.com/hoppscotch"
VITE_ADMIN_URL: "http://amer.ingress.com/hoppscotch/admin"
VITE_BACKEND_GQL_URL: "http://amer.ingress.com/hoppscotch/backend/graphql"
VITE_BACKEND_WS_URL: "wss://amer.ingress.com/hoppscotch/backend/graphql"
VITE_BACKEND_API_URL: "http://amer.ingress.com/hoppscotch/backend/v1"

Is there any config that I need to set so that it tries to load asset with right URL
https://amer.ingress.com/hoppscotch/assets/inter-cyrillic-ext-wght-normal-B2xhLi22.woff2
https://amer.ingress.com/hoppscotch/assets/index-BLWbyyT9.js

[liyasthomas]

@g3Bg2 can you look into this?

[g3Bg2]

@hellodhana
Have you added the pod's IP address to the subdomains(/hopscotch, /admin, /backend)?

This will give you ip
kubectl get ingress

[hellodhana]

Here is my ingress yaml

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: hoppscotch-ingress
  namespace: hoppscotch
  annotations:
    nginx.ingress.kubernetes.io/ssl-redirect: "false"
    nginx.ingress.kubernetes.io/use-regex: "true"
    nginx.ingress.kubernetes.io/rewrite-target: /$2
    nginx.ingress.kubernetes.io/proxy-body-size: 20m
    nginx.ingress.kubernetes.io/proxy-connect-timeout: "1800"
    nginx.ingress.kubernetes.io/proxy-read-timeout: "1800"
    nginx.ingress.kubernetes.io/proxy-send-timeout: "1800"
spec:
  ingressClassName: nginx
  tls:
  - hosts:
    - amer.ingress.com
    secretName: aks-ingress-tls  
  rules:
    - host: amer.ingress.com
      http:
        paths:
          - path: /hoppscotch(/|$)(.*)
            pathType: Prefix
            backend:
              service:
                name: hoppscotch-service
                port:
                  number: 80

Here is kubectl result

$ kubectl get ingress -n hoppscotch
NAME                 CLASS   HOSTS                        ADDRESS         PORTS     AGE
hoppscotch-ingress   nginx   amer.ingress.com   10.164.144.20   80, 443   26d

[g3Bg2]

@hellodhana
Testing this on minikubes?

Is your subpath enabled? Can you also share your example value.yaml file

Are you using helm charts?

[hellodhana]

I am running this in AKS(Azure K8s Service). Not using helm charts. I have many applications running in this cluster and each have a dedicated path in ingress config(example /appl1(/|$)(.) and /appl2(/|$)(.)

[g3Bg2]

@hellodhana

We have a dedicated helm chats for easy setup on k8s.

https://github.com/hoppscotch/helm-charts

You can try it. If you use subpath there is option to enable that in value.yaml file.

There is both community(SHC) and enterprise(SHE) edition.

[hellodhana]

I will try this out and comeback if I face issue. Thanks for timely help on this.

[hellodhana]

I tried using helm charts but facing same issue. I am using sub path

urls:
      base: "http://amer.ingress.com/hoppscotch2"
      shortcode: "http://amer.ingress.com/hoppscotch2"
      admin: "http://amer.ingress.com/hoppscotch2/admin"
      backend:
        gql: "http://amer.ingress.com/hoppscotch2/graphql"
        ws: "ws://amer.ingress.com/hoppscotch2/graphql"
        api: "http://amer.ingress.com/hoppscotch2/backend/v1"
      redirect: "http://amer.ingress.com/hoppscotch2"
      whitelistedOrigins: "http://amer.ingress.com/hoppscotch2,http://amer.ingress.com/hoppscotch2/admin,http://amer.ingress.com/hoppscotch2/admin"

    community:
      enableSubpathBasedAccess: true

When I access https://amer.ingress.com/hoppscotch2, I am getting 200 in browser but then page is not loaded as its trying load assets with below URL

https://amer.ingress.com/assets/inter-cyrillic-ext-wght-normal-B2xhLi22.woff2
https://amer.ingress.com/assets/index-BLWbyyT9.js

[g3Bg2]

@hellodhana

Using /hoppscotch as the base URL subpath is causing challenges, particularly with asset loading and redirects. Switch to a subdomain to simplify the configuration and ensure a smoother deployment (e.g., https://hoppscotch.amer.ingress.com). This approach aligns better with our setup and avoids the complexities of subpath routing.

[hellodhana]

@g3Bg2 / @liyasthomas : I stood up another ingress controller in separate namespace. I can now host it using sub path(https://hoppscotch.amer.ingress.com/) option.

But I am facing issues when i use hoppscotch to test internal APIs. Internal APIs are hosted in Azure APIM in one of the peered VNET. . I am not using any interceptor here. Are API calls from self hosted hoppscotch are routed externally?

[g3Bg2]

@hellodhana

You are using a subdomain, not a subpath, which is why it works.

Yes. Since the API calls originate from your browser, they're going through your local internet connection rather than through your Kubernetes cluster's network. You can enable proxy..

[hellodhana]

@g3Bg2 I am connected using VPN which is peered with APIM. I can access those APIs through CURL from my desktop. But not through self hosted hoppscotch.

[g3Bg2]

@hellodhana

Try accessing the API endpoint directly in your browser address bar first.

I think your browser (where Hoppscotch runs) may not be routing traffic through your VPN connection properly.

[hellodhana]

@g3Bg2 : I dont have issues accessing the API endpoint in browser.

Since this is not working I switched to Browser Extension Interceptor. I did add my self hosted URL(https://hoppscotch.amer.ingres.com) in extension. Now API is returning 200 response code. But response is empty and Graphql response provides below response in developer tool. I can also see in backend logs that API was called but i dont see response from backend either.

{
"errors": [
{
"message": "auth/cookies_not_found",
"locations": [
{
"line": 2,
"column": 3
}
],
"path": [
"createUserHistory"
],
"extensions": {
"code": "FORBIDDEN",
"stacktrace": [
"ForbiddenException: auth/cookies_not_found",
" at /dist/backend/dist/auth/strategies/jwt.strategy.js:31:12",
" at /dist/backend/node_modules/.pnpm/fp-ts@2.16.9/node_modules/fp-ts/lib/FromEither.js:44:97",
" at pipe (/dist/backend/node_modules/.pnpm/fp-ts@2.16.9/node_modules/fp-ts/lib/function.js:303:20)",
" at extractToken (/dist/backend/dist/auth/strategies/jwt.strategy.js:30:55)",
" at JwtStrategy. (/dist/backend/dist/auth/strategies/jwt.strategy.js:37:51)",
" at JwtStrategy.jwtFromRequest (/dist/backend/node_modules/.pnpm/passport-jwt@4.0.1/node_modules/passport-jwt/lib/extract_jwt.js:84:39)",
" at JwtStrategy.authenticate (/dist/backend/node_modules/.pnpm/passport-jwt@4.0.1/node_modules/passport-jwt/lib/strategy.js:93:22)",
" at attempt (/dist/backend/node_modules/.pnpm/passport@0.7.0/node_modules/passport/lib/middleware/authenticate.js:378:16)",
" at authenticate (/dist/backend/node_modules/.pnpm/passport@0.7.0/node_modules/passport/lib/middleware/authenticate.js:379:7)",
" at /dist/backend/node_modules/.pnpm/@nestjs+passport@10.0.3@nestjs+common@10.4.16_class-transformer@0.5.1_class-validator@_972aa39c941543fe8e9de55b2cefd6f8/node_modules/@nestjs/passport/dist/auth.guard.js:88:3"
],
"originalError": {
"message": "auth/cookies_not_found",
"error": "Forbidden",
"statusCode": 403
}
}
}
],
"data": null
}