How to easily consume nodejs-backend from html5 application with destinations?

Question

I want to "connect" the html5 module with the nodejs backend, so that the frontend can access the backend for db logic. I found, that I have to create a destination in scp and write it in the mta.yaml and xs-app.js file for the approuter. Unfortunately it works not properly as there's the error: "Not Found".

The html5 frontend makes simply an ajax request. The nodjs backend recieves requests by express and operates with db.

I created a destination in scp which is called backendApi. The url is the one of the node_backend.

A code snippet from the mta.yaml file:

name: node_backend
    type: nodejs
    path: node_backend
    requires:
      - name: mongodb-nemo-t01-service
      - name: cf_elb_postgres
    provides:
      - name: node_backend_api
        properties:
          url: '${default-url}'

- name: cfElbTimeline
    type: html5
    path: cfElbTimeline
    parameters:
      disk-quota: 500M
      memory: 500M
    build-parameters:
      builder: grunt
    requires:
      - name: node_backend_api
        group: destinations
        properties:
          name: backendApi
          url: '~{url}'
          forwardAuthToken: true

My xs-app.js file:

{
    "welcomeFile": "/index.html",
    "authenticationMethod": "route",
    "logout": {
        "logoutEndpoint": "/do/logout"
    },
    "routes": [{
        "source": "^(.*)$",
        "target": "$1",
        "service": "html5-apps-repo-rt",
        "authenticationType": "xsuaa"
    }, {
        "source": "^(.*)$",
        "target": "$1",
        "destination": "backendApi",
        "httpMethods": ["GET", "POST"],
        "authenticationType": "none"
    }]
}

It already worked once to access the backend via the frontend, but there was a problem with the html5 application repository, so the view was not visible. So I changed it, but can not get back to the point, when i could access the backend via the approuter url. Maybe there's something wrong with the route's regex?

Can anyone check my code or can explain, how it should work?

Answer 1

The routes defined in your xs-app.json are considered in the order of entry when it comes to matching against the same pattern. Meaning, any request that you think is possibly made to the API is served by the first route: i.e; HTML5 repo service which only contains static files.

Also it's a good idea to differentiate the routes to avoid confusion. You can differentiate the API route by adding a route prefix or have a different pattern altogether.

For example:

{
    "welcomeFile": "/index.html",
    "authenticationMethod": "route",
    "logout": {
        "logoutEndpoint": "/do/logout"
    },
    "routes": [{
        "source": "^(.*)$",
        "target": "$1",
        "service": "html5-apps-repo-rt",
        "authenticationType": "xsuaa"
    }, {
        "source": "^/api/(.*)$",
        "target": "$1",
        "destination": "backendApi",
        "httpMethods": ["GET", "POST"],
        "authenticationType": "none"
    }]
}

You'd then be able to access the destination from the approuter like so :

https://<approuter_url>/<app_name-version>/api/whatever.xsodata