I am getting to know node.js and javascript frontends, and sharing modules/components between frontend and backend (Node.js with express in this case) has become interresting (especially when using React.js). This is not a new question, however I have not been able to find a good method suiting my current needs.
What I want:
Use project modules and submodules both on frontend and Node backend with working paths in the require statements, and the least possible bolierplate code for file/module loading. Hopefully without the need for a build step.
For instance, I have a react component for rendering HTML. This component is used on frontend when the webapp is active, and on backend when pre-generating the html. This is just an example case, the main requirement is as stated above.
Best case example, project module file (not actual tested code):
var React = require('react'),
MyLocalSubmodule = require('path/modulename');
var ThisComponent = React.createClass({
/* ...something.... */
});
module.exports = ThisComponent;
The problems:
- If I use pure CommonJS syntax like standard node modules (no define, and module.export), the syntax is very nice to work with, but modules dont work out of the box on frontend unless I use browserify, webpack etc to build the frontend code. That is not a big problem, but I was hoping to reduce the number of required build steps so the code can be used as much as possible directly out of the box.
Question: Is there any frontend loader that can run unwrapped CommonJS modules without prebuilding them and without any boilerplate or similar hacks in the module file?
- If I use some AMD like syntax with define and return, it is easy to make them work on node (with requirejs, amdefine or somilar modules), however I get a problem with the module paths. If I configure require.js on frontend with a baseUrl, I can include a project module file by a path in the require config. When I then need to include another module (like a sub-React component), I need to define the path for this module in require-config aswell. So far so good. Then if I try to run this module on node/express, rendering the first module works (based on express views path), but requiring the sub-module from within the first module does not work, because require then looks for local modules in relative paths to the directory of the current module, not paths based on the express views path. And if i put a relative path to the sub-component (like require('./subdir/mySubmodule') or require('../otherdir/mySubmodule)), then it does not work in Require.js on frontend. I have not found any way of telling Node to look in a given path if i dont include any directory indication in the require name (like require('path/to/component')) so I can have a fixed base dir the same way as on the require.js frontend. (Note: I would like to avoid having to set environment variables like NODE_PATH to resolve the node paths issue). And, I have not been able to find a way to use paths relative to the current module file (the way Node does it) on require.js in the browser.
Question: Is there a non-hackish good way to require local (project) modules and submodules inside modules with the same name syntax in the require statement (var myModule = require('frontend-backend-shared-syntax');) on both frontend and Node backend?
Last question: What is your best suggested way of making node/frontend sharable project modules (including use of submodules)?
