Support for browser usage out-of-the-box (webpack)

[renatodeleao]

Hi, thanks for taking the time to make this!

My usecase is simple: on a webpage, 
I’m using your module to compare and get more details after a response from a ping (xhr) to a server, which is returning me the three letters edge location prefix for the closest PoP in a custom header. Then I do some fancy unrelated ui stuff based on it and the other details that your module provide (coordinates, names, count)

.

The problem is that, without a specific webpack config, importing your module throws an error because you use node's fs.readFileSync at index.js, which doesn’t work in browser.

Workaround used

Using webpack’s transform-loader (browserify transforms) with brfs plugin (wich inlines content from fs.readFileSync() calls) we can workaround the problem and use your module just fine. If you do not plan to support the browser environment, maybe a reference in docs will suffice.
- As seen on pdfKit: https://github.com/huy-nguyen/webpack-and-pdfkit
- Loader: https://github.com/webpack-contrib/transform-loader
- Plugin: https://www.npmjs.com/package/brfs

Possible solution

If there’s the intention of making this package compatible with client side, i would say that a build step could be added to distribute a bundled/minified version of the package with locations inlined as an object (similar to the workaround config does). Decision on make it default or a separate bundle and corresponding named export is up to you.



// we can then do something like this, suggestion only

import { AWSEdgeLocationsBrowser } from "aws-edge-locations";





Other Workarounds and references found in the wild

might be useful when researching how others dealt with the problem.

• Pixi.js:
  • Webpack - Uncaught TypeError: fs.readFileSync is not a function pixijs/pixijs#2078 (comment)
  • Compatibility with webpack pixijs/pixijs#1854
  • Using webpack postLoaders: https://gist.github.com/mjackson/ecd3914ebee934f4daf4
• PdfKit:
  • Can't resolve 'fs' in .../...node_modules\pdfkit\js' - webpack loader issue foliojs/pdfkit#659
• CSSLoader:
  • Can't resolve 'fs' when bundle with webpack webpack-contrib/css-loader#447
• Webpacker issue:
  • fs in webpacker rails/webpacker#608
• Transfrom-loader:
  • ReferenceError: Can't find variable: fs webpack-contrib/transform-loader#13

Cheers, thanks for your time
✌️ ☮️

[tobilg]

@renatodeleao thanks for the comprehensive issue / feature request! The module was originally designed to be used on the server side, but it might be a good idea to make this also work within the browser.

I'll check the links you provided, to be honest I'm not really a frontend guy, so this might take a while.

[tobilg]

I‘ll provide a browserify bundle with the upcoming 0.2.0 release.

[tobilg]

This should be fixed in version 0.2.0, please have a look at https://github.com/tobilg/aws-edge-locations/blob/master/dist/aws-edge-locations.js

[renatodeleao]

to be honest I'm not really a frontend guy!

Well don't worry, to be honest i'm not really a server/backend guy :)

So It does work (thanks 🙌), but allow me to add some points:

• You removed aws-edge-locations.csv from the dist folder at .npmignore meaning that i can only have access to this file if i install the package straight from github url. (i'm using the .csv file at a Rails app, i know that i can use the .json, but i have all my helpers already written for .csv parsing)

  $ npm install aws-edge-logcations # no .csv
  $ npm install https://github.com/tobilg/aws-edge-locations.git # yei .csv

• You've bundled a browserified version to dist/aws-edge-locations.js but then you also added to .npmignore. That means that people will not be able to import that version when installing from npm package; (note the main version (index.js) will still work in webpack (and other bundlers) because it can understand require so you actually fix the issue :)).
  The side-effect is that you miss free support for direct browser usage via unpkg CDN (good old <script> tag)

    <!-- this doesn't exist, but it can -->
     <script src="https://unpkg.com/aws-edge-locations@0.2.0/dist/aws-edge-locations.js">
    </script>

  • if you want to add that level of support, just remove it from .npmignore.We can also add the browser field at the package.json to make it more clear

  {
    "main": "index.js"
    "browser": "dist/aws-edge-locatitons.js"
  }

Thats all, thanks once again, i'll leave a PR for this in case you're interested!
Cheers ✌