GoogleCloudPlatform
Frontend Build Success but dist Folder Missing on Cloud Build, Leading to Unavailable Hosting Page
The frontend application (Angular) successfully passes the Cloud Build process, resulting in a STATUS: SUCCESS for the build and deployment to Firebase Hosting. However, upon navigating to the deployed Hosting URL (https://gaugeragent.web.app), the page is unavailable (shows "Page Not Found" or similar). Investigation of the Cloud Build logs reveals that the dist output directory, which should contain the built application files, is not being created or found in the expected location within the Cloud Build environment.
Symptoms Observed in Cloud Build Logs:
ng build --configuration production command reports: Application bundle generation complete. Angular build completed with status: 0 Angular build was successful. Immediately following the "successful" build, ls commands (both custom ones in the frontend.yaml and standard ones) for the expected output paths (dist/frontend/ or frontend/dist) report: ls: cannot access '...': No such file or directory The Cloud Build ultimately fails at the ls verification step because the directory is not found. Previously, the build also showed ERROR ReferenceError: window is not defined during the Angular build step, but this specific error has now been resolved. Investigation and Troubleshooting Steps Taken:
Initial Deployment Check: Confirmed firebase.json's public path pointed to frontend/dist/frontend/browser. window is not defined error: Identified ERROR ReferenceError: window is not defined during the ng build step, suggesting issues with Angular's server-side rendering (SSR) or prerendering process attempting to access browser-specific APIs in a Node.js environment. Attempted isPlatformBrowser guards: Added isPlatformBrowser checks in agent-chat.component.ts where window was accessed. (Outcome: Did not resolve the build error.) Disabled Prerendering: Set "prerender": false in frontend/angular.json. (Outcome: Successfully removed the ERROR ReferenceError: window is not defined from the logs. However, the dist folder still did not appear.) Removed SSR Configuration: Removed "server": "src/main.server.ts" and the entire "ssr" block from frontend/angular.json to ensure no server-side build is attempted. (Outcome: Confirmed the window is not defined error is gone, but the dist directory remains missing.) Added ls debug steps: Inserted explicit ls -R commands in frontend.yaml to confirm the presence of the dist folder after the Angular build. (Outcome: These ls commands consistently report "No such file or directory," indicating the build output is genuinely missing or in an entirely unexpected location.) Current State & Next Steps:
The primary build error (window is not defined) has been eliminated. The dist folder, essential for deployment, is still not being generated by the Angular build in the Cloud Build environment, despite the ng build command reporting success. The current plan is to simplify the outputPath in frontend/angular.json from "dist/frontend" to "dist", and adjust all corresponding paths in frontend.yaml and firebase.json (public: "frontend/dist") to align with this simpler output structure. This aims to rule out any path-related misinterpretations during the build.
same issue here, dist Folder Missing on Cloud Build.
====
Step #5: === Deploying to 'data-qna-env'... Step #5: Step #5: i deploying hosting Step #5: i hosting[data-qna-env]: beginning deploy... Step #5: Step #5: Error: Directory '/dist/frontend/browser' for Hosting does not exist. Finished Step #5
Found that the build failed on step #2 due to a budget issue. But the error was ignored due to a config in frontend.yaml.
npm run build || true // remove || ture otherwise this command will always return success even though there is a build error.
==== Error Message ====
Step #2: ✘ [ERROR] bundle initial exceeded maximum budget. Budget 2.00 MB was not met by 363.15 kB with a total of 2.35 MB. Step #2: Step #2: Step #2: ✘ [ERROR] src/app/business-user/business-user.component.scss exceeded maximum budget. Budget 4.00 kB was not met by 4.82 kB with a total of 8.82 kB. Step #2: Step #2: Step #2: ✘ [ERROR] src/app/agent-chat/agent-chat.component.scss exceeded maximum budget. Budget 4.00 kB was not met by 990 bytes with a total of 4.97 kB.
==== Fix ====
I modified the budget in angular.json.
"budgets": [ { "type": "initial", "maximumWarning": "1.5mb", "maximumError": "2.5mb" // increase to "2.5mb" }, { "type": "anyComponentStyle", "maximumWarning": "6kb", "maximumError": "10kb" // increase this } ]
Also need to modify the path in firebase.json:
{ "hosting": { "public": "dist/frontend/browser", // remove the leading "/" "ignore": [ "firebase.json", "/.*", "/node_modules/" ], "rewrites": [ { "source": "", "destination": "/index.html" } ] } }
@mengjiaowang ,Thank you this is so helpfull
On Wed, 4 Jun 2025 at 11:28, Mengjiao Wang @.***> wrote:
mengjiaowang left a comment (GoogleCloudPlatform/Open_Data_QnA#76) https://github.com/GoogleCloudPlatform/Open_Data_QnA/issues/76#issuecomment-2938674001
Found that the build failed on step #2 https://github.com/GoogleCloudPlatform/Open_Data_QnA/pull/2 due to a budget issue. But the error was ignored due to a config in frontend.yaml.
npm run build || true // remove || ture otherwise this command will always return success even though there is a build error.
==== Error Message ====
Step #2 https://github.com/GoogleCloudPlatform/Open_Data_QnA/pull/2: ✘ [ERROR] bundle initial exceeded maximum budget. Budget 2.00 MB was not met by 363.15 kB with a total of 2.35 MB. Step #2 https://github.com/GoogleCloudPlatform/Open_Data_QnA/pull/2: Step #2 https://github.com/GoogleCloudPlatform/Open_Data_QnA/pull/2: Step #2 https://github.com/GoogleCloudPlatform/Open_Data_QnA/pull/2: ✘ [ERROR] src/app/business-user/business-user.component.scss exceeded maximum budget. Budget 4.00 kB was not met by 4.82 kB with a total of 8.82 kB. Step #2 https://github.com/GoogleCloudPlatform/Open_Data_QnA/pull/2: Step #2 https://github.com/GoogleCloudPlatform/Open_Data_QnA/pull/2: Step #2 https://github.com/GoogleCloudPlatform/Open_Data_QnA/pull/2: ✘ [ERROR] src/app/agent-chat/agent-chat.component.scss exceeded maximum budget. Budget 4.00 kB was not met by 990 bytes with a total of 4.97 kB.
==== Fix ====
I modified the budget in angular.json.
"budgets": [ { "type": "initial", "maximumWarning": "1.5mb", "maximumError": "2.5mb" // increase to "2.5mb" }, { "type": "anyComponentStyle", "maximumWarning": "6kb", "maximumError": "10kb" // increase this } ]
Also need to modify the path in firebase.json:
{ "hosting": { "public": "dist/frontend/browser", // remove the leading "/" "ignore": [ "firebase.json", " /.", "*/node_modules/
" ], "rewrites": [ { "source": "", "destination": "/index.html" } ] } }
— Reply to this email directly, view it on GitHub https://github.com/GoogleCloudPlatform/Open_Data_QnA/issues/76#issuecomment-2938674001, or unsubscribe https://github.com/notifications/unsubscribe-auth/BG3GZED3IHV7ZKS64DQZPHD3B2DKBAVCNFSM6AAAAAB6L77HU2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDSMZYGY3TIMBQGE . You are receiving this because you authored the thread.Message ID: @.***>