diff --git a/packages/twenty-front/index.html b/packages/twenty-front/index.html index e144b28fb..740aee959 100644 --- a/packages/twenty-front/index.html +++ b/packages/twenty-front/index.html @@ -28,7 +28,13 @@ /> Twenty - + + + + +EOF +) +# Use sed to replace the config block in index.html +# Using pattern space to match across multiple lines +sed -i.bak ' + //,//{ + //!{ + //!d + } + //r /dev/stdin + //d + } +' build/index.html <<< "$CONFIG_BLOCK" +rm -f build/index.html.bak diff --git a/packages/twenty-front/src/config/index.ts b/packages/twenty-front/src/config/index.ts index 4525e814d..a61b4ef53 100644 --- a/packages/twenty-front/src/config/index.ts +++ b/packages/twenty-front/src/config/index.ts @@ -12,12 +12,12 @@ const getDefaultUrl = () => { ) { // In development environment front and backend usually run on separate ports // we set the default value to localhost:3000. - // It dev context, we use env vars to overwrite it + // In dev context, we use env vars to overwrite it return 'http://localhost:3000'; } else { // Outside of localhost we assume that they run on the same port // because the backend will serve the frontend - // It prod context, we use env-config.js + window var to ovewrite it + // In prod context, we use index.html + window var to ovewrite it return `${window.location.protocol}//${window.location.hostname}${ window.location.port ? `:${window.location.port}` : '' }`; diff --git a/packages/twenty-server/src/main.ts b/packages/twenty-server/src/main.ts index 0a9e75b8d..548540494 100644 --- a/packages/twenty-server/src/main.ts +++ b/packages/twenty-server/src/main.ts @@ -80,7 +80,7 @@ const bootstrap = async () => { }), ); - // Create the env-config.js of the front at runtime + // Inject the server url in the frontend page generateFrontConfig(); // Enable session - Today it's used only for SSO diff --git a/packages/twenty-server/src/utils/generate-front-config.ts b/packages/twenty-server/src/utils/generate-front-config.ts index 5bc490639..be82e817b 100644 --- a/packages/twenty-server/src/utils/generate-front-config.ts +++ b/packages/twenty-server/src/utils/generate-front-config.ts @@ -13,23 +13,29 @@ export function generateFrontConfig(): void { }, }; - const configString = `window._env_ = ${JSON.stringify( - configObject.window._env_, - null, - 2, - )};`; + const configString = ` + + `; const distPath = path.join(__dirname, '../..', 'front'); - const filePath = path.join(distPath, 'env-config.js'); + const indexPath = path.join(distPath, 'index.html'); - if (!fs.existsSync(distPath)) { - fs.mkdirSync(distPath, { recursive: true }); + if (!fs.existsSync(indexPath)) { + console.log( + 'Frontend build not found, assuming it is served independently', + ); + + return; } - if ( - !fs.existsSync(filePath) || - fs.readFileSync(filePath, 'utf8') !== configString - ) { - fs.writeFileSync(filePath, configString, 'utf8'); - } + let indexContent = fs.readFileSync(indexPath, 'utf8'); + + indexContent = indexContent.replace( + /[\s\S]*?/, + configString, + ); + + fs.writeFileSync(indexPath, indexContent, 'utf8'); } diff --git a/packages/twenty-ui/src/utilities/config/index.ts b/packages/twenty-ui/src/utilities/config/index.ts index 5038c5010..5a9b2ce39 100644 --- a/packages/twenty-ui/src/utilities/config/index.ts +++ b/packages/twenty-ui/src/utilities/config/index.ts @@ -12,12 +12,12 @@ const getDefaultUrl = () => { ) { // In development environment front and backend usually run on separate ports // we set the default value to localhost:3000. - // It dev context, we use env vars to overwrite it + // In dev context, we use env vars to overwrite it return 'http://localhost:3000'; } else { // Outside of localhost we assume that they run on the same port // because the backend will serve the frontend - // It prod context, we use env-config.js + window var to ovewrite it + // In prod context, we use index.html + window var to ovewrite it return `${window.location.protocol}//${window.location.hostname}${ window.location.port ? `:${window.location.port}` : '' }`;