Skip to Content

MTA on Cloud Foundry with Html5 App Repo and Approuter

Hi SAP!

I was experimenting to build a full-stack app on cloud foundry with a nodejs and a html5 module. I first created a MTA without html5 app repo and it worked fine (especially routing, what this question will be about). Then I created a MTA with a html5 app repo (I checked the checkbox, when creating the html5 module) to take advantage of it and now routing to my nodejs-backend-module does not work anymore. There's always an internal server error.

I've read on the sap help site, that when using html5 app repo AND approuter, the property "destination" is not supported (which I had in the mta without html5 app repo to forward request to the module). So how can I forward requests to my backend module then?

The following shows the approuter with the route to the html5 app repo. When I add a second route with property destination, it does not work anymore.

{
	"welcomeFile": "/index.html",
	"authenticationMethod": "route",
	"logout": {
		"logoutEndpoint": "/do/logout"
	},
	"routes": [{
		"source": "^/(.*)$",
		"target": "$1",
		"service": "html5-apps-repo-rt",
		"authenticationType": "xsuaa"
	
        },{ // PART THAT DOES NOT WORK
		"source": "^/api/([a-z]+)",
		"target": "/$1",
		"destination": "nodejs_repo_api"
	}
]
}

This is mta.yaml file:

ID: mta_test_modules_repo
_schema-version: '2.1'
parameters:
  deploy_mode: html5-repo
version: 0.0.1
modules:
  - name: mta_test_modules_repo_appRouter
    type: approuter.nodejs
    path: mta_test_modules_repo_appRouter
    parameters:
      disk-quota: 256M
      memory: 256M
    requires:
      - name: mta_test_modules_repo_html5_repo_runtime
      - name: uaa_mta_test_modules_repo

  - name: mta_test_modules_repo_ui_deployer
    type: com.sap.html5.application-content
    path: mta_test_modules_repo_ui_deployer
    requires:
      - name: mta_test_modules_repo_html5_repo_host
    build-parameters:
      requires:
        - name: destination_service_frontend
          artifacts:
            - './*'
          target-path: resources/destination_service_frontend

  - name: nodejs_repo
    type: nodejs
    path: nodejs_repo
    provides:
      - name: nodejs_repo_api
        properties:
          url: '${default-url}'
     
  - name: destination_service_frontend
    type: html5
    path: destination_service_frontend
    parameters:
      disk-quota: 500M
      memory: 500M
    build-parameters:
      builder: grunt
    requires:
      - name: nodejs_repo_api
        group: destinations
        properties:
          name: nodejs_repo_api
          url: '~{url}'
          forwardAuthToken: true
      - name: uaa_mta_test_modules_repo
 
resources:
  - name: mta_test_modules_repo_html5_repo_runtime
    parameters:
      service-plan: app-runtime
      service: html5-apps-repo
    type: org.cloudfoundry.managed-service

  - name: mta_test_modules_repo_html5_repo_host
    parameters:
      service-plan: app-host
      service: html5-apps-repo
    type: org.cloudfoundry.managed-service

  - name: uaa_mta_test_modules_repo
    parameters:
      path: ./xs-security.json
      service-plan: application
      service: xsuaa
    type: org.cloudfoundry.managed-service

  - name: dest_mta_test_modules_repo
    parameters:
      service-plan: lite
      service: destination
    type: org.cloudfoundry.managed-service
Add comment
10|10000 characters needed characters exceeded

  • Follow
  • Get RSS Feed

4 Answers

  • Apr 02 at 09:13 AM

    The approuter module is the one that should access the backend (from nodejs_repo module), therefore you need to require it there.

    In other words, move the:

    requires:-name: nodejs_repo_api
            group: destinations
            properties:name: nodejs_repo_api
              url:'~{url}'
              forwardAuthToken: true
    

    From the destination_service_frontend module to the mta_test_modules_repo_appRouter module, build and deploy. With this approuter should be able to find destination nodejs_repo_api

    Add comment
    10|10000 characters needed characters exceeded

    • Hi Sergio Rozenszajn, thank you for your answer.

      Unfortunately this does not work either, the result is "Not found". I already tried it a while ago and now again.

      Have you already tried it by yourself, so do you have already experience with this case?

      I also changed the sequence of the two routes, so that /api/ is first, but this have not changed anything. And I added a /ui5/ to the repo-route, but then it can't find the index.html in repo.

      I think it must be simple, because without the repo it is, too, but I just can't find an answer to this question.

  • Apr 03 at 01:47 PM

    Hi Paige,

    Have you tried putting the api route first? From what I notice, in every case the first route will be matched and triggered. This is how your xs-app.json should look like with 'routes' modified:

    {
    	"welcomeFile": "/index.html",
    	"authenticationMethod": "route",
    	"logout": {
    		"logoutEndpoint": "/do/logout"
    	},
    	"routes": [{ // PART THAT DOES NOT WORK
    		"source": "^/api/([a-z]+)",
    		"target": "/$1",
    		"destination": "nodejs_repo_api"
    	}, {
    		"source": "^/(.*)$",
    		"target": "$1",
    		"service": "html5-apps-repo-rt",
    		"authenticationType": "xsuaa"
    	
            }
    ]
    }

    Let us know how this goes.

    Add comment
    10|10000 characters needed characters exceeded

    • Hi Ashish Singh,

      thank you for your answer.

      Yes, I already tried this, but the module can not be found anyway. Once, I also added a /ui5/ to the repo-route for determination, but then the index.html can not be found in repo.

  • Apr 05 at 08:34 AM

    Hi Ola,

    To resolve this issue do the following:

    a) Move the destinations to AppRouter module as defined by Sergio Rozenszajn.

    b) Change the target field in the routes:

    Instead of "target": "/$1"
    
    change it to "target": "api/$1"

    Regards,

    Puneet

    Add comment
    10|10000 characters needed characters exceeded

    • Hi Puneet Jain,

      thank your for your answer. Unfortunately this does not work for me either. It's still Not Found. Are you sure, that this must be the reason to resolve the issue? Have you had this case already?

      Best regards!

  • Apr 10 at 08:04 AM

    Hi Ola,

    Yes I also faced this issue and resolved it the same way by changing the target attribute.

    You can also debug the approuter and check what is the URL getting generated after the destination and target is resolved.

    cf set-env App_Router_App_Name XS_APP_LOG_LEVEL DEBUG

    cf restage App_Router_App_Name

    Replace the App_Router_App_Name with the appRouter application.

    Run the application again after executing the above 2 commands and check the logs of appRouter application.

    Regards,

    Puneet

    Add comment
    10|10000 characters needed characters exceeded