Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Welcome screen and create/workspace white on self-hosted and online #5229

Open
gabrielefronze opened this issue Apr 30, 2024 · 15 comments
Open

Welcome screen and create/workspace white on self-hosted and online #5229

gabrielefronze opened this issue Apr 30, 2024 · 15 comments
Labels
type: bug Something isn't working

Comments

@gabrielefronze
Copy link

gabrielefronze commented Apr 30, 2024 •
edited

Bug Description

Both a self-hosted copy I just ran via docker-compose and the official page (https://app.twenty.com/welcome) show the same behaviour.

Screenshot 2024-04-30 at 18 03 05 Screenshot 2024-04-30 at 18 03 47

This behaviour is present in multiple browsers and appears to be independent from that (Safari, Chrome, Firefox tested).
Javascript is enabled on all such browsers.

EDIT: tested on my iPad as well and the behaviour is the same.

Screenshot 2024-04-30 at 18 07 01

Expected behavior

I should be welcomed or taken to the create workspace wizard, but I have no clue since I never experienced the procedure due to the page being completely white.

Technical inputs

The HTML code of the welcome page is the following:

<html lang="en"><head><style type="text/css">.t16y9g8l700-beta13{appearance:none;background-color:var(--rdg-background-color);block-size:100%;border:2px solid #ccc;box-sizing:border-box;color:var(--rdg-color);font-family:inherit;font-size:var(--rdg-font-size);inline-size:100%;padding-block:0;padding-inline:6px;vertical-align:top}.t16y9g8l700-beta13:focus{border-color:var(--rdg-selection-color);outline:none}.t16y9g8l700-beta13::placeholder{color:#999;opacity:1}</style><style type="text/css">.a888944700-beta13{fill:currentColor}.a888944700-beta13>path{transition:d .1s}</style><style type="text/css">.cadd3bp700-beta13{background-color:var(--rdg-selection-color);block-size:8px;cursor:move;inline-size:8px;inset-block-end:0;inset-inline-end:0;position:absolute}.cadd3bp700-beta13:hover{background-color:var(--rdg-background-color);block-size:16px;border:2px solid var(--rdg-selection-color);inline-size:16px}</style><style type="text/css">.c1tngyp1700-beta13.rdg-cell{padding:0}</style><style type="text/css">.snfqesz700-beta13.r1otpg64700-beta13{line-height:var(--rdg-summary-row-height)}.snfqesz700-beta13.r1otpg64700-beta13>.c1wupbe700-beta13{position:sticky}.s1jijrjz700-beta13>.c1wupbe700-beta13{border-block-start:2px solid var(--rdg-summary-border-color)}</style><style type="text/css">.s1n3hxke700-beta13{inset-block-end:var(--rdg-summary-row-bottom);inset-block-start:var(--rdg-summary-row-top)}</style><style type="text/css">.gyxx7e9700-beta13:not([aria-selected=true]){background-color:var(--rdg-header-background-color)}.gyxx7e9700-beta13>.c1wupbe700-beta13:not(:last-child):not(.c9dpaye700-beta13){border-inline-end:none}</style><style type="text/css">.c1bmg16t700-beta13,.ccpfvsn700-beta13{background-color:#ccf}.c1bmg16t700-beta13.ccpfvsn700-beta13{background-color:#99f}</style><style type="text/css">.h197vzie700-beta13{background-color:var(--rdg-header-background-color);display:contents;font-weight:700;line-height:var(--rdg-header-row-height)}.h197vzie700-beta13>.c1wupbe700-beta13{inset-block-start:0;position:sticky;z-index:2}.h197vzie700-beta13>.c1730fa4700-beta13{z-index:3}</style><style type="text/css">.celq7o9700-beta13{touch-action:none}.celq7o9700-beta13:after{content:"";cursor:col-resize;inline-size:10px;inset-block-end:0;inset-block-start:0;inset-inline-end:0;position:absolute}</style><style type="text/css">.h1tr5c9i700-beta13{cursor:pointer;display:flex}.h1tr5c9i700-beta13:focus{outline:none}.h19r0msv700-beta13{flex-grow:1;overflow:hidden;overflow:clip;text-overflow:ellipsis}</style><style type="text/css">.gch972y700-beta13{outline:none}.cz2qf0d700-beta13{stroke:currentColor;stroke-width:1.5px;fill:transparent;margin-inline-start:4px;vertical-align:middle}.cz2qf0d700-beta13>path{transition:d .1s}</style><style type="text/css">.cd9l4jz700-beta13{align-items:center;cursor:pointer;display:flex;inset:0;justify-content:center;margin-inline-end:1px;position:absolute}.c1noyk41700-beta13{all:unset}.cdwjxv8700-beta13{background-color:var(--rdg-background-color);block-size:20px;border:2px solid var(--rdg-border-color);content:"";inline-size:20px}.c1noyk41700-beta13:checked+.cdwjxv8700-beta13{background-color:var(--rdg-checkbox-color);outline:4px solid var(--rdg-background-color);outline-offset:-6px}.c1noyk41700-beta13:focus+.cdwjxv8700-beta13{border-color:var(--rdg-checkbox-focus-color)}.cca4mwn700-beta13{cursor:default}.cca4mwn700-beta13 .cdwjxv8700-beta13{background-color:var(--rdg-checkbox-disabled-background-color);border-color:var(--rdg-checkbox-disabled-border-color)}</style><style type="text/css">.r1otpg64700-beta13{background-color:var(--rdg-background-color);display:contents;line-height:var(--rdg-row-height)}.r1otpg64700-beta13:hover{background-color:var(--rdg-row-hover-background-color)}.r1otpg64700-beta13[aria-selected=true]{background-color:var(--rdg-row-selected-background-color)}.r1otpg64700-beta13[aria-selected=true]:hover{background-color:var(--row-selected-hover-background-color)}.rel5gk2700-beta13{outline:2px solid var(--rdg-selection-color);outline-offset:-2px}.r1qymf1z700-beta13:before{border-inline-start:2px solid var(--rdg-selection-color);content:"";display:inline-block;height:100%;inset-inline-start:0;position:sticky}</style><style type="text/css">.r104f42s700-beta13{--rdg-color:#000;--rdg-border-color:#ddd;--rdg-summary-border-color:#aaa;--rdg-background-color:#fff;--rdg-header-background-color:#f9f9f9;--rdg-row-hover-background-color:#f5f5f5;--rdg-row-selected-background-color:#dbecfa;--row-selected-hover-background-color:#c9e3f8;--rdg-checkbox-color:#005194;--rdg-checkbox-focus-color:#61b8ff;--rdg-checkbox-disabled-border-color:#ccc;--rdg-checkbox-disabled-background-color:#ddd;--rdg-selection-color:#66afe9;--rdg-font-size:14px;content-visibility:auto;background-color:var(--rdg-background-color);block-size:350px;border:1px solid var(--rdg-border-color);box-sizing:border-box;color:var(--rdg-color);color-scheme:var(--rdg-color-scheme,light dark);contain:strict;contain:size layout style paint;display:grid;font-size:var(--rdg-font-size);overflow:auto;user-select:none}@supports not (contain:strict){.r104f42s700-beta13{position:relative;z-index:0}}.r104f42s700-beta13 *,.r104f42s700-beta13 :after,.r104f42s700-beta13 :before{box-sizing:inherit}.r104f42s700-beta13:before{content:"";grid-column:1/-1;grid-row:1/-1}.r104f42s700-beta13.rdg-dark{--rdg-color-scheme:dark;--rdg-color:#ddd;--rdg-border-color:#444;--rdg-summary-border-color:#555;--rdg-background-color:#212121;--rdg-header-background-color:#1b1b1b;--rdg-row-hover-background-color:#171717;--rdg-row-selected-background-color:#1a73bc;--row-selected-hover-background-color:#1768ab;--rdg-checkbox-color:#94cfff;--rdg-checkbox-focus-color:#c7e6ff;--rdg-checkbox-disabled-border-color:#000;--rdg-checkbox-disabled-background-color:#333}.r104f42s700-beta13.rdg-light{--rdg-color-scheme:light}@media (prefers-color-scheme:dark){.r104f42s700-beta13:not(.rdg-light){--rdg-color:#ddd;--rdg-border-color:#444;--rdg-summary-border-color:#555;--rdg-background-color:#212121;--rdg-header-background-color:#1b1b1b;--rdg-row-hover-background-color:#171717;--rdg-row-selected-background-color:#1a73bc;--row-selected-hover-background-color:#1768ab;--rdg-checkbox-color:#94cfff;--rdg-checkbox-focus-color:#c7e6ff;--rdg-checkbox-disabled-border-color:#000;--rdg-checkbox-disabled-background-color:#333}}.v7ly7s700-beta13.r1otpg64700-beta13{cursor:move}.fc4f4zb700-beta13{grid-column:1/-1;pointer-events:none;z-index:4}</style><style type="text/css">.c1wupbe700-beta13{background-color:inherit;border-block-end:1px solid var(--rdg-border-color);border-inline-end:1px solid var(--rdg-border-color);contain:size style;grid-row-start:var(--rdg-grid-row-start);outline:none;overflow:hidden;overflow:clip;padding-block:0;padding-inline:8px;position:relative;text-overflow:ellipsis;white-space:nowrap}.c1wupbe700-beta13[aria-selected=true]{outline:2px solid var(--rdg-selection-color);outline-offset:-2px}.cd0kgiy700-beta13 .c1wupbe700-beta13{contain:content}.c1730fa4700-beta13{position:sticky;z-index:1}.c9dpaye700-beta13{box-shadow:calc(2px*var(--rdg-sign)) 0 5px -2px hsla(0,0%,53%,.3)}</style>
<meta charset="UTF-8">
<link rel="icon" href="/icons/android/android-launchericon-48-48.png">
<link rel="apple-touch-icon" href="/icons/ios/192.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#000000">
<meta name="description" content="A modern open-source CRM">
<meta property="og:image" content="https://raw.githubusercontent.com/twentyhq/twenty/main/docs/static/img/social-card.png">
<meta property="og:description" content="A modern open-source CRM">
<meta property="og:title" content="Twenty">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://raw.githubusercontent.com/twentyhq/twenty/main/docs/static/img/social-card.png">
<meta name="twitter:description" content="A modern open-source CRM">
<meta name="twitter:title" content="Twenty">
<style type="text/css">@font-face {font-family:Inter;font-style:normal;font-weight:400;src:url(/cf-fonts/v/inter/5.0.16/greek/wght/normal.woff2);unicode-range:U+0370-03FF;font-display:swap;}@font-face {font-family:Inter;font-style:normal;font-weight:400;src:url(/cf-fonts/v/inter/5.0.16/greek-ext/wght/normal.woff2);unicode-range:U+1F00-1FFF;font-display:swap;}@font-face {font-family:Inter;font-style:normal;font-weight:400;src:url(/cf-fonts/v/inter/5.0.16/latin/wght/normal.woff2);unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap;}@font-face {font-family:Inter;font-style:normal;font-weight:400;src:url(/cf-fonts/v/inter/5.0.16/cyrillic/wght/normal.woff2);unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;font-display:swap;}@font-face {font-family:Inter;font-style:normal;font-weight:400;src:url(/cf-fonts/v/inter/5.0.16/latin-ext/wght/normal.woff2);unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:swap;}@font-face {font-family:Inter;font-style:normal;font-weight:400;src:url(/cf-fonts/v/inter/5.0.16/cyrillic-ext/wght/normal.woff2);unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;font-display:swap;}@font-face {font-family:Inter;font-style:normal;font-weight:400;src:url(/cf-fonts/v/inter/5.0.16/vietnamese/wght/normal.woff2);unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;font-display:swap;}@font-face {font-family:Inter;font-style:normal;font-weight:500;src:url(/cf-fonts/v/inter/5.0.16/cyrillic-ext/wght/normal.woff2);unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;font-display:swap;}@font-face {font-family:Inter;font-style:normal;font-weight:500;src:url(/cf-fonts/v/inter/5.0.16/greek-ext/wght/normal.woff2);unicode-range:U+1F00-1FFF;font-display:swap;}@font-face {font-family:Inter;font-style:normal;font-weight:500;src:url(/cf-fonts/v/inter/5.0.16/greek/wght/normal.woff2);unicode-range:U+0370-03FF;font-display:swap;}@font-face {font-family:Inter;font-style:normal;font-weight:500;src:url(/cf-fonts/v/inter/5.0.16/latin/wght/normal.woff2);unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap;}@font-face {font-family:Inter;font-style:normal;font-weight:500;src:url(/cf-fonts/v/inter/5.0.16/latin-ext/wght/normal.woff2);unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:swap;}@font-face {font-family:Inter;font-style:normal;font-weight:500;src:url(/cf-fonts/v/inter/5.0.16/cyrillic/wght/normal.woff2);unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;font-display:swap;}@font-face {font-family:Inter;font-style:normal;font-weight:500;src:url(/cf-fonts/v/inter/5.0.16/vietnamese/wght/normal.woff2);unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;font-display:swap;}@font-face {font-family:Inter;font-style:normal;font-weight:600;src:url(/cf-fonts/v/inter/5.0.16/cyrillic/wght/normal.woff2);unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;font-display:swap;}@font-face {font-family:Inter;font-style:normal;font-weight:600;src:url(/cf-fonts/v/inter/5.0.16/latin-ext/wght/normal.woff2);unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:swap;}@font-face {font-family:Inter;font-style:normal;font-weight:600;src:url(/cf-fonts/v/inter/5.0.16/vietnamese/wght/normal.woff2);unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;font-display:swap;}@font-face {font-family:Inter;font-style:normal;font-weight:600;src:url(/cf-fonts/v/inter/5.0.16/greek/wght/normal.woff2);unicode-range:U+0370-03FF;font-display:swap;}@font-face {font-family:Inter;font-style:normal;font-weight:600;src:url(/cf-fonts/v/inter/5.0.16/greek-ext/wght/normal.woff2);unicode-range:U+1F00-1FFF;font-display:swap;}@font-face {font-family:Inter;font-style:normal;font-weight:600;src:url(/cf-fonts/v/inter/5.0.16/cyrillic-ext/wght/normal.woff2);unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;font-display:swap;}@font-face {font-family:Inter;font-style:normal;font-weight:600;src:url(/cf-fonts/v/inter/5.0.16/latin/wght/normal.woff2);unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap;}</style>
<title>Twenty</title>
<script src="/env-config.js"></script>
<script type="module" crossorigin="" src="/assets/index-Z7jBmval.js"></script>
<link rel="stylesheet" crossorigin="" href="/assets/index-qO8hV6ns.css">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"><div id="captcha-widget" data-size="invisible"></div></div>
<script src="https://static.cloudflareinsights.com/beacon.min.js/v55bfa2fee65d44688e90c00735ed189a1713218998793" integrity="sha512-FIKRFRxgD20moAo96hkZQy/5QojZDAbyx0mQ17jEGHCJc/vi0G2HXLtofwD7Q3NmivvP9at5EVgbRqOaOQb+Rg==" data-cf-beacon="{&quot;rayId&quot;:&quot;87c8bfa28e4a0d66&quot;,&quot;version&quot;:&quot;2024.4.1&quot;,&quot;token&quot;:&quot;997ded3bf28943ddb8eb592e4d9fe012&quot;}" crossorigin="anonymous"></script>


</body></html>

The script from Cloudflare is actually there.
@gabrielefronze gabrielefronze added the type: bug Something isn't working label Apr 30, 2024
@fvalle1
Copy link

fvalle1 commented Apr 30, 2024

+1 I observe the same

@gabrielefronze
Copy link
Author

gabrielefronze commented Apr 30, 2024 •
edited

UPDATE:

This seems to have fixed the thing on my on-prem setup:

  1. I ran yarn as for troubleshooting guide.
  2. I ran npx nx database:reset as for troubleshooting guide.
  3. The FRONT_BASE_URL seems to be necessary to make everything work. I set it to be the same as the other var SERVER_URL without the port and suddenly the webpage became accessible.
  4. Stopped and restarted the compose without deleting the volumes.
  5. Seems to work.

@arpan-ny
Copy link

+1 had the same bug

@darekdesu
Copy link
Contributor

How did you create docker-compose file? The one used with self-hosted installation script (docs link) has fallback FRONT_BASE_URL to SERVER_URL if it's not set in .env file:

# https://github.com/twentyhq/twenty/blob/main/packages/twenty-docker/docker-compose.yml

 environment:
      ...
      SERVER_URL: ${SERVER_URL}
      FRONT_BASE_URL: ${FRONT_BASE_URL:-$SERVER_URL}

@darekdesu darekdesu mentioned this issue Apr 30, 2024
Open
@timboozle
Copy link

timboozle commented May 1, 2024 •
edited

UPDATE:

This seems to have fixed the thing on my on-prem setup:

  1. I ran yarn as for troubleshooting guide.
  2. I ran npx nx database:reset as for troubleshooting guide.
  3. The FRONT_BASE_URL seems to be necessary to make everything work. I set it to be the same as the other var SERVER_URL without the port and suddenly the webpage became accessible.
  4. Stopped and restarted the compose without deleting the volumes.
  5. Seems to work.

Same issue and followed your steps exactly but no luck, unfortunately. I can enter my email but after that it's just a white screen. It may be worth mentioning that there are no errors in the console whatsoever.

EDIT: I have SIGN_IN_PREFILLED=true and when I log in as tim@apple.dev the whole app just works. Setting SIGN_IN_PREFILLED=false and going through the troubleshooting steps again, however, does not work. So no tim@apple.dev but also my own email is generating a white screen.

@gabrielefronze
Copy link
Author

gabrielefronze commented May 1, 2024 via email •
edited

@FelixMalfait
Copy link
Member

Hey sorry for the delay, I missed this. I tried on other browsers but can't reproduce. Seems like a very serious issue indeed.
Would you wind showing screenshots of your network tab? Seems like maybe main JS script is getting blocked?

@gabrielefronze
Copy link
Author

Hey @FelixMalfait ,

With pleasure.
What do you mean by "network tab"?
I am currently using JS for development and have no issue so far.
If you prefer we can set up a live call for me to show you what happens?

P.s. nice Feynman picture ;)

@gabrielefronze
Copy link
Author

UPDATE: I just tried again to log in on your platform and now I got prompted with the plan selection form. It seems to be back to normal operation. I'll later test it on local deployment as well.

@FelixMalfait
Copy link
Member

@gabrielefronze mmh too bad you can't reproduce it now. Would have loved to see it live :)

By network tab I meant this in your browsers' developer console:

Screenshot 2024-05-03 at 16 14 39

Feel free to book anytime next week if it's still stuck by then!

https://cal.com/ifelix/15min

@gabrielefronze
Copy link
Author

Got it!
I'm used to use that but calling it differently due to Safari bias 😄

I'll keep you posted!

@EndlessUndo
Copy link

@FelixMalfait I got the same issue and can reproduce it. Here is a screenshot of the network tab.

Hope this helps. Please let me know if you need something else!

Screenshot 2024-05-04 235434

@luccamrofc
Copy link

+1

@aljazceru
Copy link

aljazceru commented May 15, 2024 •
edited

same here, exactly the same problem as @EndlessUndo, clearly you're not respecting SERVER_URL everywhere @FelixMalfait and it then breaks the CORS leading to black site

self hosted deployment seems to be broken atm

@Freebios
Copy link
Contributor

Freebios commented May 17, 2024 •
edited

Hello there,

I just ran a fresh install an could not reproduce the issue out of the box.
I was able to get CORS issue by changing the SERVER_URL for something else than localhost:3000 and then accessing the website trough localhost:3000

FRONT_BASE_URL is to be used if you host your frontend and your backend independently (eg. on a bucket), bu default the backend serve the front and this variable is not needed.

Would you mind checking if removing FRONT_BASE_URL and setting SERVER_URL to the address you want to expose your app works?
Also, was there something unclear in the documentation that we could improve on that matter?

Thanks :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
type: bug Something isn't working
Projects
Product development ✅
Status: 🆕 New
Milestone
No milestone
Development

No branches or pull requests
11 participants
@aljazceru @darekdesu @timboozle @gabrielefronze @FelixMalfait @fvalle1 @Freebios @luccamrofc @arpan-ny @EndlessUndo and others