Develop Reference

Express.js - prepend sub-route to all defined routes

Let's say I have an Express app defined in a file, say server.js like this:
const app = express();
app.use('/foo', foo);
app.use('/bar', bar);
module.exports = app;
I import this Express app in another file, say index.js:
const app = require('./server');
const port = process.env.PORT || 3000;
const listen = (port) => {
app.listen(port, () => {
console.log(`Backend listening on port ${port}!`);
});
};
listen(port);
Now, the routes that are available for this app are /foo and /bar.
Is there a way to edit configuration in the index.js file so that the routes become /api/foo and /api/bar? Without touching server.js file.
Use case:
I have a Nuxt.js app with a backend that is loaded into the Nuxt app via serverMiddleware property in nuxt.config.js like this:
serverMiddleware: [
...
{ path: '/api', handler: '~/server.js' },
],
This has the effect similar to what I described above: it imports the express app from server.js app and prepends all its routes with /api.
However, often I don't want to develop the frontend part of the Nuxt app, I just want to do changes on the backend. For this purpose I have a helper file like index.js above, which runs backend only. (Frontend often takes long time to compile, that's why I don't want to compile it when I don't need to.)
This creates a problem that all the routes are slightly different - they lack the /api at the beginning. The routes are being used in different tools like Postman etc. and suddenly they wouldn't work.
My current solution is to define index.js file in the same way as server.js file with all routes defined like I want them - instead of app.use('/foo', foo); there's app.use('/api/foo', foo); etc. but this has its own problems, e.g. if I change server.js I have to change index.js. I am looking for something more elegant.

According to the express 4.0 docs https://expressjs.com/en/4x/api.html#app.use you can use an application instance the same as you would a router. In short, just use the export of your server.js as a middleware at the route in which you want to insert it, as opposed to directly calling .listen() on it.
Here is some demo code that worked for me:
const express = require('express');
const app_inner = express();
app_inner.use('/foo', (req,res) => res.send('foo'));
const app_outer = express();
app_outer.use('/foo2', app_inner);
app_outer.listen(9999);
// web browser at localhost:9999/foo2/foo returns 'foo' as expected

Express.js returning multiple routes in a single exported router object returns incorrect route

I am trying to utilize an MVC pattern for express. I am modularizing routes and trying to declare the express router in only the server entry file and nowhere else.
My current issue is when exporting my appRoute function in my main routes file (see below), the first route (user route), returns users. I have another route called game that is exported in the same function but it still returns users instead of games.
Both routes have a controller function called getAll that gets different data from different tables.
If I try and visit the route: http://localhost:8000/user/getAll, it returns all users just fine.
If I try and visit the route: http://localhost:8000/game/getAll, it still returns all users even when they're different routes...
If I were to flip the order of users and games in the main routes file where game is first and user is second, users starts to return games. It's like the second route mimics the first route.
This may be something simple, but any help I will appreciate.
My code is as shown below
server entry point (index.js)
const app = express();
const router = express.Router();
const bootstrap = require('./src/bootstrap');
bootstrap(app, router);
I am passing on the app and router instance to my bootstrap file where all routes will be exported to.
bootstrap.js (this file gets all exported routes and uses them within the app)
const { appRoute } = require('./routes');
module.exports = (app, router) => {
return app.use('/', appRoute(router));
};
I am passing on the router instance to my main routes file where all routes are exported from.
Main routes file (index.js): this file requires all routes and uses them within the router instance. I think this might be where my issue is but I am a little stuck on how I might fix it.
const { userRoute } = require('./userRoute');
const { gameRoute } = require('./gameRoute');
exports.appRoute = (router) => {
router.use('/user', userRoute(router));
router.use('/game', gameRoute(router));
return router;
};
Game route files (index.js): returns all users instead of games
const { gameController } = require('../../controllers');
exports.gameRoute = (router) => {
return router.get('/getAll', gameController.getAll);
};
Any help is greatly appreciated. If there is any clarification needed please let me know.

I think you need to create a separate router for game and user.
See the express.Routing section and birds.js example here

Is it possible to use application level middleware in express router?

