Include nodejs js module on client side - node.js

E.g. Using SimpleMDE. I've installed it to node modules, what's the right way to include it? Making the nodemodules/simplemde public seems like the wrong move. I'm using express and ejs.

Related

How can I load three/examples/jsm/loaders/GLTFLoader.js in nodejs server side

I am currently using threejs lib in nodejs server side and the following statement works well:
const THREE = require('three')
const OrbitControls = require('three-orbitcontrols')
Now, I need also to use three/examples/jsm/loaders/GLTFLoader.js but same require line does not work. It works in client side using import statement, but unfortunaly I cannot use it outside of module.
Is there a way to use this js in nodejs server side ? The reason is because I would load and build my scene in backend then pass it to the client only for rendering.
Looking forward to get some help
Yes, finally I was bale to add the jsm : import three/examples/jsm/loaders/GLTFLoader.js on nodejs

How do I access node modules client-side when building an Express app?

I'm trying to use intl-tel-input in a project I'm building using express and ejs.
I have app.use(express.static(path.join(__dirname, 'public'))); in my app.js which means Express serves all static files from the public directory in my project.
I am unable to integrate intl-tel-input as it's a node module and the relevant css and js files are located in /node_modules/intl-tel-input/build/... and they are not served by Express at all. Thus, when I try to link to them in my Ejs template, I get a 404 error.
How do I solve this? All the ideas I have seem like the wrong approach.
After struggling with this for a while and exploring solutions like Webpack, RequireJS and other not so elegant ones, I found this answer to be the most relevant, easy and effective solution for this particular problem.

node.js where to put util functions used by backend and frontend

Node.js is special because the backend and frontend use the same language. I wanted to take advantage of this and only write 1 set of util functions (universal functions like numToPercent) for backend and frontend. Here is how my (important) files are structured right now:
project
public
index.html
index.js
scripts
script1.js
index.js
otherScript.js
Where is the canonical location to put my util file?
Edit: to make this more specific, is there a "shared" folder or something to put this file? Because otherwise public seems like the best place to put this
You can package the shared code and add it as a dependency via npm.

React isomorphic inconvenience

I'm building isomorphic app using Node.js and ReactJS.
I've met a situation when inside some isomorphic React component (rendered both on client and server sides) I need to include only client-side dependency (some notifications library for example).
What is the best way to have it worked (compiled) both on server/client sides?
P.S: I have few thoughts about possible workarounds something like checking for browser env variables (ex. some typeof window !== 'undefined') etc. but I'm not sure it's a good way to go.
Use the lifecycle method componentDidMount which is not invoked on the server instead of checking if window is undefined.
The "downside" is if your client side dependency enhances an element for example or changes any property of it, it'll get the default property first since it was rendered server side and when componentDidMount runs it'll get changed causing a "blink".
If you are using browserify I often use process.browser which is only true in browserified code.
If you wanted to get fancy and remove server code from the browser instead there is also isbrowser which will do just that.
Another way (webpack or browserify) is to take advantage of the browser field in the package.json. You can make it so that the server requires a noop file and the browser requires a file the exposes the client side api.
I have defined variable in webpack configuration file called process.env.WEBPACK and in my code when i need something like bottstrap js or something else i just write
if(process.env.WEBPACK){
//awesome lib included or scss or whatever
}

Using node.js libraries on front-end

How can I use the 'request' node.js module on the front-end?
normally I would retrieve it like so:
var request = require('request');
but this is not possible on the front-end since require is not recognized.
What is the best way to solve this?
To use node modules in the browser you can use a library called Browserify . This allows you to work with the common module pattern as well as the you can use this package browser-request to get the features of request module

Resources