Since I was not satisfied with the experience of developing UI5 apps in Eclipse, I was looking for an alternative. So I figured out a way to use text editors like Sublime Text, Github Atom, Microsoft Code and others for UI5 development, that I still use to date.
What you need
- A text editor
- A web server like nginx, Apache or Microsoft IIS
What you also need if you want to use OData services
- A forwarding proxy that redirects your OData requests
What to do
Check out your code and put it into a directory on your web server that you have access to. Open this directory in your text editor. Edit the index.html file of your app to distinguish between development and production use and load the SAPUI5 runtime from the official CDN. Here is an example containing the code I use myself:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8" />
<title>Some title</title>
<link rel="stylesheet" href="css/general.css">
<script>
var script = document.createElement("script");
script.type = "text/javascript";
script.setAttribute("id", "sap-ui-bootstrap");
script.setAttribute("data-sap-ui-theme", "sap_bluecrystal");
script.setAttribute("data-sap-ui-libs", "sap.m, sap.ui.layout");
script.setAttribute("data-sap-ui-xx-bindingSyntax", "complex");
script.setAttribute("data-sap-ui-preload", "async");
script.setAttribute("data-sap-ui-resourceroots", '{ "example.namespace": "./" }');
if (window.location.hostname.indexOf("HOSTNAME.OF.YOUR.WEB.SERVER") > -1) {
script.src = "https://sapui5.hana.ondemand.com/1.32.9/resources/sap-ui-core.js";
} else {
script.src = "resources/sap-ui-core.js";
}
script.onload = function () {
sap.ui.getCore().attachInit(function () {
new sap.m.Shell({
app: new sap.ui.core.ComponentContainer({
name : "example.namespace"
})
}).placeAt("content");
});
}
document.getElementsByTagName("head")[0].appendChild(script);
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
To make OData service requests work with this setup, you have to make this distiction for the registration of your service URL as well. You can put something like this in your Component.js:
var config = example.namespace.Component.getMetadata().getConfig();
if (window.location.hostname === "localhost") {
url = "proxy/http/YOUR.ODATA.HOST:PORT" + config.serviceConfigDev[key];
} else if (window.location.hostname.indexOf("HOSTNAME.OF.YOUR.WEB.SERVER") > -1) {
url = "http://" + window.location.hostname + "/YOUR/PROXY/PATH" + config.serviceConfigDev[key];
} else {
url = config.serviceConfigProd[key];
}
var dataModel = new sap.ui.model.odata.ODataModel(url, true);
For this to work, you have to use a forwarding proxy that redirects OData requests to the correct host system. The proxy URL must have the same host name as the web server and just use a different URL path. This is needed to bypass the same origin policy that the response of OData services would otherwise run into.
I have tried using a CORS header for this, but was unable to make it work. If you can make the OData service send an appropriate header with every response, then that should do the trick as well.
Since we use Microsoft IIS, I was able to implement a forwarding proxy using just a simple URL rewrite rule in our web.config file:
<rewrite>
<rules>
<rule name="Forward Proxy" patternSyntax="Wildcard">
<match url="odata-proxy/*" />
<conditions>
</conditions>
<action type="Rewrite" url="http://YOUR.ODATA.HOST:PORT/{R:1}" />
</rule>
</rules>
</rewrite>
Version control and deployment
We currently use Git for version control outside of SAP and keep our development efforts in sync that way. To deploy changes to the front-end SAP system you will still have to use Eclipse or one of the following SAP reports:
/UI5/UI5_REPOSITORY_LOAD
/UI5/UI5_REPOSITORY_LOAD_HTTP
/UI5/UI5_REPOSITORY_LOAD_HTTPN
Please share your views
This is my way to do it and it has been working fine for me. However I would love to see a discussion evolve about how this could be improved and made simpler, so that more people can readily use it.
