Make flipper-server stand-alone servable

Summary:
This diff makes flipper-server stand-alone servable as a single package.

It basically works as follows:

- (default) plugins are build as usually into static folder
- static folder is copied into flipper-server/static (as far as relevant)
- `flipper-server/src/index.tsx` is bundled into `flipper-server/dist/index.js`
- `flipper-ui-browser/src/index.tsx` is bundled into `flipper-server/static/bundle.js`

If flipper-server is started without the `--bundler` config, the `bundle.js` will be served statically, rather than starting up the Metro bundler with all the typical transforms (in a distributed version of the package those all wouldn't resolve)

Things to be done in next diffs:

* make sure plugins actually load in the non bundled setup
* make sure flipper-server gets published properly
* make sure build is created as part of CI

At the end of this stack, running `npx flipper-server` on any machine should basically be a viable approach to get flipper up and running locally :)

Reviewed By: nikoant

Differential Revision: D33171107

fbshipit-source-id: 4af8ac2699467a0b55283fe084640482700744c2

desktop/flipper-server/src/index.tsx

@@ -12,13 +12,45 @@ import path from 'path';
 import {startFlipperServer} from './startFlipperServer';
 import {startBaseServer} from './startBaseServer';
 import {startSocketServer} from './startSocketServer';
-// TODO: currently flipper-server is only suitable for development,
-// needs to be come independently runnable, prebundled, distributed, etc!
-// in future require conditionally
 import {startWebServerDev} from './startWebServerDev';
 
-const PORT = 52342;
-const rootDir = path.resolve(__dirname, '..', '..');
+import yargs from 'yargs';
+import open from 'open';
+import {sleep} from 'flipper-common';
+
+const argv = yargs
+  .usage('yarn flipper-server [args]')
+  .options({
+    port: {
+      describe: 'Port to serve on',
+      type: 'number',
+      default: 52342,
+    },
+    bundler: {
+      describe:
+        'Serve the UI bundle from source. This option only works for source checkouts',
+      type: 'boolean',
+      default: false,
+    },
+    open: {
+      describe: 'Open Flipper in the default browser after starting',
+      type: 'boolean',
+      default: true,
+    },
+  })
+  .version('DEV')
+  .help()
+  .parse(process.argv.slice(1));
+
+console.log(
+  `Starting flipper server with ${
+    argv.bundler ? 'UI bundle from source' : 'pre-bundled UI'
+  }`,
+);
+
+const rootDir = argv.bundler
+  ? path.resolve(__dirname, '..', '..')
+  : path.resolve(__dirname, '..'); // in pre packaged versions of the server, static is copied inside the package
 const staticDir = path.join(rootDir, 'static');
 
 async function start() {
@@ -28,14 +60,14 @@ async function start() {
   };
 
   const {app, server, socket} = await startBaseServer({
-    port: PORT,
+    port: argv.port,
     staticDir,
     entry: 'index.web.dev.html',
   });
 
   const [flipperServer] = await Promise.all([
     startFlipperServer(rootDir, staticDir),
-    startWebServerDev(app, server, socket, rootDir),
+    argv.bundler ? startWebServerDev(app, server, socket, rootDir) : undefined,
   ]);
 
   startSocketServer(flipperServer, socket);
@@ -43,10 +75,14 @@ async function start() {
 
 start()
   .then(() => {
-    console.log(
-      'Flipper DEV server started at ' +
-        chalk.green(chalk.bold(`http://localhost:${PORT}/index.web.dev.html`)),
-    );
+    const url = `http://localhost:${argv.port}/index.web${
+      argv.bundler ? '.dev' : ''
+    }.html`;
+    console.log('Flipper server started at ' + chalk.green(chalk.bold(url)));
+    if (argv.open) {
+      sleep(1000);
+      open(url);
+    }
   })
   .catch((e) => {
     console.error(chalk.red('Server error: '), e);