Live tunneler

README.md

@@ -735,6 +735,22 @@ Please, see [`@joshbuchea`'s head repo](https://gethead.info/).
 [This guide](https://gist.github.com/matthewjberger/6f42452cb1a2253667942d333ff53404) is a good one to follow, and [here is a working example](https://github.com/nkint/accurapp-electron) of accurapp with electron. Good luck!
 </details>
 
+<details>
+<summary>Someone else needs to see what I'm working on, how can I show it?</summary>
+
+When running `yarn start` you can add `--exposed` as a flag.
+
+The webpack server will try allocate a subdomain on a remote server and open an ssh reverse tunnel in order to receive every request that the remote will receive on that domain. As soon as the subdomain is allocated, the remote server will also generate a valid https certificate.
+
+The remote domain is set as the env variable `TUNNEL_DOMAIN` and defaults to `internal.accurat.io`, but can be set to whatever server is running an instance of the [SSH-Tuna server infrastucture](https://github.com/accurat/ssh-tuna)
+
+The allocated domain will have the following structure:
+- If the script is running from inside a git project and is on a branch different than master: `{branch}.{repo}.{TUNNEL_DOMAIN}`
+- If the script is running from inside a git project and is on master: `{repo}.{TUNNEL_DOMAIN}`
+- If the script is running from outside a git project: `{hostname}.{TUNNEL_DOMAIN}`
+
+</details>
+
 ## Contributing
 If you make some edits and wish to test them locally you can run `yarn test` for an end-to-end test, or `yarn create-test-app` which creates a test app using the local packages.
 

packages/accurapp-scripts/package.json

@@ -46,6 +46,7 @@
     "react-dev-utils": "9.0.1",
     "resolve": "1.11.0",
     "semver": "6.1.1",
+    "ssh-tuna": "^1.0.0",
     "webpack": "4.34.0",
     "webpack-dev-server": "3.2.1"
   }

packages/accurapp-scripts/scripts/start.js

@@ -9,7 +9,9 @@ const detect = require('detect-port')
 const WebpackDevServer = require('webpack-dev-server')
 const openOrRefreshBrowser = require('react-dev-utils/openBrowser')
 const { prepareUrls } = require('react-dev-utils/WebpackDevServerUtils')
+const { tunnelPort } = require('ssh-tuna')
 const { log, coloredBanner } = require('../utils/logging-utils')
+const { generateSubdomain } = require('../utils/tunnel-utils')
 const { createWebpackCompiler, readWebpackConfig } = require('../utils/webpack-utils')
 const { verifyTypeScriptSetup } = require('../utils/verifyTypeScriptSetup')
 const {
@@ -27,6 +29,9 @@ process.env.LATEST_TAG = extractLatestTag()
 const HOST = process.env.HOST || '0.0.0.0'
 const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 8000
 const PROTOCOL = process.env.HTTPS === 'true' ? 'https' : 'http'
+const TUNNEL_DOMAIN = process.env.TUNNEL_DOMAIN || 'internal.accurat.io'
+const TUNNEL_SSH_PORT = process.env.TUNNEL_SSH_PORT || 2222
+const EXPOSED = process.argv.includes('--exposed')
 
 const appDir = process.cwd()
 verifyTypeScriptSetup(appDir)
@@ -36,6 +41,14 @@ function runDevServer(port) {
   const compiler = createWebpackCompiler(() => {
     log.info(`The app is running at: ${chalk.cyan(urls.localUrlForTerminal)}`)
     log.info(`Or on your network at: ${chalk.cyan(urls.lanUrlForTerminal)}`)
+    if (!EXPOSED) return
+    const subdomain = generateSubdomain()
+    tunnelPort(port, subdomain, TUNNEL_DOMAIN, TUNNEL_SSH_PORT)
+      .then(client => {
+        const url = `https://${subdomain}.${TUNNEL_DOMAIN}`
+        log.info(`Even from far away at: ${chalk.cyan(url)}`)
+      })
+      .catch(err => log.err(err))
   })
 
   const devServerConfig = {
@@ -63,14 +76,12 @@ console.log(coloredBanner('/||||/| accurapp'))
 
 detect(DEFAULT_PORT)
   .then(port => {
-    if (port === DEFAULT_PORT) {
-      runDevServer(port)
-    } else {
+    if (port !== DEFAULT_PORT) {
       log.ok(
         `Something is already running on port ${DEFAULT_PORT}, switching to ${chalk.blue(port)}...`
       )
-      runDevServer(port)
     }
+    runDevServer(port)
     return port
   })
   .catch(err => {

packages/accurapp-scripts/utils/git-utils.js

@@ -36,9 +36,37 @@ function extractLatestTag() {
   }
 }
 
+function extractCurrentBranch() {
+  try {
+    return cp
+      .execSync('git rev-parse --abbrev-ref HEAD')
+      .toString()
+      .trim()
+  } catch (e) {
+    // Probably git is not available, return an empty string instead
+    return ''
+  }
+}
+
+function extractRepoName() {
+  try {
+    return cp
+      .execSync('basename -s .git `git config --get remote.origin.url`', {
+        stdio: ['pipe', 'pipe', 'ignore'],
+      })
+      .toString()
+      .trim()
+  } catch (e) {
+    // Probably git is not available, return an empty string instead
+    return ''
+  }
+}
+
 module.exports = {
   extractBrowserslistString,
   extractLatestCommitHash,
   extractLatestCommitTimestamp,
   extractLatestTag,
+  extractCurrentBranch,
+  extractRepoName,
 }

packages/accurapp-scripts/utils/tunnel-utils.js

@@ -0,0 +1,12 @@
+const os = require('os')
+const { extractRepoName, extractCurrentBranch } = require('../utils/git-utils')
+
+function generateSubdomain() {
+  const repo = extractRepoName()
+  const branch = extractCurrentBranch()
+  if (!repo) return os.hostname()
+  if (branch === 'master') return repo
+  return `${branch}.${repo}`
+}
+
+module.exports = { generateSubdomain }

test/e2e.sh

@@ -32,6 +32,12 @@ PID=$!
 sleep 20s
 kill $PID
 
+# Test the start with typescript and exposing to the internet
+BROWSER=false yarn start --exposed &
+PID=$!
+sleep 20s
+kill $PID
+
 # Test the build with typescript
 yarn build