Add proxying

README.md

@@ -48,8 +48,13 @@ elmServe(opts);
 | startPage      | string  | Specify a start page.                                            | ✓        | `index.html`    |
 | open           | boolean | Open in the browser automatically.                               | ✓        | `index.html`    |
 | pushstate      | boolean | Automatically serve the root or `index.html` for SPAs.           | ✓        | `index.html`    |
+| proxyPrefix    | string  | Proxy some requests to another server. (see below)               | ✓        |                 |
+| proxyHost      | string  | Proxy some requests to another server. (see below)               | ✓        |                 |
 | verbose        | boolean | If set to true, will show logging on the server and client side. | ✓        | `false`         |
 
+
+If either `proxyPrefix` or `proxyHost` is given, the other must be as well. If enabled, requests to paths starting with `proxyPrefix` will be proxied to another server running at `proxyHost`. This can be very useful if developing against an API backend running locally on a different port. Example: `{ proxyPrefi: '/api', proxyHost: 'http://localhost:9000' }`.
+
 ### Usage for Command Line Application
 
 ```
@@ -65,6 +70,8 @@ Options:
   -w, --watch-dir [watch-dir]    The directory to watch. Defaults the serving directory.
   -e, --exts [extensions]        Extensions separated by commas or pipes. Defaults to html,js,css.
   -p, --port [port]              The port to bind to. Can be set with PORT env variable as well. Defaults to 8080
+  --proxyPrefix [prefix]         Proxy requests to paths starting with `prefix` to another server. Requires `--proxyHost` and should be a string like `/api`. Defaults to not proxying
+  --proxyHost [host]             Proxy requests to another server running at `host`. Requires `--proxyHost` and should be a full URL, eg. `http://localhost:9000`. Defaults to not proxying
   -s, --start-page [start-page]  Specify a start page. Defaults to index.html
   -u, --pushstate [pushstate]    Automatically serve the root or `index.html` for SPAs. Defaults to false.
   -v, --verbose [verbose]        Turning on logging on the server and client side. Defaults to false

bin/elm-serve.js

@@ -30,6 +30,14 @@ program
     'The port to bind to. Can be set with PORT env variable as well. Defaults to 8080',
     '8080'
   )
+  .option(
+    '--proxyPrefix [prefix]',
+    'Proxy requests to paths starting with `prefix` to another server. Requires `--proxyHost` and should be a string like `/api`. Defaults to not proxying'
+  )
+  .option(
+    '--proxyHost [host]',
+    'Proxy requests to another server running at `host`. Requires `--proxyHost` and should be a full URL, eg. `http://localhost:9000`. Defaults to not proxying'
+  )
   .option(
     '-s, --start-page [start-page]',
     'Specify a start page. Defaults to index.html',
@@ -46,5 +54,12 @@ program
   )
   .parse(process.argv)
 
-var elmServe = path.join(__dirname, '../lib/elm-serve.js')
+if (
+  (program.proxyPrefix && program.proxyHost === undefined) ||
+  (program.proxyHost && program.proxyPrefix === undefined)) {
+  console.log('If either `--proxyPrefix` and `--proxyHost` is given, the other must be as well')
+  return
+}
+
+var elmServe = require(path.join(__dirname, '../lib/elm-serve.js'))
 elmServe(program)

lib/elm-reload-server.js

@@ -17,6 +17,8 @@ const runFile = argv._[4]
 const startPage = argv._[5]
 const pushstate = argv._[6]
 const verbose = argv._[7] === 'true'
+const proxyPrefix = argv._[8]
+const proxyHost = argv._[9]
 
 const reloadOpts = {
   port: port,
@@ -27,10 +29,20 @@ let reloadReturned
 
 const serve = serveStatic(dir, { index: ['index.html', 'index.htm'] })
 
+let proxy
+if (typeof proxyPrefix === 'string' && typeof proxyHost === 'string') {
+  proxy = require('http-proxy').createProxyServer();
+}
+
 const server = http.createServer(function (req, res) {
   const url = new URL(req.url)
-  const pathname = url.pathname.replace(/(\/)(.*)/, '$2') // Strip leading `/` so we can find files on file system
 
+  if (proxy && url.pathname.startsWith(proxyPrefix)) {
+    proxy.web(req, res, { target: proxyHost })
+    return
+  }
+
+  const pathname = url.pathname.replace(/(\/)(.*)/, '$2') // Strip leading `/` so we can find files on file system
   const fileEnding = pathname.split('.')[1]
 
   if (
@@ -79,7 +91,7 @@ server.listen(port, function () {
   } else {
     const time = new Date()
     console.log(
-      clc.green('Server restarted  at ' + time.toTimeString().slice(0, 8))
+      clc.green('Server restarted at ' + time.toTimeString().slice(0, 8))
     )
   }
 })

lib/elm-serve.js

@@ -14,6 +14,10 @@ module.exports = function elmServe (opts) {
 
   const serverFile = path.join(__dirname, './elm-reload-server.js')
 
+  if (opts.proxyPrefix && !opts.proxyPrefix.startsWith('/')) {
+    opts.proxyPrefix = opts.proxyPrefix + '/'
+  }
+
   var args = [
     '-e',
     opts.exts || 'html|js|css',
@@ -29,11 +33,16 @@ module.exports = function elmServe (opts) {
     runFile,
     opts.startPage || 'index.html',
     opts.pushstate || false,
-    opts.verbose || false
+    opts.verbose || false,
+    opts.proxyPrefix || -1,
+    opts.proxyHost || -1
   ]
   supervisor.run(args)
 
   console.log('\nReload web server:')
   console.log('listening on port ' + clc.blue.bold(opts.port || 8080))
   console.log('monitoring dir ' + clc.green.bold(opts.dir || process.cwd()))
+  if (opts.proxyPrefix && opts.proxyHost) {
+    console.log('proxying requests starting with ' + clc.green(opts.proxyPrefix) + ' to ' + clc.green(opts.proxyHost))
+  }
 }

package.json

@@ -23,6 +23,7 @@
     "commander": "2.9.0",
     "connect-pushstate": "1.1.0",
     "finalhandler": "1.1.1",
+    "http-proxy": "1.17.0",
     "minimist": "1.2.0",
     "opn": "5.3.0",
     "serve-static": "1.13.2",