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/README.md

@@ -3,3 +3,27 @@
 Stand alone Flipper server as NodeJS process, that uses flipper-server-core for device communication and also provides a webserver to serve flipper-ui.
 
 Flipper-server can be used as background process, for example on CI servers or to power IDE plugins.
+
+## Running flipper server
+
+### From NPM
+
+TODO:
+
+### From source
+
+```
+cd <Flipper checkout>/desktop
+yarn install
+yarn flipper-server
+```
+
+### Production build from source
+
+```
+cd <Flipper checkout>/desktop
+yarn install
+yarn build:flipper-server
+```
+
+Pass the `--open` flag to open Flipper server after building

desktop/flipper-server/package.json

@@ -5,6 +5,7 @@
   "description": "Standalone nodeJS based Flipper server",
   "repository": "facebook/flipper",
   "main": "server.js",
+  "bin": "server.js",
   "flipperBundlerEntry": "src",
   "license": "MIT",
   "bugs": "https://github.com/facebook/flipper/issues",
@@ -22,7 +23,9 @@
     "flipper-common": "0.0.0",
     "flipper-pkg-lib": "0.0.0",
     "flipper-server-core": "0.0.0",
-    "metro": "^0.66.2"
+    "metro": "^0.66.2",
+    "open": "^8.3.0",
+    "yargs": "^17.0.1"
   },
   "peerDependencies": {},
   "scripts": {
@@ -31,7 +34,8 @@
     "prepack": "yarn reset && yarn build"
   },
   "files": [
-    "dist/**/*"
+    "dist/**/*",
+    "static/**/*"
   ],
   "homepage": "https://github.com/facebook/flipper",
   "keywords": [

desktop/flipper-server/server.js

@@ -1,3 +1,4 @@
+#!/usr/bin/env node
 /**
  * Copyright (c) Facebook, Inc. and its affiliates.
  *

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);