DEV Community

llllvvuu
llllvvuu

Posted on

Many popular frontends are low-key open-source

Ever wondered how your favorite frontend is built (for example, maybe it has an awesome component that you can't find replicated anywhere)? It might have:

  • No GitHub
  • No GitLab
  • No source maps in Chrome DevTools.

But you may still be able to find the original sources.

I made a tool to extract them: https://github.com/llllvvuu/dl-webapp-sources

To summarize from the README:

  • You can get a list of all JS files loaded by a page using:
performance
  .getEntriesByType("resource")
  .map(resource => resource.name)
  .filter(name => name.endsWith(".js"))
  .map(name => `"${name}"`)
  .join(" ")
Enter fullscreen mode Exit fullscreen mode
  • You can pass this into the CLI:
dl-webapp-sources ${JS_URLS} -o ${OUTPUT_DIRECTORY}
Enter fullscreen mode Exit fullscreen mode

Often this will give you a full React app. It will be missing the build files like package.json, webpack.config.js, and tsconfig.json, but you may be able to reverse engineer these - look for strings like react-router, next, etc and then plug in the appropriate build system and tweak the config.

Try it on your favorite apps... you might be surprised! There are some interesting codebases to study and learn from.

Top comments (0)