Caution README in progress

frontexpress

Minimalist front end router framework a la express

import frontexpress from 'frontexpress';
const app = frontexpress();

// listen HTTP GET request on path (/)
app.get('/', (req, res) => {
  window.alert('Hello World');
});

// Once DOM is loaded start listening HTTP requests
document.addEventListener("DOMContentLoaded", (event) => {
  app.listen();
});

Installation

$ npm install frontexpress

Quick Start

The quickest way to get started with frontexpress is to clone frontexpress sample to generate an application as shown below:

Clone the git repository:

$ git clone git@github.com:camelaissani/frontexpress-sample.git
$ cd frontexpress-sample

Install dependencies:

$ npm install

Start the server:

$ npm start

Tests

Clone the git repository:

$ git clone git@github.com:camelaissani/frontexpress.git
$ cd frontexpress

Install the dependencies and run the test suite:

$ npm install
$ npm test

Routing

Basic routing

Routing allows to link the frontend application with HTTP requests to a particular URI (or path). The link can be specific to an HTTP request method (GET, POST, and so on).

The following examples illustrate how to define simple routes.

Listen an HTTP GET request on URI (/):

app.get('/', (req, res) => {
  window.alert('Hello World');
});

Listen an HTTP POST request on URI (/):

app.post('/', (req, res) => {
  window.alert('Got a POST request at /');
});

Route paths

Route paths, in combination with a request method, define the endpoints at which requests can be made. Route paths can be strings (see basic routing section), or regular expressions.

This route path matches all GET request paths which start with (/api/):

app.get(/^api\//, (req, res) => {
  console.log(`api was requested ${req.uri}`);
});

Route handlers

You can provide multiple callback functions to handle a request. Invoking next() function allows to pass the control to subsequent routes. Whether next() method is not called the handler chain is stoped

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);

A response to a GET request on path (/example/a) displays:

h1!
h2!

h3 is ignored because next() function was not invoked.

app.route()

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') });

frontexpress.Router

Use the frontexpress.Router class to create modular, mountable route handlers.

Create a router file named birds.js in the app directory, with the following content:

import frontexpress from 'frontexpress';

const router = frontexpress.Router();

// middleware that is specific to this router
router.use((req, res, next) => {
  console.log(`Time: ${Date.now()}`);
  next();
});

// react on home page route
router.get('/', (req, res) => {
  document.querySelector('.content').innerHTML = '<p>Birds home page</p>';
});

// react on about route
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);

The app will now be able to react on requests (/birds) and (/birds/about)

License

MIT