twenty
twenty copied to clipboard
twentyhq
Welcome screen and create/workspace white on self-hosted and online
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.
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.
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="{"rayId":"87c8bfa28e4a0d66","version":"2024.4.1","token":"997ded3bf28943ddb8eb592e4d9fe012"}" crossorigin="anonymous"></script>
</body></html>
The script from Cloudflare is actually there.
UPDATE:
This seems to have fixed the thing on my on-prem setup:
- I ran
yarnas for troubleshooting guide. - I ran
npx nx database:resetas for troubleshooting guide. - The
FRONT_BASE_URLseems to be necessary to make everything work. I set it to be the same as the other varSERVER_URLwithout the port and suddenly the webpage became accessible. - Stopped and restarted the compose without deleting the volumes.
- Seems to work.
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}
UPDATE:
This seems to have fixed the thing on my on-prem setup:
- I ran
yarnas for troubleshooting guide.- I ran
npx nx database:resetas for troubleshooting guide.- The
FRONT_BASE_URLseems to be necessary to make everything work. I set it to be the same as the other varSERVER_URLwithout the port and suddenly the webpage became accessible.- Stopped and restarted the compose without deleting the volumes.
- 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 [email protected] the whole app just works. Setting SIGN_IN_PREFILLED=false and going through the troubleshooting steps again, however, does not work. So no [email protected] but also my own email is generating a white screen.
Hello,
Thanks for the feedback so far.
Let’s assume the self hosted version has something wrong caused by me. We’ll dive later on into that.
I get the same issue when I try to start the 7 day demo from the website directly as well.
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?
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 ;)
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.
@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:
Feel free to book anytime next week if it's still stuck by then!
https://cal.com/ifelix/15min
Got it! I'm used to use that but calling it differently due to Safari bias 😄
I'll keep you posted!
@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!
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
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 :)
Sorry I'll be closing this for now as we don't really have any good steps to reproduce locally. If anyone has clear steps to reproduce from a fresh install please let us know and I'll re-open. Thanks!
Had the same issue, I was trying to run a nginx reverse proxy to my local server and expose it for other people to use it. I'm using the default docker compose file. I was able to access it locally, (SERVER_URL=http://my-local-ip-:port) but externally people ran into the blank page, that's because it was trying to fetch data from a local ip on an external setting:
So I setup my SERVER_URL=http://mydomain-or-public-ip:port and worked fine externally, but the problem is I can't access it locally now because my router has NAT reflection, that means I can't access my own public ip and redirect to the local one. Also tried changing other environment variables but none worked out, FRONT_BASE_URL was unuseful aswell. So my suggestion is somehow make this server url dynamic depending on external or local environments, or create another variable for local access.
@dancpluz yes setting SERVER_URL=http://mydomain-or-public-ip:port is the right thing to do (FRONT_BASE_URL shouldn't be used except you want to host the frontend separately which we do on our cloud version but don't recommend for simple self-hosted installs). Not sure about your use-case to access it internally / not familiar with NAT reflection though. I feel like that would be a problem common to any application you expose and not specific to Twenty.
I am also running into this issue. I have my instance running behind a Caddy reverse proxy. I have tried setting SERVER_URL=http://crm.mydomain.com:3000 by itself. FRONT_BASE_URL and SERVER_URL and both with http:// and https://.
The error I get everytime is:
Access to fetch at 'http://localhost:3000/graphql' from origin 'https://crm.mydomain.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
I have also tried hard coding FRONT_BASE_URL and SERVER_URL. Seems the localhost isnt being changed somewhere? or being called somewhere?
Definitely wouldn't call this closed even if it's not reproducible at this point. People are still having an issue with it and think it would help if people could see this was still an issue to contribute to finding a way to reproduce it.
I was able to get rid of the CORS issue. it seems that referenced volumes were not being updated when changing the URL values. after deleting the volumes and recreating the application, the warning is gone but I am still getting a white screen just with no errors.
stopping the containers, removing old volumes and setting SERVER_URL to https://crm.mydomain.com without :3000 seems to have worked.
my question is why it happened in the first place as my SERVER_URL was set to this originally but the localhost was still coming up. it's like docker didn't take the .env variable.