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(" ")

• You can pass this into the CLI:

dl-webapp-sources ${JS_URLS} -o ${OUTPUT_DIRECTORY}

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.