Giter Club home page Giter Club logo

sap-samples / ui5-deployments Goto Github PK

View Code? Open in Web Editor NEW
18.0 6.0 5.0 280 KB

Showcases a simple UI5 freestyle application and its deployment options to SAP BTP, Cloud Foundry Environment

Home Page: https://blogs.sap.com/2022/11/01/build-and-deploy-ui5-freestyle-applications-to-sap-btp-cloud-foundry-environment/

License: Apache License 2.0

JavaScript 66.54% CSS 1.43% HTML 32.03%
approuter cloudfoundry mta sample sample-code sap-btp sapui5 ui5 managed-approuter standalone-approuter

ui5-deployments's Introduction

Build & Deploy SAPUI5 Freestyle Applications to SAP BTP, Cloud Foundry Environment

REUSE status

Intro

This repo aims to showcase a simple UI5 freestyle application that can be deployed to SAP BTP, Cloud Foundry Environment with:

  • Managed approuter setup
  • Standalone approuter setup
  • Hybrid setup

A full explanation can be found in this SAP Community blog post.

Requirements

  • Access to a SAP BTP subaccount (trial is sufficient)
  • Cloud foundry environment provisioned
  • Launchpad, Workzone, or comparable subscription with managed approuter functionality
  • Quota for the HTML5 Application Repository Service
  • Developer-Access to a CF Space
  • SAP Business Application Studio Subscription or comparable local IDE like VSCode
  • CF CLI & Node available locally on your machine or in BAS dev space

Build Steps

Run the mbt build command with either of the mta.yaml files either directly or via the npm scripts in the root package.json:

  • mbt build -p=cf -s=./_build_standalone -t=../mta_archives
  • mbt build -p=cf -s=./_build_managed -t=../mta_archives

More info: https://sap.github.io/cloud-mta-build-tool/usage/

Standalone mta

  • This will generate an mtar that includes a standalone approuter that will be deployed together with the html5 module
  • This way you have full control of your approuter

Managed mta

  • This will generate an mtar which will leverage the managed approuter for running after deployment
  • This will only work if you have subscribed to a service that includes the managed approuter functionality (launchpad/portal/workzone)

Deploy Steps

Enable cf deploy and cf undeploy commands (see also multiapps-cli-plugin)

  • cf install-plugin multiapps

Login to your preferred BTP Cloud Foundry Space & deploy the MTAR archives

  • cf login
  • cf deploy ./mta_archives/ui5-standalone_1.0.0.mtar -f
  • cf deploy ./mta_archives/ui5-managed_1.0.0.mtar -f

In case of undeploy, you can undeploy the mta projects completely using:

  • cf undeploy ui5-standalone --delete-services --delete-service-keys
  • cf undeploy ui5-managed --delete-services --delete-service-keys

After Deployment

Verify service instances and application

Make sure that all service instances and the cf application for the standalone scenario have been deployed successfully

Verify html5 app content in html5 application repository

Make sure that the html5 module content has been uploaded successfully in the html5 app repo host service instance

  • cf html5-list & cf html5-info

More info: https://sap.github.io/cf-html5-apps-repo-cli-plugin/

Authorize

  • map the generated user role templates to a role collection and assign it to your endusers

Execute

run the app either via

  • the custom route of the approuter (standalone)
  • the html5 applications tab on the left (managed - requires a a managed approuter e.g. from launchpad service)

Further Topics

Testing the app within BAS

  • Navigate to the html5module folder and execute npm run start
  • The ui5.yaml is used to proxy the requests via pathmapping (substitutes the xs-app files)
  • (Needs to be maintained on same subaccount as BAS instance - see comments in ui5.yaml)

How to obtain support

Create an issue in this repository if you find a bug or have questions about the content.

For additional support, ask a question in SAP Community.

Contributing

If you wish to contribute code, offer fixes or improvements, please send a pull request. Due to legal reasons, contributors will be asked to accept a DCO when they create the first pull request to this project. This happens in an automated fashion during the submission process. SAP uses the standard DCO text of the Linux Foundation.

Code of Conduct

The SAP-samples CoC applies.

License

Copyright (c) 2022 SAP SE or an SAP affiliate company. All rights reserved. This project is licensed under the Apache Software License, version 2.0 except as noted otherwise in the LICENSE file.

ui5-deployments's People

Contributors

ajinkyapatil8190 avatar btbernard avatar ospo-bot[bot] avatar thisisrobin avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

ui5-deployments's Issues

App not being looked up under "Group" on Launchpad Service

Hi Robin,

Quick question, have you tried configuring app post CF deploy on to the Launchpad Service?

When I do, I could see the app under "Content manager" of Launchpad Service, however when I try to add app into a Group it doesn't show up in results.

Regards,
Kevin Dass

module: could not execute the "npm install" command: exit status 1

When we run npm run build-managed being on folder ui5-deployments or _build_managed tend to get into issue

ERROR could not build the "ui5app" module: could not execute the "npm install" command: exit status 1
make: *** [Makefile_20221114153333.mta:37: ui5app] Error 1
Error: could not build the MTA project: could not execute the "make -f Makefile_20221114153333.mta p=cf mtar= strict=true mode= t="../mta_archives"" command: exit status 2

Same is the case ui5-standalone-approuter

ERROR could not build the "ui5-standalone-approuter" module: could not execute the "npm install --production" command: exit status 1
make: *** [Makefile_20221114162946.mta:37: ui5-standalone-approuter] Error 1
Error: could not build the MTA project: could not execute the "make -f Makefile_20221114162946.mta p=cf mtar= strict=true mode= t="../mta_archives"" command: exit status 2

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.