We created a simple js file, intending to find out if http.createServer works on client browser or not:
var http = require("http")
var server = http.createServer()
server.listen(9024, function () {
console.log("demo server listening on port 9024")
})
and embedded it into a html after browserify.
Display the html in chrome, unfortunately, it always fails on line 2 on http.createServer():
"Uncaught Type Error: undefined is not a function"
We also played around with "serve-browserify" a bit without success.
We have attempted the same thing on both chrome and firefox, and on Linux and Windows. All failed.
Searching through the web, there are quite a few examples for browserify http into the browser.
They all appear to be simple invocation of browserify. However we don't seem to be able to get the same good result.
Your help will be greately appreciated.
You can't use Node.js modules in the browser. All Browserify does is bundling CommonJS modules, it does not allow you to run server side code in the browser.
Related
I have a project by Three.js.
Like below pic, i have an index.html that uses js codes from scripts.js (in sub-Directory of js).
also, this scripts.js , uses three and OrbitControls libs of package of three.js.
PROBLEM:
after running my project, browser, shows HTML and CSS fine, but it do not works by javascript and gives this error:
i can't find any solution, after half a Day searching & manipulating!
can any one help please?
1)project structure:
root
|------server.js
|------/public
| |---index.html
| |---/js/scripts.js
| |---/css/index.css
2)root/public/index.html:
3)root/public/js/scripts.js:
4)root/server.js:
const express = require("express");
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, '/public')));
app.get('/',function(req,res) {
res.sendFile("public/index.html")
});
app.listen(3000, () => {console.log("listening on port 3000");});
Multiple things going on here. First, require() is nodejs ONLY, is not present in the browser. You are trying to load and run js/scripts.js in the browser and thus cannot use require() in that script.
Separately, when you use type="module" in a script tag, that means the module is an ESM module which can use import to load other modules, but import needs to specify a URL that your express server will handle and serve the right file with.
I'm also guessing that you will have a problem loading the script files because they need to be served by express.static() in your server and need to have the appropriate URL paths in your web page so that express.static() will work. You don't show the server-side file structure for all those scripts so it's hard for us to know exactly what the URLs should be.
And, in the future, please don't ever post screen shots of code. That makes it a lot harder for us to use your code in tests or in answers (because we have to retype it all from scratch) and it can't be searched, is harder to read on mobile, etc... Don't put code in images.
I'm really confused. I started learning to use node.js with MEAN stack. Before I used webpack and browserfy without really understanding it.
What confuses me is the following:
Express fires up a server and I can handle the requests
Webpack fires up a server
Browserify fires up a server
simply typing in plain js e.g. var http = require('http'); http.createServer(function (req, res) { ... fires up a server
Well, Webpack and Browserfy (as far as I understand) also bundle js files. How does the logic "under the hood" works and do they bundle everything I code and send it to the client (E.g. my DB login)?
I read this one Webpack vs webpack-dev-server vs webpack-dev-middleware vs webpack-hot-middleware vs etc , which told me webpack uses express under the hood. So maybe express also uses the plan .js server under the hood?
Well, I can go on like this forever. I am a little confused.
Well, what and where are the differences and how do thee apps work (together)?
First of all express use the core API and module of node.js like http module .
express uses the http module to create the server at specific port so
app.listen(3000);
will simple be like this
var http = require('http);
var server = http.createServer() ;
server.listen(3000) ;
server.on('request',function(req,res){
// here express will do all its magic
// and handle the request and response for you under the hood
})
Second things is that webpack and other bundling tools is used for bundling files and assets in the front end not the back end and they can create simple server for listening for changes in your files to give you other features like
+ live reload
+ hot module replacement
but also you can use webpack in the back end to use things like babel-loader or use the hot module replacement feature
so express works for the back end
and webpack use it in the front end
you can create different ports on each server and communicate between them via ajax API like fetch
and that's how actually it should work .
learn more
understanding express.js
understanding express and node fundamentals
webpack.js concepts and documentation
I have a NodeJS server code written in JSX where I'm importing superagent like so:
import request from 'superagent';
When server starts after build, I get the following error:
TypeError: require is not a function. And this happens at the following line in my compiled code:
var crypto = require('crypto');
On tracing back I realized that crypto is required by 'formidable', which is required by 'superagent'.
I have the same superagent import in my client side javascript code but that works fine. I diffed the compile JS code for node(server), and client, and both are the same. So it doesn't seem like an issue with the way its build.
Has anyone seen this error before and would you know what needs to be done?
Found a solution to this here:
https://github.com/visionmedia/superagent/wiki/Superagent-for-Webpack
Adding the said plugin to web pack solved the issue.
so i'm trying to understand how to use node.js module "http" http.createServer()
i wonder if it's possible to see how this function is defined? can i find the content of the definition? i wasn't able to find it
The Node.js source code is available on Github. For the JavaScript side of the API, take a look in the lib directory.
https://github.com/joyent/node/blob/master/lib/http.js#L61
exports.createServer = function(requestListener) {
return new Server(requestListener);
};
You can find the actual HTTP server JavaScript in lib/_http_server.js.
I want to share a piece of coffeescript code between the server and the client on Express.
I linked the file from the server directory into the /public directory, so it can be loaded by the client.
It does have external dependencies, which I resolve statically for the client. To remove the error messages when the client tries to call require, I thought a simple conditional declaration would do.
console.log require
unless require?
require = (what) ->
console.info "this is the client, you asked me to load #{what}"
return {}
However, when run on the server, undefined will be printed and require will be overridden. The same happens for embedded Javascript:
`if( typeof require == "undefined" )
var require = function(what) {
console.info( "this is the client, you asked me to load "+what );
return {};
}
`
If I only run:
console.log require
on the server, it prints an object structure, as expected.
It seems that require is injected after at least the conditional has been evaluated and executed.
How can I override require safely, or what other paradigm might I use for sharing code between client and server?
I recommend using browserify for sharing code between the client and server. It allows you to write your javascript as you would for the server following the common js pattern, but provides a mechanism to build your module for client-side where require() works in the browser.
CoffeeScript is supported with browserify via a transform process. Coffeeify is one implementation of a transform implementation for CoffeeScript.