Serving static files in Express (express.static vs app.static) - node.js

Through serving static files in Express .. I saw below code:
const express = require('express');
const app = express();
// Initialize the main project folder
app.use(express.static('website'));
Why we didn't use app.static() instead of express.static() as we already assigned express() to the app constant, and what is the difference between them?
Note: I tried to replace express with app and it said app.static is not a function. I also saw some NPM packages that use app.static() like wamjs for example, which is weird.

app.static() has nothing to do with Express.
Wam is a completely different framework (that may be Express-like in some ways, but it's not Express and not identical to Express). Here's a description on the NPM wam.js page:
Wam is a small koa and next.js inspired middleware framework for node.
If you want to program with Express, then use the Express documentation, not the Wam documentation and it will guide you to use app.use(somePath, express.static()). You can see in the Express doc for the app object, there is no mention of app.static(). That is apparently something that wasm.js invented for it's own framework.
Why we didn't use app.static() instead of express.static() as we already assigned express() to the app constant, and what is the difference between them?
Because Express doesn't have app.static(). It has express.static().
I also saw some NPM packages that use app.static() like wamjs for example, which is weird.
I wouldn't call it weird. wamjs is a different package with a different API. It is not Express so there should be no expectation that Express behaves like wamjs or that wamjs behaves like Express. They are different frameworks.

Related

Plan .js server vs webpack vs

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

NODE JS APP: What does this notation mean?

I've picked up a project from another developer, uses the typical MEAN stack with the entry point being server.js.
Now, in server.js, the module that does:
var express = require('express');
var app = express();
var passport = require('passport');
There are another 2 lines of code that look like they are doing some sort of routing but I can't figure out what it actually means:
require('./routes.js')(app, passport);
require('./apiRequest/authenticate')(app, passport);
I'm confused because it looks like require() is called from the global scope, whereas all the other routing methods are called off app, i.e app.use(). Can someone explain what the sets of parameters mean, and why are there two sets also where is require() called from, is it provided by Express?
routes.js and apiRequest/authenticate are two local (project) modules / js files that are basically required here.
express and passport are node modules/libraries that are provided from npm_modules, via node module resolution.
app is simply an express instance created by invoking the express module/default function.
The parameters passed to the required local modules (routes and authenticate) are just parameters passed to those modules (default exported function) that can be used further in those files (e.g. if you look in routes.js you will probably see that they use app.use(..., where app is given as param as well as the passport module)
To explain the syntax require('./routes.js')(app, passport); more clearly:
require - node OOB function for importing modules into the current file/module
require('./routes.js') resolves the default export from the routes.js file which in this case is a function
...(app, passport) this function (from above point) is then invoked with the provided params (which were previously defined here - i.e. imported with require)

Express router.get fails, yet app.get works

While walking through this tutorial, I came across a problem wherein the router methods would not work. Using npm start and accessing localhost:3000/api/puppies gets a 404 error. However when I changed
var router = express.Router();
router.get('/api/puppies', db.getAllPuppies);
to
var app = express();
app.get('/api/puppies', db.getAllPuppies);
and run with node index.js, the data prints as expected. I've tried also putting at the beginning of my file
app.use(express.static(__dirname + '/api/'));
but no joy. Is this something to do with npm start? At one point I literally copy/pasted the code out of the tutorial and still I get the 404s.
A router has to be connected to your express app in order to be part of your server.
app.use(yourRouter);
Or, more commonly with a path that isolates that router's effect to just URLs that start with a specific path and the router's own URLs are relative to this path:
app.use('/somePath', yourRouter);
Without this, it's just a declared and configured router that isn't attached to any server.
Express documentation examples here.
The tutorial you reference does not appear to show this part of using a router.

How to mount a Sails.js app as express middleware

I would like to use Sails within a larger express based app. Most node.js MVC frameworks I have worked with you can mount as express middleware. Is this possible with Sails?
I want to do something like:
var express = require('express'),
app = express();
var mySailsApp = require('./mysailsapp');
app.use(mySailsApp);
While there are some active efforts to develop systems that would let Sails be more modularized, there's no way to use a Sails app as Express middleware. Sails works on top of Express, but not the other way around. However, you can use custom Express middleware with Sails--see this answer for an example.

Node.js, Express, Jade & Template in Package

Is it possible to store templates for an express application in a separate package?
In my usecase I'd like to have a shared package containing global templages to give all apps the same look and feel even so they run as an independent entity on another port or even another server. Local content templates could live within the app, so all I'm looking for is a way to share that kind of code between multiple apps.
Going a step further I was thinking about skinning packages which can overwrite the default templates. Once installed in the "template package" it could change the look and feel of all applications using the core templates.
Is there a way of doing that without having to drop the comfort of express?
cu
Roman
This is possible using express. You can basically mount a whole app object to a specific route (with all routes and middleware).
var express = require('express');
var coreApp = express();
var blogApp = express();
var wikiApp = express();
// init blogApp and wikiApp with middleware and routes
coreApp.use('/blog', blogApp);
coreApp.use('/wiki', wikiApp);
Now you can mount your templates into this modular apps and then mount them into your core app.
Here's a screen cast from the express creator himself, called modular web applications.

Resources