Plan .js server vs webpack vs - node.js

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

Related

Express.js POST request returns 404 [duplicate]

Despite knowing JavaScript quite well, I'm confused what exactly these three projects in Node.js ecosystem do. Is it something like Rails' Rack? Can someone please explain?
[Update: As of its 4.0 release, Express no longer uses Connect. However, Express is still compatible with middleware written for Connect. My original answer is below.]
I'm glad you asked about this, because it's definitely a common point of confusion for folks looking at Node.js. Here's my best shot at explaining it:
Node.js itself offers an http module, whose createServer method returns an object that you can use to respond to HTTP requests. That object inherits the http.Server prototype.
Connect also offers a createServer method, which returns an object that inherits an extended version of http.Server. Connect's extensions are mainly there to make it easy to plug in middleware. That's why Connect describes itself as a "middleware framework," and is often analogized to Ruby's Rack.
Express does to Connect what Connect does to the http module: It offers a createServer method that extends Connect's Server prototype. So all of the functionality of Connect is there, plus view rendering and a handy DSL for describing routes. Ruby's Sinatra is a good analogy.
Then there are other frameworks that go even further and extend Express! Zappa, for instance, which integrates support for CoffeeScript, server-side jQuery, and testing.
Here's a concrete example of what's meant by "middleware": Out of the box, none of the above serves static files for you. But just throw in connect.static (a middleware that comes with Connect), configured to point to a directory, and your server will provide access to the files in that directory. Note that Express provides Connect's middlewares also; express.static is the same as connect.static. (Both were known as staticProvider until recently.)
My impression is that most "real" Node.js apps are being developed with Express these days; the features it adds are extremely useful, and all of the lower-level functionality is still there if you want it.
The accepted answer is really old (and now wrong). Here's the information (with source) based on the current version of Connect (3.0) / Express (4.0).
What Node.js comes with
http / https createServer which simply takes a callback(req,res) e.g.
var server = http.createServer(function (request, response) {
// respond
response.write('hello client!');
response.end();
});
server.listen(3000);
What connect adds
Middleware is basically any software that sits between your application code and some low level API. Connect extends the built-in HTTP server functionality and adds a plugin framework. The plugins act as middleware and hence connect is a middleware framework
The way it does that is pretty simple (and in fact the code is really short!). As soon as you call var connect = require('connect'); var app = connect(); you get a function app that can:
Can handle a request and return a response. This is because you basically get this function
Has a member function .use (source) to manage plugins (that comes from here because of this simple line of code).
Because of 1.) you can do the following :
var app = connect();
// Register with http
http.createServer(app)
.listen(3000);
Combine with 2.) and you get:
var connect = require('connect');
// Create a connect dispatcher
var app = connect()
// register a middleware
.use(function (req, res, next) { next(); });
// Register with http
http.createServer(app)
.listen(3000);
Connect provides a utility function to register itself with http so that you don't need to make the call to http.createServer(app). Its called listen and the code simply creates a new http server, register's connect as the callback and forwards the arguments to http.listen. From source
app.listen = function(){
var server = http.createServer(this);
return server.listen.apply(server, arguments);
};
So, you can do:
var connect = require('connect');
// Create a connect dispatcher and register with http
var app = connect()
.listen(3000);
console.log('server running on port 3000');
It's still your good old http.createServer with a plugin framework on top.
What ExpressJS adds
ExpressJS and connect are parallel projects. Connect is just a middleware framework, with a nice use function. Express does not depend on Connect (see package.json). However it does the everything that connect does i.e:
Can be registered with createServer like connect since it too is just a function that can take a req/res pair (source).
A use function to register middleware.
A utility listen function to register itself with http
In addition to what connect provides (which express duplicates), it has a bunch of more features. e.g.
Has view engine support.
Has top level verbs (get/post etc.) for its router.
Has application settings support.
The middleware is shared
The use function of ExpressJS and connect is compatible and therefore the middleware is shared. Both are middleware frameworks, express just has more than a simple middleware framework.
Which one should you use?
My opinion: you are informed enough ^based on above^ to make your own choice.
Use http.createServer if you are creating something like connect / expressjs from scratch.
Use connect if you are authoring middleware, testing protocols etc. since it is a nice abstraction on top of http.createServer
Use ExpressJS if you are authoring websites.
Most people should just use ExpressJS.
What's wrong about the accepted answer
These might have been true as some point in time, but wrong now:
that inherits an extended version of http.Server
Wrong. It doesn't extend it and as you have seen ... uses it
Express does to Connect what Connect does to the http module
Express 4.0 doesn't even depend on connect. see the current package.json dependencies section
node.js
Node.js is a javascript motor for the server side.
In addition to all the js capabilities, it includes networking capabilities (like HTTP), and access to the file system.
This is different from client-side js where the networking tasks are monopolized by the browser, and access to the file system is forbidden for security reasons.
node.js as a web server: express
Something that runs in the server, understands HTTP and can access files sounds like a web server. But it isn't one.
To make node.js behave like a web server one has to program it: handle the incoming HTTP requests and provide the appropriate responses.
This is what Express does: it's the implementation of a web server in js.
Thus, implementing a web site is like configuring Express routes, and programming the site's specific features.
Middleware and Connect
Serving pages involves a number of tasks. Many of those tasks are well known and very common, so node's Connect module (one of the many modules available to run under node) implements those tasks.
See the current impressing offering:
logger request logger with custom format support
csrf Cross-site request forgery protection
compress Gzip compression middleware
basicAuth basic http authentication
bodyParser extensible request body parser
json application/json parser
urlencoded application/x-www-form-urlencoded parser
multipart multipart/form-data parser
timeout request timeouts
cookieParser cookie parser
session session management support with bundled MemoryStore
cookieSession cookie-based session support
methodOverride faux HTTP method support
responseTime calculates response-time and exposes via X-Response-Time
staticCache memory cache layer for the static() middleware
static streaming static file server supporting Range and more
directory directory listing middleware
vhost virtual host sub-domain mapping middleware
favicon efficient favicon server (with default icon)
limit limit the bytesize of request bodies
query automatic querystring parser, populating req.query
errorHandler flexible error handler
Connect is the framework and through it you can pick the (sub)modules you need.
The Contrib Middleware page enumerates a long list of additional middlewares.
Express itself comes with the most common Connect middlewares.
What to do?
Install node.js.
Node comes with npm, the node package manager.
The command npm install -g express will download and install express globally (check the express guide).
Running express foo in a command line (not in node) will create a ready-to-run application named foo. Change to its (newly created) directory and run it with node with the command node <appname>, then open http://localhost:3000 and see.
Now you are in.
Connect offers a "higher level" APIs for common HTTP server functionality like session management, authentication, logging and more. Express is built on top of Connect with advanced (Sinatra like) functionality.
Node.js itself offers an HTTP module, whose createServer method returns an object that you can use to respond to HTTP requests. That object inherits the http.Server prototype.
Related information, especially if you are using NTVS for working with the Visual Studio IDE. The NTVS adds both NodeJS and Express tools, scaffolding, project templates to Visual Studio 2012, 2013.
Also, the verbiage that calls ExpressJS or Connect as a "WebServer" is incorrect. You can create a basic WebServer with or without them. A basic NodeJS program can also use the http module to handle http requests, Thus becoming a rudimentary web server.
middleware as the name suggests actually middleware is sit between middle.. middle of what? middle of request and response..how request,response,express server sit in express app
in this picture you can see requests are coming from client then the express server server serves those requests.. then lets dig deeper.. actually we can divide this whole express server's whole task in to small seperate tasks like in this way.
how middleware sit between request and response small chunk of server parts doing some particular task and passed request to next one.. finally doing all the tasks response has been made..
all middle ware can access request object,response object and next function of request response cycle..
this is good example for explaining middleware in express youtube video for middleware
The stupid simple answer
Connect and Express are web servers for nodejs. Unlike Apache and IIS, they can both use the same modules, referred to as "middleware".