I've been playing around with setting up a basic atlassian-connect-express (ACE) application, and have modified the starter code provided by the ACE package to be suitable for serverless deployment. One of the problems I faced after doing this was that routing is now divided into stages, e.g. /dev, /prod. I did a bit of research and found that a way to deal with this would be to use an express Router and mount it to the appropriate endpoint for the stage being deployed to. The problem I then faced is that the authentication middleware provided by ACE seems to be application level and then can't be used by each router.
Typically the routes were added to the express app like this:
import ace from 'atlassian-connect-express';
import express from 'express';
import routes from './routes';
const app = express();
const addon = ace(app);
app.use(addon.middleware());
routes(app, addon);
and in ./routes/index.js
export default function routes(app, addon) {
// Redirect root path to /atlassian-connect.json,
// which will be served by atlassian-connect-express.
app.get('/', (req, res) => {
res.redirect('/atlassian-connect.json');
});
// This is an example route used by "generalPages" module (see atlassian-connect.json).
// Verify that the incoming request is authenticated with Atlassian Connect.
app.get('/hello-world', addon.authenticate(), (req, res) => {
// Rendering a template is easy; the render method takes two params:
// name of template and a json object to pass the context in.
res.render('hello-world', {
title: 'Atlassian Connect'
});
});
// Add additional route handlers here...
}
I've changed ./routes/index.js to work as a router object and export that, however this leaves me unable to use the addon.authenticate() middleware
import ace from 'atlassian-connect-express';
import express from 'express';
import routes from './routes';
const app = express();
const addon = ace(app);
app.use('/dev', require('./routes'));
and in ./routes/index.js
const express = require('express');
const router = express.Router();
// Redirect root path to /atlassian-connect.json,
// which will be served by atlassian-connect-express.
router.get('/', (req, res) => {
res.redirect('/atlassian-connect.json');
});
// This is an example route used by "generalPages" module (see atlassian-connect.json).
// Verify that the incoming request is authenticated with Atlassian Connect.
router.get('/hello-world', addon.authenticate(), (req, res) => {
// Rendering a template is easy; the render method takes two params:
// name of template and a json object to pass the context in.
res.render('hello-world', {
title: 'Atlassian Connect'
});
});
module.exports = router;
Obviously having no knowledge of addon, the router cannot use that authentication middleware.
Is it possible to pass that middleware through to the router when attaching it to the application? If not, is there another way I can handle URL prefixes without using a router?

Express server configuration issues, the public directory

I created two separate separate bundles, one for my server and one for my client. However the client bundle is still not getting downloaded by the browser when someone accesses the root route.
I told Express to treat the public/ folder as a freely available public directory here inside of index.js:
app.use(express.static('public'));
app.get('/', (req, res) => {
const content = renderToString(<Home />);
I also added an HTML snippet with an ES6 template string like so:
import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import Home from './client/components/Home';
const app = express();
app.use(express.static('public'));
app.get('/', (req, res) => {
const content = renderToString(<Home />);
const html = `<html><head><body><div>${content}</div><script src="bundle.js"></script></body></head></html>`;
res.send(content);
});
The idea is when a user gets a response from this endpoint they will see the content from the <Home /> component, but also tell the users browser to go back to my server and download the bundle.js file.
The expectation is that I refresh the page and instantly retrieve localhost and make a request for bundle.js file and see the console log I added in the Home.js component:
import React from 'react';
const Home = () => {
return (
<div>
<div>I am an OK home component</div>
<button onClick={() => console.log('Howdy!')}>Press me!</button>
</div>
);
};
export default Home;
I refreshed the browser and did not see the console log nor a bundle.js file in Network tab.
What gives here?

So I created the variable html where I stored the HTML from the template string with the bundle.js file in it, but then I don't use that variable anywhere.
I had to replace res.send(content); with res.send(html);.

ReactJS Router is overriding ExpressJS router

I have encountered very interesting problem. My React JS root file has multiple routers:
render() {
return (
<div className="container body">
<Route exact path="/" component={<IndexPage/>} />
<Route exact path="/users" component={<Users/>} />
<Route exact path="/users/:userId" component={<User/> }/>
<Route exact path="/routers" component={<Routers/>} />
</div>
);
}
I generate Component depending on route. Then I have build my react components as single javascript file by webpack.
Now I'm trying to show React pages via ExpressJS like this:
const express = require('express');
const app = express();
// This is location where generated Webpack files are located
app.use(express.static(__dirname + '/../build'));
app.get('/api/hello', (req, res) => {
res.json({hello: 'world'})
});
// This is how I render React based pages
app.get(['/', '/users', '/routers'], (req, res) => {
res.sendFile(__dirname + '/../build/index.html');
});
app.listen(9000);
When I open /, /users, /routers paths by my browser, it shows correct React Components.
However, when I try to open /api/hello, It is still trying to generate React Component that does not exist, instead of showing JSON response!
How to stop making React's router overriding Express' router?
=================UPDATE=====================
I have found interesting solution. When I made api/hello request via POSTMAN it has shown to me JSON response.
That means that ReactJS has its own CACHING in browser level which makes it seem like overriding routes.

I have found interesting solution. When I made api/hello request via POSTMAN it has shown to me JSON response.
That means that ReactJS has its own CACHING in browser level which makes it seem like overriding routes.