humanmade / humanmade/altis-local-server

Add an ngrok service for sharing the local environment

Open
#335 1 comment 0 reactions 0 assignees View on GitHub
developer advocacy
Dominant language
PHP
Stars
18
Forks
5
Avg merge
8d 1h
Merged PRs (30d)
11

Description

We have a working proof of concept courtesy of @kadamwhite so far:

Instructions:

- Create the current two files in a new directory.
- run `npm install`
- run `TARGET_HOST=dev.altis.dev npm start` while replacing `dev.altis.dev` with your local env domain
- Figure out your machine network local IP
- View the site at http://LOCAL-IP-HERE:3000

## server.js:

```js
const express = require( 'express' );
const morgan = require( 'morgan' );
const proxy = require( 'http-proxy-middleware' );
const ngrok = require( 'ngrok' );

const createProxyMiddleware = proxy.createProxyMiddleware;
const responseInterceptor = proxy.responseInterceptor;

const PORT = 3000;
const HOST = 'localhost';
const TARGET_HOST = process.env.TARGET_HOST;

( async () => {
const externalUrl = await ngrok.connect( PORT );

const externalHost = externalUrl.replace( /https?:\/\//, '' );

const app = express();

app.use( morgan( 'dev' ) );

// Proxy everything.
app.use( '/', createProxyMiddleware( {
target: TARGET_HOST,

changeOrigin: true,

// Defer res.end() to be handled by responseInterceptor.
selfHandleResponse: true,

/**
* Intercept response and replace Snopes URL with ngrok URL.
* Remove integrity hashes from markup so static assets load.
**/
onProxyRes: responseInterceptor( async ( responseBuffer ) => {
return responseBuffer.toString( 'utf8' )
// Point Tachyon URLs at a web-accessible bucket.
.replace( /TARGET_HOST\/tachyon/ig, 'LIVE_HOST/tachyon' )
// Everything else, rewrite so it will load that resource
// over the ngrok connection.
.replace( /TARGET_HOST/ig, externalHost )
// Remove integrity hashes entirely :( or things won't work.
.replace( /integrity=('[^']+'|"[^"]+")/ig, '' );
} ),
} ) );

app.listen( PORT, HOST, () => {
console.log( `Starting local Proxy at ${HOST}:${PORT}` );
console.log( `Local environment is now available at ${ externalUrl }` );
} );

} )();
```

## package.json:

```json
{
"name": "local-server-proxy",
"private": true,
"version": "1.0.0",
"description": "Relay web traffic from an external URL to Local Server",
"main": "index.js",
"scripts": {
"proxy": "node server.js",
"start": "node server.js"
},
"author": "Human Made",
"license": "MIT",
"dependencies": {
"express": "^4.17.1",
"http-proxy-middleware": "^2.0.1",
"morgan": "^1.10.0",
"ngrok": "^4.1.0"
}
}
```

Acceptance criteria:

- [ ] Create a containerised version of the above node app
- [ ] Add a command called `composer server share` that starts the service
- [ ] A SIGQUIT input should stop the service eg. ctrl+c

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the supplied server.js and package.json proof of concept, then inspect the repository's existing Composer command conventions. Containerize the Node app, add the `composer server share` command, and verify that Ctrl+C sends SIGQUIT and stops the service.

Written by the indexing model from the issue text.

Assessment

Tech stack
docker, node.js, php
Domain
cli, devops, tooling
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.