Run backend directly in Angular ng serve

I'm currently developing using ng serve, with proxy configuration, while the proxy points to another nodejs instance on the same machine.
This backend is a simple express server, like this (simplified):
var express = require('express');
var app = express();
var customers = require('./customers.controller.js');
app.get('/api/customers', customers.getAll)
var server = app.listen(8081)
The frontend (ng serve) runs on port 4200 and proxies /api to http://localhost:8081/api
As far as I can see, this is the recommended setup.
However, I would prefer to have the backend running directly inside of ng serve instance instead of the proxy.
And if possible, even take advantage of the automatic reload feature of ng so that I don't have to restart the server if I change something on the backend code.
As both are nodejs and ng seems to be configurable, I think this is possible, but I can't find a starting point for defining my own routes
Its possible to do this
you just need to put your angular into the backend by utilize the nodejs routing
basicly angular is a "static file" and the entry point is coming from the index.html
// Redirect all the other resquests
this.app.get('*', (req, res) => {
res.sendFile(path.resolve('dist/index.html'));
});
but remember you need to handle the routing for image, js, css and others also.

Converting Node.js command line app to web app

So this is more of an open ended question: I've started working with node and I've been creating command line applications for practice. The majority of these apps take command line arguments and make http requests to an API and serve up the results based on the arguments passed. The thing is, I would like these programs to have useful front-end interfaces so that the results are not just display via the command line terminal. Is there an easy way to accomplish this? Is this what Express is useful for?
perhaps more fully, that's what express is for and that's what routes do for you - so that your browser can be directed to a default (e.g. index.html) page or a specific page or service. If you're rendering basic html pages, stored in an /HTML folder, to the user, then you might have the following kind of code in your app:
var express = require('express');
var app = express();
app.engine('html', require('ejs').renderFile);
app.use(express.static(__dirname + '/HTML'));
followed by a series of app.get('path/from/browser') and/or app.post('path/from/broswer') statements which tell your nodejs server what to do when various get and post commands are sent to the app.
as your app gets more complex, you may want to consider the router service as a way to structure your application code and associated services.
you also need to start an http server, so the browser can actually talk to the server. You would do that in a very simple way by executing the following code:
var cfenv = require('cfenv');
var appEnv = cfenv.getAppEnv();
app.set('port', appEnv.port);
var server = app.listen(app.get('port'), function() {console.log('Listening on port %d', server.address().port);});
In this simple example, your app is now using 3 new services: express, ejs, and cfenv. You would use the standard npm install process to get this into your local app so that you can use them. From your application root folder, you would execute npm install --save express, repeating for each of the three new services.

