ProxyPack is WebPack Plugin that allows you to serve Local Assets from Wepack against a Production Website in a Web Browser
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 |
Import the ProxyPackPlugin:
const ProxyPackPlugin = require('@helpscout/proxypack').WebpackPlugin
In Webpack config add the following:
new ProxyPackPlugin({
browser: 'chrome',
domain: 'https://secure.helpscout.net',
})
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 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`
},
To view a ProxyPack Build in a Web Browser you must also have a Spoofed SSL certificate installed on your system.
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.
ProxyPack was inspired by Charles Proxy and James Proxy and was built with Hoxy.