Whenever I open my site (i.e. http://127.0.0.1:8090), a GET request to / is not made.
app.use(session({
//session stuff
}));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static('client'));
app.get('/', async function(req, res){
console.log(req);
}
module.exports = app;
app.listen(8090);
This is not being called and I am unsure why - what can I do to fix this? My other app.get() functions are called when the relevant pages are opened.
When you open your site (i.e. http://127.0.0.1:8090) it sends a GET request but doesn't send back to the browser any response. That is why it seems GET request wasn't made. Send a response in the app.get and it'll send a response.
app.get('/', async function(req, res){
console.log(req);
res.send('Hello World');
}
express.static('client') suggest from where your static files are to be loaded. Here 'client' is treated as your root path.
If your 'client' directory has some 'abcd.img' file then, http://127.0.0.1:8090/abcd.img will load 'abcd.img'. 'index.html' in your 'client' directory will be loaded by default when you point to root path. That means 'http://127.0.0.1:8090/' will load your index.html file.
Express has a very good documentation on this part. I am pasting it for your reference.
Express documentation for serving static files
Related
So I am making a node.js server for my webpage. And after having added root route that sends the index.html it also sends the game.html page with out it being specified. The game.html file is in a folder called game in the root directory. So I am wondering why is it sending the game.html file? And is it supposed to happened, with out me saying what the server is supposed to send in the "/game" path?
I am using Node.js and Express.
const express = require("express");
const app = express();
const port = 3000;
app.use(express.static("public"));
// ROUTES
app.get("/", (req, res) => {
res.sendFile("index.html", {root: "public"});
})
// Listening
app.listen(port, () => {
console.log(`Listening at port http://localhost:${port}`);
})
In your code, you have two route handlers that can send responses back to incoming requests.
This one:
app.get("/", (req, res) => {
res.sendFile("index.html", {root: "public"});
});
is pretty obvious. If the request is /, then send back the index.html file.
This one:
app.use(express.static("public"));
tells express to compare the incoming path of the request to any files in your public directory and, if they match, then send that file back as the response to that request. This is exactly what express.static() is designed for and what it is supposed to do. It is commonly used for serving static resources such as CSS files, JS files and even static HTML files since one route can automatically serve an entire directory hierarchy.
So, if an incoming request arrives for /game/game.html and, the public directory contains this:
public
game
game.html
Then, express.static("public") will find a match for /game/game.html and will send back the game.html file as the response. This is working as designed.
Because of this, you should never put anything that you don't want automatically served inside the directory that you pass to express.static() - in your specific code example, the "public" directory.
I used express as a middleware to serve my angular application (SSR), but as I used internationalisation (spanish & english) on my angular app, I prefixed my urls with /sp and /en to switch between both distributed forlder for both languages.
The prefix has just to be taken into account to pick the right folder and then forward the request to the right angular dist folder, but once done, I have to remove the language prefix /sp /en on every url before rendering the result.
Here's what I has
const DIST_FOLDER = join(process.cwd(), 'dist');
app.set('view engine', 'html');
app.set('views', join(DIST_FOLDER, 'en')); // <-- the default language I want to set
app.namespace('/en/', function(){
app.get('*', (req, res) => {
app.set('views', join(DIST_FOLDER, 'en'));
req.url = req.url.slice(4); // <-- here's how I tried to edit the request's url
res.render('index', { req });
})
});
app.namespace('/sp/', function(){
app.get('*', (req, res) => {
app.set('views', join(DIST_FOLDER, 'sp'));
req.url = req.url.slice(4); // <-- same workaround here
res.render('index', { req });
})
});
But it doesn't work as expected as I still have the language prefix on the url of the request I forward to my dist files.
What did I miss?
Thank you
I think your approach is wrong here, the only way the browser will change the URL in this scenario is if the server returns a redirect response i.e. 30x. However, based on your code if the server removes the lang prefix and redirects they effectively lose the preference from the previous response.
Given each user will most likely get to choose their preferred language, and the fact the server has to remember what they chose, it seems logical to me that this needs to be a session-based option.
I've no idea as to what backend you are using to store data but a good place to start would be to look at express-session, it uses an in-memory store by default to get you started but supports various production-ready ones out the box.
My express.js configuration looks like this:
//app.js:
var routes = require('./routes/index');
app.use(express.static(path.join(__dirname, '../client/build'), {'index': false}));
app.use('/', routes);
//routes/index.js:
router.get('/', function(req, res) {
console.log("im never called");
});
My handler is NEVER called (should be called when requesting without path or just '/'), the browser just gets a 303 with Location //, what is wrong here?
Thanks in advance for help!
Try to add module.exports = router; to the end of routes/index.js
Edit:
There is a common practice to put all your static files in one directory (maybe you have done it already) and make all requests to static files start with /public:
app.use('/public', express.static(path.join(__dirname, '../client/build'));
Doing this way
http://yoursite.com/public/some/file.js
will be served with
../client/build/some/file.js
Instead of /public you may choose a path that will not intersect with your router.
I was having this same issue this morning and I thought I would share my solution.
The express.static method is running on all of your requests... when it cannot find a match, it can either run the next() function and continue to your desired handler or redirect to a trailing slash to check if the request is for a directory.
I fixed it by adding 'redirect:false' as follows:
app.use(express.static(
path.join(__dirname, '../client/build'),
{index: false, redirect: false}));
Reference: express.static(root, [options])
for a project that im currently working on, i decided not to use node's http server, and for a few days i have been trying to figure out how to combine a socket.io-passport app with nginx.To my understanding im forced to use express (for session handling).Its very weird that all the examples i have found on the net, always using node's server for serving static content and noone has made an actual working example with Nginx instead.Let me describe my problem.
Consider the following code
app.get('/home', function(reg, res){
//check user session value, is logged in
if(req.user)
res.render('dash',{
username: req.user['member_id']//req.user array contains serializeUser data
});
else
res.render('index');
});
app.get('/logout', function(req, res){
req.logout();
res.redirect('/home');
});
//login form submit as post
app.post('/login',
passport.authenticate('local', {
successRedirect: '/dashboard',
failureRedirect: '/home'
})
);
app.get('/signup',routes.signup);
app.get('*', routes.index);
How do i instruct JavaScript in my js file, to serve static files without routes?
In expressjs you can use static middleware to serve static content from specific folder. You do not need to specify route for that.
app.use(express.static(__dirname + '/public'));
you can access static files in public folder localhost:portnumber/staticfile.js
You may want to prefix static files, you can use this:
app.use('/static', express.static(__dirname + '/public'));
you can access with localhost:portnumber/static/staticfile.js
If you want nginx to serve static files you can simply create new vhost in nginx to serve static files through nginx aswell.
Generally nginx is used as reverse proxy to proxy all request on port 80 to node.js app.
Before I ask about app.router I think I should explain at least what I think happens when working with middleware. To use middleware, the function to use is app.use(). When the middleware is being executed, it will either call the next middleware by using next() or make it so no more middleware get called. That means that the order in which I place my middleware calls is important, because some middleware depends on other middleware, and some middleware near the end might not even be called.
Today I was working on my application and had my server running in the background. I wanted to make some changes and refresh my page and see the changes immediately. Specifically, I was making changes to my layout. I couldn't get it to work so I searched Stack Overflow for the answer and found this question. It says to make sure that express.static() is beneath require('stylus'). But when I was looking at that OP's code, I saw that he had his app.router call at the very end of his middleware calls, and I tried to figure out why that was.
When I made my Express.js application (version 3.0.0rc4), I used the command express app --sessions --css stylus and in my app.js file the code came setup with my app.router above both the express.static() and require('stylus') calls. So it seems like, if it comes already setup that way, then it should stay that way.
After re-arranging my code so I could see my Stylus changes, it looks like this:
app.configure(function(){
//app.set() calls
//app.use() calls
//...
app.use(app.router);
app.use(require('stylus').middleware(__dirname + '/public'));
app.use(express.static(__dirname + '/public', {maxAge: 31557600000}));
});
app.get('/', routes.index);
app.get('/test', function(req, res){
res.send('Test');
});
So I decided that the first step would be to find out why it is important to even have app.router in my code. So I commented it out, started my app and navigated to /. It displayed my index page just fine. Hmm, maybe it worked because I was exporting the routing from my routes file (routes.index). So next I navigated to /test and it displayed Test on the screen. Haha, OK, I have no idea what app.router does. Whether it is included in my code or not, my routing is fine. So I am definitely missing something.
So Here Is My Question:
Could somebody please explain what app.router does, the importance of it, and where I should place it in my middleware calls? It would also be nice if I got a brief explanation about express.static(). As far as I can tell, express.static() is a cache of my information, and if the application can't find the requested page, it will check the cache to see if it exists.
Note: This describes how Express worked in versions 2 and 3. See the end of this post for information about Express 4.
static simply serves files (static resources) from disk. You give it a path (sometimes called the mount point), and it serves the files in that folder.
For example, express.static('/var/www') would serve the files in that folder. So a request to your Node server for http://server/file.html would serve /var/www/file.html.
router is code that runs your routes. When you do app.get('/user', function(req, res) { ... });, it is the router that actually invokes the callback function to process the request.
The order that you pass things to app.use determines the order in which each middleware is given the opportunity to process a request. For example, if you have a file called test.html in your static folder and a route:
app.get('/test.html', function(req, res) {
res.send('Hello from route handler');
});
Which one gets sent to a client requesting http://server/test.html? Whichever middleware is given to use first.
If you do this:
app.use(express.static(__dirname + '/public'));
app.use(app.router);
Then the file on disk is served.
If you do it the other way,
app.use(app.router);
app.use(express.static(__dirname + '/public'));
Then the route handler gets the request, and "Hello from route handler" gets sent to the browser.
Usually, you want to put the router above the static middleware so that a accidentally-named file can't override one of your routes.
Note that if you don't explicitly use the router, it is implicitly added by Express at the point you define a route (which is why your routes still worked even though you commented out app.use(app.router)).
A commenter has brought up another point about the order of static and router that I hadn't addressed: the impact on your app's overall performance.
Another reason to use router above static is to optimize performance. If you put static first, then you'll hit the hard drive on every single request to see whether or not a file exists. In a quick test, I found that this overhead amounted to ~1ms on an unloaded server. (That number is much likely to be higher under load, where requests will compete for disk access.)
With router first, a request matching a route never has to hit the disk, saving precious milliseconds.
Of course, there are ways to mitigate static's overhead.
The best option is to put all of your static resources under a specific folder. (IE /static) You can then mount static to that path so that it only runs when the path starts with /static:
app.use('/static', express.static(__dirname + '/static'));
In this situation, you'd put this above router. This avoids processing other middleware/the router if a file is present, but to be honest, I doubt you'll gain that much.
You could also use staticCache, which caches static resources in-memory so that you don't have to hit the disk for commonly requested files. (Warning: staticCache will apparently be removed in the future.)
However, I don't think staticCache caches negative answers (when a file does not exist), so it doesn't help if you've put staticCache above router without mounting it to a path.
As with all questions about performance, measure and benchmark your real-world app (under load) to see where the bottlenecks really are.
Express 4
Express 4.0 removes app.router. All middleware (app.use) and routes (app.get et al) are now processed in precisely the order in which they are added.
In other words:
All routing methods will be added in the order in which they appear. You should not do app.use(app.router). This eliminates the most common issue with Express.
In other words, mixing app.use() and app[VERB]() will work exactly in the order in which they are called.
app.get('/', home);
app.use('/public', require('st')(process.cwd()));
app.get('/users', users.list);
app.post('/users', users.create);
Read more about changes in Express 4.
Routing means determining how an application responds to a client request to a particular endpoint, which is a URI (or path) and a specific HTTP request method (GET, POST, and so on).
Each route can have one or more handler functions, which are executed when the route is matched.
In Express 4.0 Router, we are given more flexibility than ever before in defining our routes.
express.Router() is use multiple times to define groups of routes.
route used as middleware to process requests.
route used as middleware to validate parameters using ".param()".
app.route() used as a shortcut to the Router to define multiple requests on a route
when we are using app.route(), we are attaching our app with that router.
var express = require('express'); //used as middleware
var app = express(); //instance of express.
app.use(app.router);
app.use(express.static(__dirname + '/public')); //All Static like [css,js,images] files are coming from public folder
app.set('views',__dirname + '/views'); //To set Views
app.set('view engine', 'ejs'); //sets View-Engine as ejs
app.engine('html', require('ejs').renderFile); //actually rendering HTML files through EJS.
app.get('/', function (req, res) {
res.render('index');
})
app.get('/test', function (req, res) {
res.send('test')
})
In express Version 4 we can easily define routes in the following manner:
server.js:
const express = require('express');
const app = express();
const route = require('./route');
app.use('/route', route);
// here we pass in the imported route object
app.listen(3000, () => console.log('Example app listening on port 3000!'));
route.js:
const express = require('express');
const router = express.Router();
router.get('/specialRoute', function (req, res, next) {
// route is now http://localhost:3000/route/specialRoute
});
router.get('/', function (req, res, next) {
// route is now http://localhost:3000/route
});
module.exports = router;
In server.js we imported the router object of the route.js file and apply it in the following manner in server.js:
app.use('/route', route);
Now all of the routes in the route.js have the following base URL:
http://localhost:3000/route
Why this approach:
The main advantage of taking this approach is that now our app is more modular. All the route handlers for a certain route now can be put into different files which makes everything more maintainable and easier to find.
An article by #kelyvinn from 2016, with the intent to demonstrate modularity, includes this code:
// controllers/apis/dogs/index.js
const
express = require('express'),
dogService = require('../../../services/dogs');
let router = express.Router();
router.get('/', dogService.getDogs);
router.get('/:id', dogService.getDogWithId);
module.exports = router;