Full Stack TypeScript App for Cloud Foundry – Sample Repository
This blog post introduces a new sample repository for a full stack TypeScript App built with the SAP Cloud Application Programming Model for Node.js (CAP) and SAPUI5. It covers a project intended for deployment on the SAP BTP Cloud Foundry environment that uses TypeScript. Find out how such a project is structured, run, built, and deployed!
Let’s look into some of the details. I’ll outline the project structure and focus on the expanded build process required when using TypeScript.
You can view the entire source code of the sample application on GitHub:
Sample App Overview
The diagram above showcases the different parts the Multitarget Application (MTA) consists of. In addition to the full stack app itself, some SAP BTP services are used, SAP Hana Cloud as database and a simple standalone approuter. All of this lives in the Cloud Foundry environment. A quick summary of what each part does:
- SAPUI5 App: a freestyle UI5 app serves as the frontend
- CAP Node.js App: a backend OData V4 service to provide and manage data
- SAP Hana Cloud: database to store data
- User Account and Authentication service (UAA): OAuth 2.0 server to authenticate and grant access via user roles
- SAP Destination service: provides destinations of services like the CAP Node.js app for the Application Router
- SAP HTML5 Application Repository service: contains the SAPUI5 frontend app
- Application Router: single entry point for the application
The project evolves around a simple lecture schedule scenario. Upon that, the data model consists of Courses, Professors, Rooms, and Lectures. Every lecture has a defined start and end time and is held in one of the rooms. An association to a specific course as well as the lecturing professor is possible. This data is now provided through an OData V4 service built with CAP for Node.js. A dedicated service handler implements a custom action, provides validation when creating a new entry, and adds a non-persistent virtual property. Access to the service is restricted via two different user roles: viewer and admin. Only users with the admin role can change the data. All viewers can read the entries.
The data for the lecture schedule is displayed with a freestyle SAPUI5 app. Here two different planning calendars are used to display the lectures over time. Filtering for a professor is possible. Creating, modifying, and deleting entries are shown as options for users with the admin role. This can be checked due to expanding the standalone approuter with an additional route to provide information about the user currently accessing the app.
Development closer look – Build Process
CAP Node.js Service using TypeScript
For the limited scope of this sample application, the interfaces to make the CDS model available in TypeScript are manually created. There are community tools to generate types based on CDS definitions to facilitate the process. You can look at this blog post to find out more: Taking CAP to the next level – with TypeScript
Things get more challenging when it comes to the familiar watch, run and build commands. The sample project includes several scripts for TypeScript adjusted commands:
"start-service:ts": "cds-ts run --with-mocks --in-memory", "watch-service:ts": "cds-ts watch --open", "build:cf": "npm run build:cds && npm run cleanup:ts && npm run build:ts", "build:ts": "tsc", "build:cds": "cds build --production", "cleanup:ts": "npx rimraf gen/srv/srv/**/*.ts", ...
SAPUI5 Freestyle App using TypeScript
For UI5 development with TypeScript, a variety of valuable resources is already available and gradually expanded:
- Central entry point for everything TypeScript-related in SAPUI5/OpenUI5
- Getting Started with TypeScript for UI5 Application Development
- UI5 TypeScript HelloWorld
- Step-by-step guide to Create a UI5 TypeScript App From Scratch
- Using TypeScript in UI5 Apps
- debug a CAP app with UI5 TypeScript UI component with VS Code
- Yeoman Easy UI5 Generator – TS App
Generating a new project with the help of the Yeoman Easy UI5 Generator, using the ui5-typescript-helloworld app as a template, or following the step-by-step guide are all great ways to achieve a setup and structure similar to the new Full Stack TypeScript App sample project.
The sample app includes several scripts to watch, run and build the SAPUI5 app taking care of TypeScript handling.
"build:cf": "npm run build:ts && npm run build:ui5:cf", "build:ui5:cf": "ui5 build preload --clean-dest --config ui5-deploy.yaml --include-task=generateManifestBundle generateCachebusterInfo", "build": "npm-run-all build:ts build:ui5", "build:ts": "babel src --out-dir webapp --source-maps inline --extensions \".ts,.js\" --copy-files", "build:ui5": "ui5 build --clean-dest", "start": "npm-run-all --parallel watch:ts start:ui5", "watch:ts": "babel src --out-dir webapp --source-maps inline --extensions \".ts,.js\" --copy-files --watch", "start:ui5": "ui5 serve --port 8080 -o index.html", ...
Take a look at the sample repository for the Full Stack TypeScript App on GitHub and try out TypeScript for Cloud development yourself!
- Clone the project from GitHub:
git clone https://github.com/SAP-samples/btp-full-stack-typescript-app.git cd btp-full-stack-typescript-app
- Install the dependencies:
- Run the app locally:
npm run start-service:ts
very interesting blog.
Regarding CAP & TypeScript I can recommend my blog. This one also describes how to use cds2types. So you don't have to write the interfaces for the entities yourself, they can be compiled from the CDS definitions.
Thanks for commenting and pointing to your blog post again. A link to it is also included in the CAP TypeScript section of this post, where I talk about interfaces.
very nice sum up and i saw you also added content to the FullStack TS Repo.
Just one idea concerning AppRouter.
I personally follow the CAP guide concerning TS recommendations -> for productive usage always precompile TS.
You are using ts-node and typescript as dependency while CAP just uses it as a devDependency.
I personally would always precompile code before deploying and trying to use as less as possible dependencies inside the productive package. In the past, there has been a lot of scenarios where you even had to decide including node_modules into mta package or not for multiple issue reasons like sqlite throwing build error.
The comfort of using ts-node and CAP cds-ts watch is greate during development, but i would be to afraid, introducing additional runtime layers like ts-node that posibly produce errors while deploying and staging BTP services.
Even for costs reason (1 GB BTP runtime = ~70,- Euro/month), i always try to strip down services as much as possible (memory and disk quota).
But that is only my opinion. Maybe today or in the future, ts-node will be the new standard or node will support it out-of-the-box 😉
Looking forward for next posts of you!
I fully agree.
You're right with the costs for the BTP CF runtime. But it's good that the disk quota doesn't count there.
I am with you on that take - precompiling is the way to go for TS. The sample repo has been updated with some adjustments to the AppRouter to reflect that earlier this week.
Hi Gregor Wolf
I have cloned the repo: SAP-samples / btp-full-stack-typescript-app to check how I can enable my CAP service with Typescript.
When I try to run the service, it is starting successfully but I am getting the following error, when I open the preview app of any entity: Lectures/Rooms/Courses/Professor.
"App could not be opened because the SAP UI5 component of the application could not be loaded.
Any I idea how to resolve this?
Thanks in advance.