Faking node_modules in CodePen Projects

With CodePen Projects you have a web IDE right in your browser, with preprocessing built-in. But what about installing dependencies via the npm ecosystem? With some minimal effort it’s possible:

All you need to do is make a folder called node_modules, and then inside of that make a file named after the module (e.g. react.js) with the module’s code.

Like so:

├── my-project.js
└── node_modules
    └── react.js
    └── react-dom.js

From then on you can just import the libraries as you would normally do:

// my-project.js
import React from 'react';


Faking node_modules in CodePen Projects →
Example →