ProxyPack

ProxyPack is WebPack Plugin that allows you to serve Local Assets from Wepack against a Production Website in a Web Browser

Table of Contents

• API
• Webpack Setup
  • Example 1:
• External Mappings
• Local Mappings
• Install SSL Certificate
• To View A Proxy Build
• Thanks

API

| Value | Type | Of | | ---------------- | ------ | ------------------------------------------------------- | | browser | String | chrome, chromium, firefox, ie, opera, safari, phantomjs | | domain | String | WebSite URL | | localMappings | Dict | Mappings of files on the local file system | | externalMappings | Dict | Production Assets / Folders |

Webpack Setup

Example 1:

Import the ProxyPackPlugin:

const ProxyPackPlugin = require('@helpscout/proxypack').WebpackPlugin

In Webpack config add the following:

new ProxyPackPlugin({
        browser: 'chrome',
        domain: 'https://secure.helpscout.net',
      })

External Mappings

You can also target Non-Webpack files or other Webpack builds with the dictionary externalMappings, these will be resolved with a standard HTTP GET REQUEST.

new ProxyPackPlugin({
        browser: 'chrome',
        domain: 'https://secure.helpscout.net',
        externalMappings: {
            ' https://beacon-v2.helpscout.net/static/js/main.2.1.f3df77f2.js': 'http://localhost:3001/static/js/main.2.1.js'
          }
        ,
      })

In this example we are actually running another Webpack server where http://localhost:3001/static/js/main.2.1.js is built and we are linking that from our Proxy Server.

Local Mappings

Local Mappings are resolved as UTF8 through fs.readFileSync(), and are for paths that are on the local file system.

new ProxyPackPlugin({
        browser: 'chrome',
        domain: 'https://secure.helpscout.net',
        localMappings: {
         'https://dhmmnd775wlnp.cloudfront.net/*/css/styles.css' : `${__dirname}/site/css/styles.css`
        },

Install SSL Certificate

To view a ProxyPack Build in a Web Browser you must also have a Spoofed SSL certificate installed on your system.

• MacOS

To View A Proxy Build

You will need to npm install @helpscout/proxypack -g.

This will install CLI commands that can launch a Proxied Web Browser that is aware of the ProxyServer running via Webpack.

For example the command proxypack will open a Proxied Web Browser in chrome.

You can pass the browser and / or domain flag, to target specific builds and override the values in ProxyPackPlugin config.

For example: proxypack --domain=https://secure.helpscout.net --browser=firefox. Will open https://secure.helpscout.net in Firefox and Proxy all the Webpack assets and other mapped local or external assets.

Thanks

ProxyPack was inspired by Charles Proxy and James Proxy and was built with Hoxy.