Go to file
2017-05-26 14:25:37 +02:00
docs Update frontexpress.md 2017-01-13 15:03:41 +01:00
lib refactored code for reducing lib size 2017-01-15 12:00:51 +01:00
test diet for reducing lib size 2017-01-14 15:02:50 +01:00
.babelrc exposed frontexpress in the browser global context #2 2016-09-08 23:19:07 +02:00
.codeclimate.yml added codeclimate config 2017-01-13 14:47:30 +01:00
.eslintignore added source map and made lib directory visible for bower deployment #3 2016-09-12 00:40:45 +02:00
.eslintrc made eslint stricter - added unit tests to cover sample in README 2016-07-10 00:58:03 +02:00
.gitignore Added webpack to generate frontexpress.min.js for bower deployment #2 2016-09-08 21:50:01 +02:00
.npmignore diet for reducing lib size 2017-01-14 15:02:50 +01:00
.travis.yml optimized lib size - changed frontexpress.Middleware now it returns a class and not an instance anymore 2017-01-13 14:23:15 +01:00
bower.json replaced webpack by rollup to reduce browser bundle size (-3kb) 2016-09-15 19:16:42 +02:00
frontexpress.js refactored code for reducing lib size 2017-01-15 12:00:51 +01:00
frontexpress.min.js better support of es modules 2017-05-26 14:25:37 +02:00
frontexpress.min.js.map better support of es modules 2017-05-26 14:25:37 +02:00
gzipsize.js diet for reducing lib size 2017-01-14 15:02:50 +01:00
index.js exposed frontexpress in the browser global context #2 2016-09-08 23:19:07 +02:00
LICENSE Initial commit 2016-06-26 11:34:45 +02:00
package.json better support of es modules 2017-05-26 14:25:37 +02:00
README.md better support of es modules 2017-05-26 14:25:37 +02:00
rollup.config.dev.js diet for reducing lib size 2017-01-14 15:02:50 +01:00
rollup.config.prod.js better support of es modules 2017-05-26 14:25:37 +02:00

frontexpress

Build Status Code Climate Coverage Status dependencies Size Shield

Frontexpress manages routes in browser like ExpressJS does on Node.

Same language same API on all the stack.

Code the front-end logic with the same style than on the back-end with express

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 = `<h1>Page 1 content</h1>`;
});

// front-end logic on navigation path "/page2"
app.get('/page2', (req, res) => {
    document.querySelector('.content').innerHTML = `<h1>Page 2 content</h1>`;
});

// start front-end application
app.listen(() => {
    // on DOM ready
});

Installation

From npm repository

$ npm install frontexpress

From bower repository

$ bower install frontexpress

From CDN

On jsDelivr

Quick Start

The quickest way to get started with frontexpress is to clone the frontexpress-demo repository.

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

Navigation path and frontexpress routing

Disclaimer

In this first version of frontexpress, the API is not completely the mirror of the expressjs one.

There are some missing methods. Currently, the use, get, post... methods having a middleware array as parameter are not available. The string pattern to define route paths is not yet implemented.

Obviously, the objective is to have the same API as expressjs when the methods make sense browser side.

Basic routing

Listen navigation (GET request) on path /hello:

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

Listen a POST request on path /item:

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

Routing based on RegExp

Listen navigation on paths which start with /api/:

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

Chain handlers

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.

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:

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

API

Method Short description
Frontexpress
frontexpress() Creates an instance of application
frontexpress.Router() Creates a Router object
frontexpress.Middleware Returns the Middleware class
Application
set(setting, value) Assigns a setting
listen(callback) Starts the application
route(uri) Gets a Router initialized with a root path
use(uri, middleware) Sets a middleware
get(uri, middleware) Applies a middleware on given path for a GET request
post(uri, middleware) Applies a middleware on given path for a POST request
put(uri, middleware) Applies a middleware on given path for a PUT request
delete(uri, middleware) Applies a middleware on given path for a DELETE request
httpGet(request, success, failure) Invokes a GET ajax request
httpPost(request, success, failure) Invokes a POST ajax request
httpPut(request, success, failure) Invokes a PUT ajax request
httpDelete(request, success, failure) Invokes a DELETE ajax request
Router
use(middleware) Sets a middleware
all(middleware) Sets a middleware on all HTTP method requests
get(uri, middleware) Applies a middleware on given path for a GET request
post(uri, middleware) Applies a middleware on given path for a POST request
put(uri, middleware) Applies a middleware on given path for a PUT request
delete(uri, middleware) Applies a middleware on given path for a DELETE request
Middleware
entered(request) Invoked by the app before an ajax request is sent
exited(request) Invoked by the app before a new ajax request is sent
updated(request, response) Invoked by the app after an ajax request has responded
failed(request, response) Invoked by the app after an ajax request has failed
next() Allows to break the middleware chain execution

middleware function

After registering a middleware function, the application invokes it with these parameters:

  (request, response, next) => {
    next();
  }

request: Object, the ajax request information sent by the app

response: Object, the response of request

next: Function, the next() function to call to not break the middleware execution chain

request object

  {
    method,
    uri,
    headers,
    data,
    history: {
      state,
      title,
      uri
    }
  }

method: String, HTTP methods 'GET', 'POST'...

uri: String, path

headers: Object, custom HTTP headers

data: Object, data attached to the request

history: Object, object with properties state, title and uri

If the history object is set, it will activate the browser history management. See browser pushState() method for more information about state, title, and uri (url).

uri and history.uri can be different.

response object

  {
    status,
    statusText,
    responseText,
    errorThrown,
    errors
  }

status: Number, HTTP status 200, 404, 401, 500...

statusText: String

responseText: String response content

errorThrown: Object exception thrown (if request fails)

errors: String error description (if request fails)

License

MIT