Technical Articles

July 29, 2020 3 minute read

cf-create-app: Create End-to-End apps and deploy to Cloud Foundry in minutes

Hi developer!

We are in an exiting moment for SAP cloud development. Since SAP decided to offer Cloud Foundry environments, the company has release several tools and frameworks that clearly speed up development, and what I even like the most, it gives us flexibility to choose what we want to use and how we want to use it.

This is great, but it also makes the learning curve harder, as we have to learn many tools, the documentation is very spread, and the boilerplate to start a project gets complicated.

Today I want to introduce a tool to solve this issue, and get an end-to-end application up and running in the cloud with just a couple of commands and a few minutes: cf-create-app

This is a project my friends and colleagues @albertodelgado, @sergio-delgado, and myself have built, and now we are continuously improving. Read this article till the end, to know how you can contribute.

Index

Recent updates
What does this project do?
Requirements
How to use it
Contribute

Recent updates

Aug 2020 – Adding React.js, Angular and Vue.js as FrontEnd options

What does this project do?

With just one command it creates an MTA app in your local environment, with the following features:

A CAP application to design your services, your DB schema, and much more.
A preconfigured HTML5 application, choosing between React.js, Angular or Vue.js (These frameworks are not mandatory, and you can easily change the FrontEnd app for whatever technology you prefer. Preconfigured UI5 apps are coming in future releases of this project)
An Application Router configuration, to serve your backend and Frontend under the same domain.
The HTML5 Application Repository configuration + HTML5 deployer needed to host your HTML5 app in the cloud.
An instance of the authentication an authorisation service (XSUAA)
An MTA configuration to easily deploy your app to the cloud with one command (Node.js instance, HANA DB instance, HTML5 Application Repository, App Router Instance, XSUAA, etc.)

Basically, this gives you all you need to build a huge collection of apps just taking care of your business logic.

Prerequisites

Local prerequisites

Pre-requisite	Description	Documentation
Node.js v12	Required runtime for this boilerplate. Recommended install with NVM.	Download
cf cli	Cloud Foundy CLI tool	Download

Cloud prerequisites

To be able to deploy this application you need an SAP Cloud Platform account in the Cloud Foundry (CF) environment.

In your CF account space, the following services must be available:

HTML5 Application Repository | html5-apps-repo
SAP HANA Schemas & HDI Containers | hana
Authorization & Trust Management | xsuaa

How to use it

Just open a terminal in your workspace and run:

npx cf-create-app YOUR_APP_NAME

Choose the framework you want to use for your FrontEnd app, or just skip the UI installation if you don’t need it.

After several seconds installing all the dependencies needed, you end up with an application with the following structure

File / Folder	Purpose
app/	content for UI frontends go here
approuter/	Application Router configuration files
db/	your domain models and data go here
html5Deployer/	helper application to deploy HTML5 apps to the HTML5 Application Repository service in SAP Cloud Platform
srv/	your service models and code go here
package.json	project metadata and configuration
README.md	this getting started guide

You are ready now to add your business logic:

Add/modify entities to your DB schema on db/ folder
Add/modify services to your backend app in the srv/ folder
Add/modify your custom HTML5 application in the app/ folder
Modify the Application Router behaviour on approuter/xs-app.json

If you are ready to deploy your app to the cloud, you just have to run 2 commands:

Build your MTA deployable archive:

mbt build

Deploy your app:

cf deploy mta_archives/<yourMtaArchiveName.mtar>

And that’s it. When the process is finished you can see the application router endpoint in the console.

Open it in a browser, and you will see your application hosted in the SAP Cloud.

Navigate to <yourHost>/api to check your backend services.

Cool! Now that you see the magic, probably you want to know more. Please check our documentation in our repo to know about:

HOW TO: Run and develop your app in localhost —> Localhost Development
HOW TO: Create this boilerplate manually step-by-step —> Manual Configuration

Contribute

We use this all the time to build our POCs very quickly, but this project has just started, and we would love to have your feedback, help and wisdom to make it grow and serve multiple purposes.

Please feel free to contribute with code or comments in our repository: https://github.com/turutupa/cf-create-app

These are some of the next improvements in our pipeline:

Add UI5 app via setup script
Include test automation to the setup script
Add a basic CI/CD pipeline via setup script

8 Comments

You must be Logged on to comment or reply to a post.

Pierre Dominique

July 30, 2020 at 7:05 am

This looks really interesting, thank you for sharing this!

Rafael Lopez Martinez

Blog Post Author

July 30, 2020 at 4:08 pm

Thank you Pierre Dominique! Please feel free to give us your feedback after using it!

