Deploy a custom UI5 library in SAP BAS - sapui5

I need to build some custom Fiori libraries with SAPUI5.
On the internet, I found many tutorials about how to build such libraries but no tutorial shows how I can deploy it. The only tutorials I found about the deployment are using the old Web IDE but we're using the SAP BAS (SAP Business Application Studio) which doesn't have those functions.
So then I learned about how SAP handles the custom libraries and tried to deploy it like a normal Fiori app by creating a ui5-deploy.yaml:
specVersion: '2.5'
metadata:
name: 'zcalibtest'
type: library
builder:
resources:
excludes:
- /test/**
- /localService/**
customTasks:
- name: deploy-to-abap
afterTask: generateCachebusterInfo
configuration:
target:
destination: {DESTINATION}
url: {URL}
credentials:
username: env:DEPLOY_USERNAME
password: env:DEPLOY_PASSWORD
app:
name: Z_CA_LIB_TEST
package: ZCA_TEST
transport: {TRANSPORT}
... and running the following NPM "deploy" script:
npm run build && fiori deploy -y --config ui5-deploy.yaml && rimraf archive.zip
But that gives me the following error:
sh: 1: fiori: not found
So I think that's not the way to go. But how can I do this? I couldn't be the only person on the planet that is using SAP BAS and tries to deploy a custom library.
Edit:
My package.json file:
{
"name": "zcalibtest",
"version": "1.0.0",
"private": true,
"devDependencies": {
"#ui5/cli": "^2.9.3",
"#sap/ux-ui5-tooling": "^1.5.5",
"karma": "^6.1.1",
"karma-chrome-launcher": "^3.1.0",
"karma-cli": "^2.0.0",
"karma-ui5": "^2.3.3",
"ui5-middleware-livereload": "^0.5.1"
},
"ui5": {
"dependencies": [
"ui5-middleware-livereload"
]
},
"scripts": {
"build": "ui5 build --clean-dest",
"deploy": "npm run build && fiori deploy -y --config ui5-deploy.yaml && rimraf archive.zip",
"start": "ui5 serve --open test-resources/path/to/lib/zcalibtest/Example.html",
"testsuite": "ui5 serve --open test-resources/path/to/lib/zcalibtest/qunit/testsuite.qunit.html",
"test": "karma start --browsers=ChromeHeadless --singleRun=true"
},
"license": "UNLICENSED"
}

For the deploy part: you need to add the package "#sap/ux-ui5-tooling" (both in your devDependencies and in your ui5 dependencies) and rimraf (only in your devDependencies).
For the build part: build steps for libraries are slightly different so yours should be similar to these (maybe you don't need all the steps..). For the building part you need to add only bestzip to your devDependencies I guess
"scripts": {
"build": "npm run clean && ui5 build --include-task=generateManifestBundle generateCachebusterInfo && npm run flatten && npm run clean-after-flatten && npm run zip",
"zip": "cd dist && npx bestzip ../ExampleLibrary-content.zip *",
"flatten": "cp -r dist/resources/name/space/examplelibrary/* dist && cp dist/resources/name/space/examplelibrary/.library dist ",
"clean": "npx rimraf ExampleLibrary-content.zip dist",
"clean-after-flatten": "rm -rf dist/resources dist/test-resources"
}
You can find more info about building libraries in this blog post from the SAP Community.

Related

How to deploy a budo/browserify project's build to GitHub Pages?

I want to deploy a clone of this Virtual Art Gallery project to GitHub Pages.
However, I'm only able to deploy the base html site rather than the build site which shows a 404 page on GitHub.
Steps I've taken:
Created a GitHub Pages site at USER.github.io and added the code below to the package.json:
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
In another run I created a new repo USER.github.io/REPO and added the code below to package.json:
"homepage": "https://USER.github.io/REPO",
...
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
I've installed gh-pages and ran npm start, npm run build, npm run deploy.
In some attemps, deploy returned Error: ENOENT: no such file or directory, stat 'directory/BUILD' but I fixed this by running npm start first.

How to deploy npm project to gh-pages

I'm trying to deploy a website to gh-pages using npm. I'm using blain HTML and CSS and asynchronous javascript. I haven't used any SPA framework (react or angular).
I'm currently using lite server for development purposes and gh-pages package.
I'm trying to deploy the src folder using the following command
npm run deploy
it fails because the build script is not specified.
my question is what should I write in the build script?
when I try to run npm run deploy it displays the following error
'src' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! AmrAhmed#1.0.0 build: `src`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the AmrAhmed#1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Amr\AppData\Roaming\npm-cache\_logs\2020-05-30T11_30_29_824Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! AmrAhmed#1.0.0 predeploy: `npm run build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the AmrAhmed#1.0.0 predeploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Amr\AppData\Roaming\npm-cache\_logs\2020-05-30T11_30_29_869Z-debug.log
in similar projects using react, the build script has the following react-scripts build
this is my package.json file
{
"name": "AmrAhmed",
"version": "1.0.0",
"description": "",
"main": "truffle.js",
"directories": {
"test": "test"
},
"scripts": {
"dev": "lite-server",
"test": "echo \"Error: no test specified\" && exit 1",
"build": "src",
"predeploy": "npm run build",
"deploy": "gh-pages -d src"
},
"author": "",
"license": "ISC",
"devDependencies": {
"gh-pages": "^3.0.0",
"lite-server": "^2.5.4"
}
}
election folder content
src folder content
I found out that you don't need the build script or the pre-deploy script. they are unnecessary to be used, since my website is static, I can navigate directly to the build folder and it will work fine.
I have modified the config.json file to be as in the following
{
"name": "AmrAhmed",
"version": "1.0.0",
"description": "",
"main": "truffle.js",
"directories": {
"test": "test"
},
"scripts": {
"dev": "lite-server",
"test": "echo \"Error: no test specified\" && exit 1",
"deploy": "gh-pages -d src"
},
"author": "",
"license": "ISC",
"devDependencies": {
"gh-pages": "^3.0.0",
"lite-server": "^2.5.4"
}
}
run the command
npm run build
and it will be deployed to Github pages.
you should also add "homepage":"https://yourGithub.github.io/your-repo" above "name" in the package.json

How to fork and npm install in my project

I have a package
I would like to fork it, edit some stuff in order to make it fit into my project, but keep the ability to update from the original master.
I forked the project, and now I am stuck because when I npm install it, I have "unknown module angular-cesium"
the package.json scripts is has follow :
"scripts": {
"ng": "ng",
"demo:start": "ng serve",
"demo:build": "ng build --prod",
"demo:server": "nodemon --exec ts-node --project demo-server/tsconfig.json -- demo-server/src/main.ts",
"lib:build": "ng build angular-cesium; npm run copy:extra-files",
"lib:start": "ng build angular-cesium --watch",
"lib:publish": "npm run lib:build; cd dist/angular-cesium; npm publish; cd ...; npm run docs:push",
"test": "ng test angular-cesium",
"test:ci": "ng test angular-cesium --no-watch --browsers=ChromeHeadless",
"lint": "ng lint angular-cesium",
"e2e": "ng e2e",
"gh-pages": "gh-pages -d docs -b gh-pages",
"copy:extra-files": "cp README.md LICENSE.txt dist/angular-cesium",
"docs:run": "compodoc -p projects/angular-cesium/src/lib/tsconfig.compodoc.json --theme stripe -d docs -n \"Angular Cesium\" --watch --serve",
"docs:compile": "rimraf docs && compodoc -p projects/angular-cesium/src/lib/tsconfig.compodoc.json --theme stripe -d docs -n \"Angular Cesium\"",
"docs:push": "npm run docs:compile && npm run gh-pages && rimraf docs",
"heroku-postbuild": "npm run lib:build; npm run demo:build"
},
I tried to add "prepare:npm run lib:build"
I have the follow error :
Project 'angular-cesium;' does not support the 'build' target.
if I just try a npm publish I get the following
npm ERR! Error: EPERM: operation not permitted, unlink 'C:\Users\Popolee\AppData\Local\Temp\npm-33912-632e340c\tmp\fromDir-ffb525d2\package.tgz'
My question is, how can I fork this library, and make a npm installable custom version that I can edit and install in my project when i want

Yarn upgrade-interactive always to `exotic`

I'm playing around with a centralized build setup which is hosted on github: https://github.com/skybrud/sky-build-setup/tree/master
In the npm module this repo is used, I have the following package.json:
{
"name": "sky-crop",
"version": "1.0.5",
"description": "Vue component for cropping images",
"main": "dist/skycrop.js",
"scripts": {
"vanilla": "rimraf ./node_modules && yarn run dist",
"build": "rimraf ./dist && webpack --config ./webpack.config.js",
"dist": "yarn install && yarn run build"
},
"build": "module",
"author": "Skybrud.dk",
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/skybrud/sky-crop.git"
},
"dependencies": {
"sky-window": "^1.0.4"
},
"devDependencies": {
"sky-build-setup": "https://github.com/skybrud/sky-build-setup.git#semver:^1.0.0"
}
}
Here's my issue. When running yarn upgrade-interactive I always get the following:
For some reason the to part always refers to exotic in stead of being up to date.
Can someone point me in the right direction about what is going on?
And what does exotic exactly mean? I haven't been able to locate the description anywhere.
Yarn can't manage dependencies versions for dependencies not belonging to the npm packages repository.
In your case, the devDependency sky-build-setup is resolved using a github url, where yarn doesn't have a way of knowing if there is a new version of the dependency nor how to update it. The dependencies not belonging to npm (i.e. the ones resolved via urls or file:) are marked as exotic in the interactive-upgrade process.
On the other hand, the dependency sky-window comes from npm and yarn can assess if you are using the latest version and eventually update it for you.

An error occurred while running cordova plugin add de.appplant.cordova.plugin.local-notification

While attempting to install the cordova plugins for local-notification for an Ionic Framework cross platform app I received the following:
Installing "de.appplant.cordova.plugin.local-notification" for android
Plugin dependency "cordova-plugin-device#1.1.4" already fetched, using
that version. Dependent plugin "cordova-plugin-device" already installed on android.
Failed to install 'de.appplant.cordova.plugin.local-notification': Error
at
/usr/local/lib/node_modules/cordova/node_modules/cordova-lib/src/plugman/fetch.js:205:33
I've already tried the solution at https://github.com/katzer/cordova-plugin-local-notifications to no avail. All I'm trying to do is load the plugins as described on Ionic's site: https://ionicframework.com/docs/native/local-notifications/ and I they won't install the plugins.
$ ionic cordova plugin add de.appplant.cordova.plugin.local-notification
$ npm install --save #ionic-native/local-notifications
It is quite possible that you have Yarn installed, and that it is clashing with your version of NPM. Try removing Yarn, and your node_modules and re-installing.
For example, if you are using Brew, you could do the following:
# Uninstall Yarn
brew uninstall yarn
brew update
brew doctor
# Uprade Node & NPM
brew upgrade node
npm install -g npm#latest
Then in your project directory:
cd my-cordova-project
rm -rf node_modules
Check your package.json for broken links, for example: package dependancies with no version number that linger from installs that did not complete.
{
"name": "helloworld",
"displayName": "HelloCordova",
"version": "1.0.0",
"description": "A sample Apache Cordova application that responds to the deviceready event.",
"main": "index.js",
"dependencies": {
"cordova-android": "^6.2.3",
// FAILED INSTALL MIGHT CREATE EMPTY VERSION!
"cordova-plugin-app-version": ""
},
"cordova": {
"plugins": {
"de.appplant.cordova.plugin.local-notification": {},
"cordova-plugin-app-version": {}
}
}
}
Now install everything again with npm:
npm install
Here is my version info in case that helps you debug:
node --version
v8.1.4
npm --version
5.3.0
cordova --version
7.0.1