Technical Articles
End-To-End setup of local development environment with UI5 Tooling – Part 5 Deployment
Hello again.
Alright so final step would be to deploy our applications. If you just coming to this blog, please have a look at the other blogs in this series:
- End-To-End setup of local development environment with UI5 Tooling
- End-To-End setup of local development environment with UI5 Tooling – Part 2
- End-To-End setup of local development environment with UI5 Tooling – Part 3 VS Code
- End-To-End setup of local development environment with UI5 Tooling – Part 4 Component reuse
Now we have used the grunt nwabap-ui5uploader in our pipelines for a good amount of time now. However since we moved to the UI5-tooling continuing to use grunt has been a bit of a thorn in my eye and I don’t want to install grunt locally to be able to run this.
[Update] Florian Pfeffer recently wrote a blog on how to add deployment into the tooling. Have a look here
Luckily a fellow community member Nick Rappoldt (I couldn’t find his tag on here, if anyone knows it, please let me know in the comments so I can pass on the credits) has already created a npm package that we can use for this.
npm install nwabap-ui5uploader -g
Notice that I’m using the parameter -g here as this is now a global npm module, so we don’t have to install it locally in every project.
The setup is surprisingly easy. I created a .nwabaprc file with the following content
{
"base": "./dist",
"conn_server": "http://myserver:8000",
"conn_user": "username",
"conn_password": "password",
"abap_package": "$TMP",
"abap_bsp": "ZZ_UI5_LOCAL",
"abap_bsp_text": "UI5 upload local objects"
}
Now if we run command
npm nwabap upload
It reads the content of this file and uploads to the repository that you specified. There are a few more handy optional parameters
- calcappindex – Reset the cachebuster
- conn_usestrictssl -SSL mode handling. In case of self signed certificates the useStrictSSL mode option can be set to false to allow an upload of files.
- conn_client – System client
- abap_language – ABAP Language
- abap_transport – ABAP transport no.
Also remember to add the .nwabaprc to the .gitignore files as you don’t want your password to be uploaded. The same should be done with the node_modules
Now this is really cool if you are the only developer working on an app, if you are multiple developers working on the same applications, then use a central git repository and set up a pipeline to do your deployments.
Find some inspirations on how to do that in Wouter Lemaire blog: CI / CD for SAPUI5 on ABAP with GitLab
Now if you want to speed things up a bit further, add in another script in the package.json file under the scripts.
npm run deploy
Hello Jacob,
Thanks very much for your delicious tutorials. Now I am able to write UI5 on vscode and not having to reload the page manually or deploy whatever I changed to the dev server is not a pain anymore! It feels like wysiwyg, awesome.
Just a little addition: Florian Pfeffer‘s blog post link is somewhat wrong i think, i found it at here. You may want to change the link to it.
Br,
İlker