Lukas Metzger

September 29, 2020 at 8:05 am

Great Post!
When can we expect the update of the UI5 integration?

Rafael Lopez Martinez

Blog Post Author

November 27, 2020 at 12:30 pm

Hi Lukas Metzger, there are many ways of configuring a UI5 app, so it really depends on how you are building it. However it should be quite straight forward to modify the mta.yaml file accordingly.

In general, for any kind of HTML5 app you have to do only 2 things:

Execute the script to create your application Build.
Tell the HTML5 Deployer where is the Build folder.

For creating the application build, usually there is script in the package.json file, usually “npm run build” or similar.
In the mta.yaml file you can list the commands you want to run before deploying in this block:

build-parameters:
  before-all:
    - builder: custom
      commands:
        - npm install
        - npx @sap/cds-dk build
        - npm --prefix ./app install ./app
        - npm run build --prefix ./app                #This line runs the build script

The last line runs the build script for a standard React project in the /app folder. If your script is different, then just change that line accordingly.

After that, you should have a folder where your build is located (usually named “build” or “dist”). You should specify that directory in the mta.yaml file, so the HTML5 deployer knows where to get the code to deploy.

  # --------------------- FRONTEND APP MODULE ---------------------
  - name: your-app-name-html5-app
    # ------------------------------------------------------------
    type: html5
    path: app                              # root path for your html5 app
    build-parameters:
      supported-platforms: []
      build-result: build                  # Path to the build folder relative to the root path of your html5 app

So the example above says the HTML5 app is in the <path_where_the_mta.yaml_file_is_located>/app folder, and after executing the build script, the Build will be in <path_where_the_mta.yaml_file_is_located>/app/build.
Adapt this as per your configuration.

That should be enough for you to go and deploy the whole MTA app.

Some extra tips:

For generating UI5 apps, check out the Marius Obert easy-ui5 generator tool -> https://blogs.sap.com/2019/02/05/introducing-the-easy-ui5-generator/
For leveraging UI5 within React, Angular or Vue check out UI5 Web Components -> https://sap.github.io/ui5-webcomponents/

Cheers!
Rafa

Adam West

November 10, 2020 at 4:38 pm

Hi Rafael. Thanks for your effort. How to "open a terminal in [my] workspace"? I am using Windows. I am new to SAP and Cloud Foundry. I am working within the Web IDE. Is there a way to work in VSCode? What resources are available to get up to speed and productive with app dev in SAP & Cloud Foundry? I have knowledge of .NET Core (C#), JavaScript frameworks like Angular, and React. Thanks!

Rafael Lopez Martinez

Blog Post Author

November 27, 2020 at 12:31 pm

Hi Adam West,

As far as I know, opening a terminal in SAP Web IDE is not allowed. Web IDE provides many features for fast development, but not that one.

On the other hand you can do it with the new SAP Business Application Studio, which is an evolution of the SAP Web IDE. Check this link for more information: https://community.sap.com/topics/business-application-studio

Besides, you can use your dev environment in your local machine if you prefer. Let’s say VS Code for example. Then, you just need the CF CLI to connect and push your apps to Cloud Foundry. Check out the “Prerequisites” of this article for the CF CLI download link.

Regarding the learning resources, I recommend you to check the OpenSAP free courses. Especially:

The “SAP Cloud Platform Essentials” courses. There are several that has being updated.
The “Building Applications with SAP Cloud Application Programming Model” course.

Cheers,

Rafa

Matheus Leao

August 19, 2021 at 9:29 pm

Hi Rafael. This script seems to perform exactly what we need to kickstart a full-stack app development.

Unfortunately I'm having trouble using this script to create a new project using SAP Business Application Studio. After creating the project, running mbt build yields the following errors: Pastebin of the complete error message.

Alfonso Armenta

December 16, 2022 at 1:57 pm

I have a similar error message. You are using node v14 but sqlite3 versions prior to 5 don't seem to work on node v14 (the explanation is that sqlite3 versions prior to 5 require binary files that are node dependant and which don't exist for node v14).

You should use node v12 as required by the cf-create-app but sap/cds library requires node v14.

So it is a circular requirement that cannot be satisfied.

The tool requires node v12 but one of the dependencies pulled requires node v14.

Ideally someone would upgrade the cf-create-app tool! But it hasn't been updated for 2 years.

Technical Articles

cf-create-app: Create End-to-End apps and deploy to Cloud Foundry in minutes

Index

Recent updates

What does this project do?

Prerequisites

Local prerequisites

Cloud prerequisites

How to use it

Contribute

Assigned Tags