From 2858259497d7f5560ff278bfd7f23045b00ba680 Mon Sep 17 00:00:00 2001 From: Lorenzo Blasa Date: Wed, 30 Aug 2023 05:08:26 -0700 Subject: [PATCH] Launch early, even if not ready Summary: Flipper Launcher downloads, unpacks, launches Flipper, and closes itself. This is fine except for the fact that Flipper may be initiating and thus there's a gap of a few seconds until engineers see the main Flipper UI. This change improves this by launching earlier, even if just showing a loading page until Flipper is actually ready. Reviewed By: passy, aigoncharov Differential Revision: D48824479 fbshipit-source-id: aa6147a09f313d80592c9b08d089660ba73773a4 --- .../src/server/startServer.tsx | 18 +++-- desktop/flipper-server/src/index.tsx | 5 +- desktop/static/loading.html | 68 +++++++++++++++++++ 3 files changed, 84 insertions(+), 7 deletions(-) create mode 100644 desktop/static/loading.html diff --git a/desktop/flipper-server-core/src/server/startServer.tsx b/desktop/flipper-server-core/src/server/startServer.tsx index 00db40d1e..8d89945c8 100644 --- a/desktop/flipper-server-core/src/server/startServer.tsx +++ b/desktop/flipper-server-core/src/server/startServer.tsx @@ -72,6 +72,8 @@ const verifyAuthToken = (req: http.IncomingMessage): boolean => { return true; }; +let isReady = false; + /** * Orchestrates the creation of the HTTP server, proxy, and WS server. * @param config Server configuration. @@ -108,7 +110,10 @@ async function startHTTPServer(config: Config): Promise<{ }); app.get('/', (_req, res) => { - fs.readFile(path.join(config.staticPath, config.entry), (_err, content) => { + const resource = isReady + ? path.join(config.staticPath, config.entry) + : path.join(config.staticPath, 'loading.html'); + fs.readFile(resource, (_err, content) => { res.end(content); }); }); @@ -127,6 +132,8 @@ async function startHTTPServer(config: Config): Promise<{ server.close(); }); + server.listen(config.port); + return new Promise((resolve) => { console.log(`Starting server on http://localhost:${config.port}`); const readyForIncomingConnections = ( @@ -134,13 +141,12 @@ async function startHTTPServer(config: Config): Promise<{ companionEnv: FlipperServerCompanionEnv, ): Promise => { attachSocketServer(socket, serverImpl, companionEnv); + isReady = true; return new Promise((resolve) => { - server.listen(config.port, undefined, () => { - tracker.track('server-started', { - port: config.port, - }); - resolve(); + tracker.track('server-started', { + port: config.port, }); + resolve(); }); }; resolve({app, server, socket, readyForIncomingConnections}); diff --git a/desktop/flipper-server/src/index.tsx b/desktop/flipper-server/src/index.tsx index 5a2ba8ceb..17f5935aa 100644 --- a/desktop/flipper-server/src/index.tsx +++ b/desktop/flipper-server/src/index.tsx @@ -215,6 +215,9 @@ async function start() { `[flipper-server][bootstrap] HTTP server started (${httpServerStartedMS} ms)`, ); + // At this point, the HTTP server is ready and listening. + launch(); + const flipperServer = await startFlipperServer( rootPath, staticPath, @@ -342,7 +345,7 @@ process.on('unhandledRejection', (reason, promise) => { }); start() - .then(launch) + .then(() => {}) .catch((e) => { console.error(chalk.red('Server startup error: '), e); process.exit(1); diff --git a/desktop/static/loading.html b/desktop/static/loading.html new file mode 100644 index 000000000..e16e5f652 --- /dev/null +++ b/desktop/static/loading.html @@ -0,0 +1,68 @@ + + + + + + + + + Loading... + + + + + + +
+
+ Loading... +
+ +
+ + + +