Swagger generate Node.JS Express server code

I have Swagger 2.0 documentation, and I would like to create a Node.JS server stub from the existing Swagger spec.
When I use the Swagger Editor, it has the option to generate Node.js server stubs, but the generated file uses the connect NPM libraries.
I would prefer to use Express, and have the application folder structure of a general Express application. Is there a way to modify the generation of the Node.JS server stub to be compatible with Express?
The easy answer is to change var app = require('connect')(); to var app = require('express')(); in nodejs-server-server/index.js. But it's not optimal since the generated code does not take use of the functionality of Express.
It seems like there will be a express code generator in the next version of swagger-codegen.
You could also use swaggerize-express to do the server stub generation.

Difference between a server with http.createServer and a server using express in node js

What's the difference between creating a server using http module and creating a server using express framework in node js?
Thanks.
Ultimately, express uses node's http api behind the scenes.
express framework
The express framework provides an abstraction layer above the vanilla http module to make handling web traffic and APIs a little easier. There's also tons of middleware available for express (and express-like) frameworks to complete common tasks such as: CORS, XSRF, POST parsing, cookies etc.
http api
The http api is very simple and is used to to setup and manage incoming/outgoing ,HTTP connections. Node does most of the heavy lifting here but it does provide things you'll commonly see throughout most node web framework such as: request/response objects etc.
Express uses the http module under the hood, app.listen() returns an instance of http. You would use https.createServer if you needed to serve your app using HTTPS, as app.listen only uses the http module.
Here's the source for app.listen so you can see the similarities.:
app.listen = function(){
var server = http.createServer(this);
return server.listen.apply(server, arguments);
};

Resources