jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Launch early, even if not ready

Browse Source 
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
This commit is contained in:
Lorenzo Blasa
2023-08-30 05:08:26 -07:00
committed by Facebook GitHub Bot
parent 3e8f94ceda
commit 2858259497
3 changed files with 84 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
desktop/flipper-server-core/src/server/startServer.tsx
View File

@@ -72,6 +72,8 @@ const verifyAuthToken = (req: http.IncomingMessage): boolean => {
return true; return true;
}; };
let isReady = false;
/** /**
* Orchestrates the creation of the HTTP server, proxy, and WS server. * Orchestrates the creation of the HTTP server, proxy, and WS server.
* @param config Server configuration. * @param config Server configuration.
@@ -108,7 +110,10 @@ async function startHTTPServer(config: Config): Promise<{
}); });
app.get('/', (_req, res) => { 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); res.end(content);
}); });
}); });
@@ -127,6 +132,8 @@ async function startHTTPServer(config: Config): Promise<{
server.close(); server.close();
}); });
server.listen(config.port);
return new Promise((resolve) => { return new Promise((resolve) => {
console.log(`Starting server on http://localhost:${config.port}`); console.log(`Starting server on http://localhost:${config.port}`);
const readyForIncomingConnections = ( const readyForIncomingConnections = (
@@ -134,14 +141,13 @@ async function startHTTPServer(config: Config): Promise<{
companionEnv: FlipperServerCompanionEnv, companionEnv: FlipperServerCompanionEnv,
): Promise<void> => { ): Promise<void> => {
attachSocketServer(socket, serverImpl, companionEnv); attachSocketServer(socket, serverImpl, companionEnv);
isReady = true;
return new Promise((resolve) => { return new Promise((resolve) => {
server.listen(config.port, undefined, () => {
tracker.track('server-started', { tracker.track('server-started', {
port: config.port, port: config.port,
}); });
resolve(); resolve();
}); });
});
}; };
resolve({app, server, socket, readyForIncomingConnections}); resolve({app, server, socket, readyForIncomingConnections});
}); });

5
desktop/flipper-server/src/index.tsx
View File

@@ -215,6 +215,9 @@ async function start() {
`[flipper-server][bootstrap] HTTP server started (${httpServerStartedMS} ms)`, `[flipper-server][bootstrap] HTTP server started (${httpServerStartedMS} ms)`,
); );
// At this point, the HTTP server is ready and listening.
launch();
const flipperServer = await startFlipperServer( const flipperServer = await startFlipperServer(
rootPath, rootPath,
staticPath, staticPath,
@@ -342,7 +345,7 @@ process.on('unhandledRejection', (reason, promise) => {
}); });
start() start()
.then(launch) .then(() => {})
.catch((e) => { .catch((e) => {
console.error(chalk.red('Server startup error: '), e); console.error(chalk.red('Server startup error: '), e);
process.exit(1); process.exit(1);

68
desktop/static/loading.html Normal file
View File

@@ -0,0 +1,68 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Loading...</title>
<style>
body {
font-family: system-ui;
font-size: 13px;
cursor: default;
overflow: hidden;
line-height: 1;
}
#container {
-webkit-app-region: drag;
z-index: 999999;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
padding: 50px;
overflow: auto;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #525252;
text-align: center;
}
</style>
</head>
<body>
<div id="container">
<div>
Loading...
</div>
</div>
<script>
// The loading page is shown until the server is ready to accept incoming
// connections. Poll until the server is ready and returns
// the actual entry point instead of this page.
async function checkAndReload() {
try {
const response = await fetch('.');
if (response.status >= 200 && response.status < 500) {
window.location.reload();
return;
}
} catch {
}
window.setTimeout(checkAndReload, 250);
}
checkAndReload();
</script>
</body>
</html>