[GH-ISSUE #3256] [bug]: The self hosting Admin app shows only black screen #1081

Closed
opened 2026-03-16 18:25:35 +03:00 by kerem · 10 comments
Owner

Originally created by @giripradip on GitHub (Aug 14, 2023).
Original GitHub issue: https://github.com/hoppscotch/hoppscotch/issues/3256

Is there an existing issue for this?

  • I have searched the existing issues

Current behavior

I have tried to self host the hoppscotch on my own linux server machine. I am using the default given database. After successfully deploying the project, i can only see the black screen for the admin part(http://localhost:3100). When i check the console of my browser i see the following issue:

index.bad74fd7.js:68 POST http://localhost:3170/graphql net::ERR_CONNECTION_REFUSED
(anonymous) @ index.bad74fd7.js:68
uu @ index.bad74fd7.js:68
pO @ index.bad74fd7.js:68
Ts.request @ index.bad74fd7.js:68
Ts. @ index.bad74fd7.js:68
(anonymous) @ index.bad74fd7.js:67
o$ @ index.bad74fd7.js:70
Ay @ index.bad74fd7.js:79
performAuthInit @ index.bad74fd7.js:79
(anonymous) @ index.bad74fd7.js:94
(anonymous) @ index.bad74fd7.js:94
index.bad74fd7.js:67 Uncaught (in promise) Error: Network Error
at tu (index.bad74fd7.js:67:8560)
at w.onerror (index.bad74fd7.js:68:1947)

Steps to reproduce

  1. self host the app using docker
  2. use the default database that is provided with the docker container
  3. run the migration after container is running
  4. Access the admin area via http://localhost:3100

Environment

Production

Version

Self-hosted

Originally created by @giripradip on GitHub (Aug 14, 2023). Original GitHub issue: https://github.com/hoppscotch/hoppscotch/issues/3256 ### Is there an existing issue for this? - [X] I have searched the existing issues ### Current behavior I have tried to self host the hoppscotch on my own linux server machine. I am using the default given database. After successfully deploying the project, i can only see the black screen for the admin part(http://localhost:3100). When i check the console of my browser i see the following issue: index.bad74fd7.js:68 POST http://localhost:3170/graphql net::ERR_CONNECTION_REFUSED (anonymous) @ index.bad74fd7.js:68 uu @ index.bad74fd7.js:68 pO @ index.bad74fd7.js:68 Ts.request @ index.bad74fd7.js:68 Ts.<computed> @ index.bad74fd7.js:68 (anonymous) @ index.bad74fd7.js:67 o$ @ index.bad74fd7.js:70 Ay @ index.bad74fd7.js:79 performAuthInit @ index.bad74fd7.js:79 (anonymous) @ index.bad74fd7.js:94 (anonymous) @ index.bad74fd7.js:94 index.bad74fd7.js:67 Uncaught (in promise) Error: Network Error at tu (index.bad74fd7.js:67:8560) at w.onerror (index.bad74fd7.js:68:1947) ### Steps to reproduce 1. self host the app using docker 2. use the default database that is provided with the docker container 3. run the migration after container is running 4. Access the admin area via http://localhost:3100 ### Environment Production ### Version Self-hosted
kerem 2026-03-16 18:25:35 +03:00
Author
Owner

@balub commented on GitHub (Aug 16, 2023):

@giripradip does the hoppscotch app work fine or do you encounter similar issues where you cannot connect to and fetch data from the backend there too?

<!-- gh-comment-id:1679983229 --> @balub commented on GitHub (Aug 16, 2023): @giripradip does the hoppscotch app work fine or do you encounter similar issues where you cannot connect to and fetch data from the backend there too?
Author
Owner

@giripradip commented on GitHub (Aug 16, 2023):

@balub I have the similar issue with hoppscotch too but i can see some UI.

<!-- gh-comment-id:1680161119 --> @giripradip commented on GitHub (Aug 16, 2023): @balub I have the similar issue with hoppscotch too but i can see some UI.
Author
Owner

@giripradip commented on GitHub (Aug 16, 2023):

At first, I didn't provide any OAuth provider settings(i left .env file as default for OAuth). I thought it will work with email options but it didn't. Then, I have added client id and secret for Google.
I updated the WHITELISTED_ORIGINS variables in the .env files.

Now, it is working

Thanks!

<!-- gh-comment-id:1680292680 --> @giripradip commented on GitHub (Aug 16, 2023): At first, I didn't provide any OAuth provider settings(i left .env file as default for OAuth). I thought it will work with email options but it didn't. Then, I have added client id and secret for Google. I updated the WHITELISTED_ORIGINS variables in the .env files. Now, it is working Thanks!
Author
Owner

@senyalefoka commented on GitHub (Feb 17, 2025):

I tried to follow the documents and I also changed my ngnix and .env file but still, I get black screen

<!-- gh-comment-id:2663498828 --> @senyalefoka commented on GitHub (Feb 17, 2025): I tried to follow the documents and I also changed my ngnix and .env file but still, I get black screen
Author
Owner

@senyalefoka commented on GitHub (Feb 17, 2025):

I can host mailmcher and it does not load my github oath, i would to get and step by step process to archive this selfhosting

<!-- gh-comment-id:2663504680 --> @senyalefoka commented on GitHub (Feb 17, 2025): I can host mailmcher and it does not load my github oath, i would to get and step by step process to archive this selfhosting
Author
Owner

@balub commented on GitHub (Feb 17, 2025):

Hey @senyalefoka can you check if your backend's url as added the WHITELISTED_DOMAINS env variable ? The issue you described usually happens due to CORS.

<!-- gh-comment-id:2664235473 --> @balub commented on GitHub (Feb 17, 2025): Hey @senyalefoka can you check if your backend's url as added the `WHITELISTED_DOMAINS` env variable ? The issue you described usually happens due to CORS.
Author
Owner

@senyalefoka commented on GitHub (Feb 19, 2025):

@balub Here is my .ENV file please check Where I made mistakes
------Backend Config------------------------------#

Prisma Config

DATABASE_URL=postgresql://postgres:postgres@172.30.1.216:5432/postgres

Auth Tokens Config

JWT_SECRET="secret1233"
TOKEN_SALT_COMPLEXITY=10
MAGIC_LINK_TOKEN_VALIDITY=3

Default validity is 7 days (604800000 ms) in ms

REFRESH_TOKEN_VALIDITY=604800000

Default validity is 1 day (86400000 ms) in ms

ACCESS_TOKEN_VALIDITY=86400000
SESSION_SECRET=2ab6a90bf906f94bb32e6b9a56yh478h

Reccomended to be true, set to false if you are using http

Note: Some auth providers may not support http requests

ALLOW_SECURE_COOKIES=true

Sensitive Data Encryption Key while storing in Database (32 character)

DATA_ENCRYPTION_KEY=2ab6a90bf906f94bb32e6b9a56yh4789

Hoppscotch App Domain Config

REDIRECT_URL=http://localhost:3000
WHITELISTED_ORIGINS=http://localhost:3170,http://localhost:3000,http://localhost:3100
VITE_ALLOWED_AUTH_PROVIDERS=GOOGLE,GITHUB,MICROSOFT,EMAIL

Google Auth Config

GOOGLE_CLIENT_ID==982642005295-oh57qcpop87onhq1kbu9up7dcgfm068r.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=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
GOOGLE_CALLBACK_URL=http://localhost:3170/v1/auth/google/callback
GOOGLE_SCOPE=macdonaldsekgaphola@gmail.com

Github Auth Config

GITHUB_CLIENT_ID=Iv23limxKvMR7LQyufuX
GITHUB_CLIENT_SECRET=2ab6a90bf906f94bb32e6b9a56e647968d005613
GITHUB_CALLBACK_URL=http://localhost:3170/v1/auth/github/callback
GITHUB_SCOPE=senyalefoka:macdonaldsekgaphola@gmail.com

Microsoft Auth Config

ENABLE_MICROSOFT_SSO=false
MICROSOFT_CLIENT_ID=************************************************
MICROSOFT_CLIENT_SECRET=************************************************
MICROSOFT_CALLBACK_URL=http://localhost:3170/v1/auth/microsoft/callback
MICROSOFT_SCOPE=user.read
MICROSOFT_TENANT=common

Mailer config

MAILER_SMTP_ENABLE=true
MAILER_USE_CUSTOM_CONFIGS=false
MAILER_ADDRESS_FROM=matlou.sekgaphola@tauspace.com

MAILER_SMTP_URL=smtps://user@domain.com:pass@smtp.domain.com

used if custom mailer configs is false

The following are used if custom mailer configs is true

MAILER_SMTP_HOST=smtp.domain.com
MAILER_SMTP_PORT=587
MAILER_SMTP_SECURE=true
MAILER_SMTP_USER=user@domain.com
MAILER_SMTP_PASSWORD=pass
MAILER_TLS_REJECT_UNAUTHORIZED=false

Rate Limit Config

RATE_LIMIT_TTL=60

In seconds

RATE_LIMIT_MAX=100

Max requests per IP

#-----------------------Frontend Config------------------------------#

Base URLs

VITE_BASE_URL=http://localhost:3000
VITE_SHORTCODE_BASE_URL=http://localhost:3000
VITE_ADMIN_URL=http://localhost:3100

Backend URLs

VITE_BACKEND_GQL_URL=http://localhost:3170/graphql
VITE_BACKEND_WS_URL=ws://localhost:3170/graphql
VITE_BACKEND_API_URL=http://localhost:3170/v1

Terms Of Service And Privacy Policy Links (Optional)

VITE_APP_TOS_LINK=https://docs.hoppscotch.io/support/terms
VITE_APP_PRIVACY_POLICY_LINK=https://docs.hoppscotch.io/support/privacy

Set to true for subpath based access

ENABLE_SUBPATH_BASED_ACCESS=false

<!-- gh-comment-id:2669737314 --> @senyalefoka commented on GitHub (Feb 19, 2025): @balub Here is my .ENV file please check Where I made mistakes ------Backend Config------------------------------# # Prisma Config DATABASE_URL=postgresql://postgres:postgres@172.30.1.216:5432/postgres # Auth Tokens Config JWT_SECRET="secret1233" TOKEN_SALT_COMPLEXITY=10 MAGIC_LINK_TOKEN_VALIDITY=3 # Default validity is 7 days (604800000 ms) in ms REFRESH_TOKEN_VALIDITY=604800000 # Default validity is 1 day (86400000 ms) in ms ACCESS_TOKEN_VALIDITY=86400000 SESSION_SECRET=2ab6a90bf906f94bb32e6b9a56yh478h # Reccomended to be true, set to false if you are using http # Note: Some auth providers may not support http requests ALLOW_SECURE_COOKIES=true # Sensitive Data Encryption Key while storing in Database (32 character) DATA_ENCRYPTION_KEY=2ab6a90bf906f94bb32e6b9a56yh4789 # Hoppscotch App Domain Config REDIRECT_URL=http://localhost:3000 WHITELISTED_ORIGINS=http://localhost:3170,http://localhost:3000,http://localhost:3100 VITE_ALLOWED_AUTH_PROVIDERS=GOOGLE,GITHUB,MICROSOFT,EMAIL # Google Auth Config GOOGLE_CLIENT_ID==982642005295-oh57qcpop87onhq1kbu9up7dcgfm068r.apps.googleusercontent.com GOOGLE_CLIENT_SECRET=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 GOOGLE_CALLBACK_URL=http://localhost:3170/v1/auth/google/callback GOOGLE_SCOPE=macdonaldsekgaphola@gmail.com # Github Auth Config GITHUB_CLIENT_ID=Iv23limxKvMR7LQyufuX GITHUB_CLIENT_SECRET=2ab6a90bf906f94bb32e6b9a56e647968d005613 GITHUB_CALLBACK_URL=http://localhost:3170/v1/auth/github/callback GITHUB_SCOPE=senyalefoka:macdonaldsekgaphola@gmail.com # Microsoft Auth Config ENABLE_MICROSOFT_SSO=false MICROSOFT_CLIENT_ID=************************************************ MICROSOFT_CLIENT_SECRET=************************************************ MICROSOFT_CALLBACK_URL=http://localhost:3170/v1/auth/microsoft/callback MICROSOFT_SCOPE=user.read MICROSOFT_TENANT=common # Mailer config MAILER_SMTP_ENABLE=true MAILER_USE_CUSTOM_CONFIGS=false MAILER_ADDRESS_FROM=matlou.sekgaphola@tauspace.com MAILER_SMTP_URL=smtps://user@domain.com:pass@smtp.domain.com # used if custom mailer configs is false # The following are used if custom mailer configs is true MAILER_SMTP_HOST=smtp.domain.com MAILER_SMTP_PORT=587 MAILER_SMTP_SECURE=true MAILER_SMTP_USER=user@domain.com MAILER_SMTP_PASSWORD=pass MAILER_TLS_REJECT_UNAUTHORIZED=false # Rate Limit Config RATE_LIMIT_TTL=60 # In seconds RATE_LIMIT_MAX=100 # Max requests per IP #-----------------------Frontend Config------------------------------# # Base URLs VITE_BASE_URL=http://localhost:3000 VITE_SHORTCODE_BASE_URL=http://localhost:3000 VITE_ADMIN_URL=http://localhost:3100 # Backend URLs VITE_BACKEND_GQL_URL=http://localhost:3170/graphql VITE_BACKEND_WS_URL=ws://localhost:3170/graphql VITE_BACKEND_API_URL=http://localhost:3170/v1 # Terms Of Service And Privacy Policy Links (Optional) VITE_APP_TOS_LINK=https://docs.hoppscotch.io/support/terms VITE_APP_PRIVACY_POLICY_LINK=https://docs.hoppscotch.io/support/privacy # Set to `true` for subpath based access ENABLE_SUBPATH_BASED_ACCESS=false
Author
Owner

@senyalefoka commented on GitHub (Feb 19, 2025):

Image

<!-- gh-comment-id:2669822669 --> @senyalefoka commented on GitHub (Feb 19, 2025): ![Image](https://github.com/user-attachments/assets/c9948ded-ef1f-4e17-8eca-42fff81bda42)
Author
Owner

@mirarifhasan commented on GitHub (Feb 20, 2025):

@senyalefoka
Please change the environment variable ALLOW_SECURE_COOKIES=false, as your IP is not secure.
Additionally, ensure that the backend container is running.

If you continue to face the same issue, please share the output of docker ps and the backend container logs.

<!-- gh-comment-id:2672006450 --> @mirarifhasan commented on GitHub (Feb 20, 2025): @senyalefoka Please change the environment variable `ALLOW_SECURE_COOKIES=false`, as your IP is not secure. Additionally, ensure that the backend container is running. If you continue to face the same issue, please share the output of `docker ps` and the backend container logs.
Author
Owner

@balub commented on GitHub (Feb 20, 2025):

Hey @senyalefoka , I noticed you pushed your Google and GitHub auth credentials here, I would recommend rotating them.

<!-- gh-comment-id:2672376155 --> @balub commented on GitHub (Feb 20, 2025): Hey @senyalefoka , I noticed you pushed your Google and GitHub auth credentials here, I would recommend rotating them.
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
starred/hoppscotch#1081
No description provided.