Technical Articles
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
This looks really interesting, thank you for sharing this!
Thank you Pierre Dominique! Please feel free to give us your feedback after using it!
Great Post!
When can we expect the update of the UI5 integration?
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:
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:
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.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:
Cheers!
Rafa
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!
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:
Cheers,
Rafa
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.
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.