A simple vanilla JavaScript router a la ExpressJS.
Code the front-end like the back-end.
$ npm install frontexpress
$ bower install frontexpress
On jsDelivr
import frontexpress from 'frontexpress';
// Front-end application
const app = frontexpress();
// front-end logic on navigation path "/page1"
app.get('/page1', (req, res) => {
document.querySelector('.content').innerHTML = res.responseText;
});
// front-end logic on navigation path "/page2"
app.get('/page2', (req, res) => {
document.querySelector('.content').innerHTML = res.responseText;
});
// start front-end application
app.listen();
Listen GET requests on path /hello:
app.get('/hello', (req, res) => {
window.alert('Hello World');
});
Listen POST requests on path /item:
app.post('/item', (req, res) => {
window.alert('Got a POST request at /item');
});
Listen GET requests on path starting with /api/:
app.get(/^api\//, (req, res) => {
console.log(`api was requested ${req.uri}`);
});
Get parameters from path
app.get('/product/:id', (req, res) => {
// if we have /product/42 then
// req.params.id = 42
});
app.get('/user/:firstname?/:lastname', (req, res) => {
// if we have /user/camel/aissani then
// req.params.firstname = 'camel'
// req.params.lastname = 'aissani'
// if we have /user/aissani then
// req.params.firstname = undefined
// req.params.lastname = 'aissani'
});
app.get('/user/:id', (req, res) => {
// if we have /user/1,2,3 then
// req.params.id = [1,2,3]
});
You can have the full capabilities of Express-style path with this plugin frontexpress-path-to-regexp
The middleware object gives access to more hooks
class MyMiddleware = new Middleware {
entered(req) {
// before request sent
}
updated(req, res) {
// after request sent
// res has the request response
window.alert('Hello World');
}
exited(req) {
// before a new request sent
}
failed(req, res) {
// on request failed
}
next() {
// for chaining
return true;
}
}
app.get('/hello', new MyMiddleware());
You can provide multiple handlers functions on a navigation path. Invoking next()
function allows to chain the handlers.
At the opposite, when the next()
method is not called the handler chain is stopped.
const h1 = (req, res, next) => { console.log('h1!'); next(); };
const h2 = (req, res, next) => { console.log('h2!') };
const h3 = (req, res, next) => { console.log('h3!'); next(); };
app.get('/example/a', h1);
app.get('/example/a', h2);
app.get('/example/a', h3);
On navigation on path /example/a, the browser console displays the following:
h1!
h2!
h3 is ignored because next()
function was not invoked.
You can create chainable route handlers for a route path by using app.route()
.
app.route('/book')
.get((req, res) => { console.log('Get a random book') })
.post((req, res) => { console.log('Add a book') })
.put((req, res) => { console.log('Update the book') });
Use the frontexpress.Router
class to create modular, mountable route handlers.
Create a router file named birds.js
:
import frontexpress from 'frontexpress';
const router = frontexpress.Router();
// specific middleware for this router
router.use((req, res, next) => {
console.log(`Time: ${Date.now()}`);
next();
});
// listen navigation on the home page
router.get('/', (req, res) => {
document.querySelector('.content').innerHTML = '<p>Birds home page</p>';
});
// listen navigation on the about page
router.get('/about', (req, res) => {
document.querySelector('.content').innerHTML = '<p>About birds</p>';
});
export default router;
Then, load the router module in the app:
import birds from './birds';
...
app.use('/birds', birds);
- frontexpress-path-to-regexp: Add the ability to support Express-style path string such as /user/:name, /user*...
Others are coming
It consists to simply create an object with two properties:
- name: the name of your plugin
- plugin: the function containing the implementation
Let's assume that we have implemented this plugin in the frontexpress-my-plugin.js
file as below:
export default {
name: 'My plugin',
plugin(app) {
// the plugin implementation goes here
// Some ideas
// you can get settings
// const transformer = app.get('http GET transformer');
//
// you can set settings
// app.set('http requester', {
// fetch() {
// ...
// }});
//
// you can complete routes
// app.get(...)
}
};
To use it:
import frontexpress from 'frontexpress';
import myPlugin from 'frontexpress-my-plugin';
// Front-end application
const app = frontexpress();
// tell to frontexpress to use your plugin
app.use(myPlugin);
Clone the git repository:
$ git clone [email protected]:camelaissani/frontexpress.git
$ cd frontexpress
Install the dependencies and run the test suite:
$ npm install
$ npm test