add proxy option and specs

farism · Sep 1, 2017 · 9dc8290 · 9dc8290
1 parent a0e7667
commit 9dc8290
Show file tree

Hide file tree

Showing 8 changed files with 74 additions and 27 deletions.
diff --git a/guides/advanced.md b/guides/advanced.md
@@ -2,20 +2,19 @@
 
 Elm Factory is essentially a CLI tool that is a thin wrapper over a few core libraries while exposing additional functionality.
 
-The tasks themselves are orchestrated using [gulp](https://gulpjs.com/), and a handful of plugins. These plugins include:
+The build tasks are orchestrated using [gulp](https://gulpjs.com/) and a handful of plugins. These plugins include:
 
-- [`gulp-elm`](https://github.com/philopon/gulp-elm) - a wrapper around node-elm-compiler
-- [`gulp-elm-find-dependencies`](https://github.com/farism/gulp-elm-find-dependencies) - a wrapper around elm-find-dependencies
+- [`gulp-elm-basic`](https://github.com/farism/gulp-elm-basic) - a wrapper around node-elm-compiler
 - [`gulp-elm-css`](https://github.com/farism/gulp-elm-css) - a wrapper around elm-css
-- [`gulp-elm-extract-assets`](https://github.com/farism/gulp-elm-extract-assets) - a custom plugin for extracting tagged assets from a compiled Elm application
+- [`gulp-elm-extract-assets`](https://github.com/farism/gulp-elm-extract-assets) - a gulp plugin for extracting assets from a compiled Elm application
 - [`gulp-postcss`](https://github.com/postcss/gulp-postcss) - a wrapper around postcss
 
-And a few others. However, the above are the core plugins that are used for the `dev` and `build` tasks. If one was feeling adventurous they could easily use these plugins to create their own build - or dev - pipelines.
+If one was feeling adventurous they could easily use these plugins to create their own build - or dev - pipelines.
 
 Here is a quick example of the `build-css` gulp task in `elm-factory`:
 
 ```js
-gulp.task('_css', () =>
+gulp.task('build-css', () =>
   gulp.src(stylesheets)
     .pipe(elmCss())
     .pipe(postcss([

diff --git a/package.json b/package.json
@@ -22,7 +22,8 @@
     "build": "babel src -d lib",
     "coverage": "nyc report --reporter=text-lcov | coveralls",
     "prepublishOnly": "npm run build",
-    "test": "nyc --reporter=html --reporter=text mocha"
+    "test": "nyc --reporter=html --reporter=text mocha",
+    "test:mocha": "mocha"
   },
   "dependencies": {
     "browser-sync": "^2.18.13",

diff --git a/src/cmds/dev.js b/src/cmds/dev.js
@@ -45,5 +45,10 @@ module.exports = {
       description: 'livereload port',
       default: defaults.lrPort,
     },
+    x: {
+      alias: 'proxy',
+      description: 'additional proxies',
+      default: defaults.proxy,
+    },
   },
 }
diff --git a/src/defaults.js b/src/defaults.js
@@ -21,6 +21,7 @@ const dev = {
   reactorHost: host,
   reactorPort: port + 1,
   lrPort: 35729,
+  proxy: undefined,
 }
 
 const init = {}

diff --git a/src/tasks/dev.js b/src/tasks/dev.js
@@ -133,6 +133,7 @@ const startBrowserSync = (
   reactor,
   html,
   dir,
+  proxies = [],
   logLevel = 'silent'
 ) => {
   param('string', 'host', host)
@@ -142,6 +143,14 @@ const startBrowserSync = (
   param('string', 'dir', dir)
 
   return new Promise((resolve, reject) => {
+    const customProxies = proxies.map(prxy => prxy.split('=')).map(prxy =>
+      proxy(prxy[0], {
+        target: prxy[1],
+        pathRewrite: (path, req) => path.replace(prxy[0], ''),
+        logLevel,
+      })
+    )
+
     const config = {
       files: [html, `${dir}/*.css`],
       host,
@@ -154,6 +163,7 @@ const startBrowserSync = (
       server: {
         baseDir: dir,
         middleware: [
+          ...customProxies,
           nocache(),
           proxy('/_compile', { target: reactor, logLevel }),
           (request, response, next) => {
@@ -303,7 +313,8 @@ const dev = options => {
           opts.port,
           `http://${opts.reactorHost}:${opts.reactorPort}`,
           opts.html,
-          tmpDir.name
+          tmpDir.name,
+          opts.proxies
         )
       })
       .then(({ bs, port }) => {

diff --git a/test/cmds/dev-test.js b/test/cmds/dev-test.js
@@ -46,6 +46,11 @@ describe('$ elm-factory dev', () => {
         description: 'livereload port',
         default: defaults.lrPort,
       },
+      x: {
+        alias: 'proxy',
+        description: 'additional proxies',
+        default: defaults.proxy
+      }
     })
   })
 })
diff --git a/test/defaults-test.js b/test/defaults-test.js
@@ -23,6 +23,7 @@ describe('defaults', () => {
       reactorHost: '127.0.0.1',
       reactorPort: 8001,
       lrPort: 35729,
+      proxy: undefined,
     })
   })
 

diff --git a/test/tasks/dev-test.js b/test/tasks/dev-test.js
@@ -283,9 +283,9 @@ describe('DEV TASK', function() {
         str,
         str,
         tmpDir.name
-      ).then(({ bs }) =>
+      ).then(({ bs, port }) =>
         request(
-          `http://${defaults.host}:${defaults.port}/public/${basename}`
+          `http://${defaults.host}:${port}/public/${basename}`
         ).then(res => {
           expect(res).to.eql('.elm-reactor{color:#FFFFFF}')
           tmpFile.removeCallback()
@@ -303,8 +303,8 @@ describe('DEV TASK', function() {
         str,
         './index.ejs',
         str
-      ).then(({ bs }) =>
-        request(`http://${defaults.host}:${defaults.port}/src/Main.elm`)
+      ).then(({ bs, port }) =>
+        request(`http://${defaults.host}:${port}/src/Main.elm`)
           .then(res => {
             assertIncludes('<title>~/src/Main.elm</title>', res)
             bs.exit()
@@ -326,21 +326,45 @@ describe('DEV TASK', function() {
               reactorUrl,
               str,
               str
-            ).then(({ bs }) =>
-              request(`http://${defaults.host}:${defaults.port}`)
-                .then(res => {
-                  assertIncludes('<script src="/_reactor/index.js">', res)
-
-                  return request(
-                    `http://${defaults.host}:${defaults.port}/_compile/src/Main.elm`
-                  )
-                })
-                .then(res => {
-                  assertIncludes('var runElmProgram = ', res)
-                  reactor.close()
-                  bs.exit()
-                  done()
-                })
+            ).then(({ bs, port }) =>
+              Promise.all([
+                request(`http://${defaults.host}:${port}`),
+                request(
+                  `http://${defaults.host}:${port}/_compile/src/Main.elm`
+                ),
+              ]).then(([res1, res2]) => {
+                assertIncludes('<script src="/_reactor/index.js">', res1)
+                assertIncludes('var runElmProgram = ', res2)
+                reactor.close()
+                bs.exit()
+                done()
+              })
+            )
+          )
+        )
+        .catch(done)
+    })
+
+    it.only('creates additional custom proxies', function(done) {
+      this.timeout(60000)
+
+      findFreePort(defaults.reactorHost, defaults.reactorPort)
+        .then(({ host: reactorHost, port: reactorPort, url: reactorUrl }) =>
+          startReactor(reactorHost, reactorPort, false).then(reactor =>
+            startBrowserSync(defaults.host, defaults.port, str, str, str, [
+              `/p1=${reactorUrl}/`,
+              `/p2=${reactorUrl}/src`,
+            ]).then(({ bs, port }) =>
+              Promise.all([
+                request(`http://${defaults.host}:${port}/p1/`),
+                request(`http://${defaults.host}:${port}/p2/Main.elm`),
+              ]).then(([res1, res2]) => {
+                assertIncludes('<script src="/_reactor/index.js">', res1)
+                assertIncludes('runElmProgram()', res2)
+                reactor.close()
+                bs.exit()
+                done()
+              })
             )
           )
         )