I have a question related to karma and ui5.
Current situation is as follows:
I use karma-openui5 and load ui5 via bower. Karma-openui5 simply adds some bootstrap information and the core-file itself:
files.unshift({pattern: ui5path, included: true, watched: false, served: true});
which leads to this head entry:
<script type="text/javascript" src="/base/bower_components/openui5-sap.ui.core/resources/sap-ui-core.js" crossorigin="anonymous"></script>
Ui5 is designed to load everything else related to the core-file but is served by sap in different bower packages this means, request is:
http://localhost:9876/base/bower_components/openui5-sap.ui.core/resources/sap/m/library-preload.js
but it's actually located under
http://localhost:9876/base/bower_components/openui5-sap.m/resources/sap/m/library-preload.js
I could overcome this problem with proxy entries. But i can`t include the .css files which one are in a separate bower package. I can't see a way to proxy only */**/.css requests to another directory. Therefore this way just doesn't work well.
Openui5 has already some middleware (connect-openui5) to resolve this problems and server everything as expected under localhost:XXXX/resources/.
How and can i add custom script tags in karma? like:
<script type="text/javascript" src="resources/sap-ui-core.js"></script>
How can i add a middleware (connect-openui5) to handle all requests to /resources/**/*?
The solution was to use the connect middleware from sap, started with grunt and proxy to this.
I packed everything in a yeoman generator, if anyone is interested in the setup.
https://www.npmjs.com/package/generator-ui5
Related
I am following the article describing setting up module federation: https://nx.dev/l/a/guides/setup-mfe-with-angular
Starting with generating the workspace, adding the angular plugin, and adding the dashboard application.
When serving the dashboard application I get an error from styles.js:
Uncaught SyntaxError: Cannot use 'import.meta' outside a module
It is being loaded as:
<script src="styles.js" defer></script>
Doing some quick searches seems to indicate that this thing should have type="module" on it.
However there doesn't seem to be any kind of configuration I can find to modify the line being added to the index.html.
I have checked the regular template generated by angular, it uses the defer style to everything, so the other js file entries are being changed to type="module" some place. The normal styles.js also does not contain any "import.meta" string.
Any solution would be helpful.
TL;DR: thats fine. You should not see this error in the production
There is a note on the https://nx.dev/guides/setup-mfe-with-angular you mentioned saying:
NOTE: When serving MFEs in dev mode locally, there'll be an error output to the console, import.meta cannot be used outside of a module, and the script that is coming from is styles.js. It's a known error output, but it doesn't actually cause any breakages from as far as our testing has shown. It's because the Angular compiler attaches the styles.js file to the index.html in a tag with defer.
It needs to be attached with type=module, but doing so breaks HMR. There is no way of hooking into that process for us to patch it ourselves.
The good news is that the error doesn't propagate to production, because styles are compiled to a CSS file, so there's no erroneous JS to log an error. It's worth reiterating that there's been no actual errors or breakages noted from our tests.
Check the scriptType
This issue has to do with how the imports are set up in the compiled app. You can update the scriptType in your webpack.config.js by adding the scriptType:
module.exports = {
output: {
uniqueName: "YourUniqueAppName",
publicPath: "auto",
scriptType: "text/javascript"
},
How to configure babel in non-nodejs Environment/without npm ?
Use babel-standalone. Its documentation emphasize non-Node.js environments just like you do:
babel-standalone is a standalone build of Babel for use in non-Node.js environments, including browsers.
To confogure it, you can use data-presets and data-plugins attributes as also depicted in the Github page usage docs as follows:
<script type="text/babel" data-presets="es2015,stage-2">
I have a landing page (some.html) pointing to bundle.js . Under the chrome debugger I do see all my files getting loaded properly but still I get errors in the code like 'this' is undefined etc .
Please note :
I don't have node / npm / webpack installed
I am not running webpack-dev-server running on this server
What is the proper way to deploy / refer a bundle.js file ?
Do I need to install webpack globally on this server ?
I need to know is it possible to just get the functionality of my SPA through a bundle.js being pointed from index.html provided that bundle.js was generated using a webpack on my dev-machine ?
Seems like yes through an index.html we can point to a bundled js if all the functionality is client side and we can get the desired functionality. My reactApp was broken because it the underlying the page (old application) was supporting prototype.js and therefore react's internal functions had issues. Once I removed reference to prototype - my application is working in that old container –
I am trying to install SAPUI5 on my local machine using XAMPP.
I copied the files to htdocs.
Starting localhost in Chrome I get the SAPUI5 SDK - Demo Kit Overview page.
After that I copied a sample code of the "HowTo in 20 seconds" code to notepad and saved it as HTML-Document.
Running this file in the browser only brings a white page.
I looked for the developer tools in Chrome and saw something like this:
"failed to preload 'sap.ui.core.library-preload': Not Found - sap.ui.ModuleSystem"
I hope you can help me fix this problem, so I can start with SAPUI5
Useful links regarding this topic, which I could recommend:
Describes how to run UI5 App locally: http://scn.sap.com/community/developer-center/front-end/blog/2014/01/13/ui5-mobile-splitapp-boilerplate
Describes to local Development with Eclipse: http://blog.mypro.de/2014/01/14/ui5-boilerplate-with-eclipse/
They both use the UI5 SplitApp Boilerplate from Github, which is an example app, with a base application structure: https://github.com/6of5/UI5SplitApp-Boilerplate
Perhaps this helps you to start local developement
Open a new notepad file. Save below code with html extension, eg: helloworld.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>SAPUI5 in 20 Seconds</title>
<!- 1.) Load SAPUI5, select theme and control library ->
<script id="sap-ui-bootstrap"
type="text/javascript"
src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_goldreflection"
data-sap-ui-libs="sap.ui.commons"></script>
<!- 2.) Create a UI5 button and place it onto the page ->
<script>
// create the button instance
var myButton = new sap.ui.commons.Button("btn");
// set properties, e.g. the text
myButton.setText("Hello World!");
// attach an action to the button's "press" event (use jQuery to fade out the button)
myButton.attachPress(function() { $("#btn").fadeOut(); });
// place the button into the HTML element defined below
myButton.placeAt("uiArea");
// an alternative, more jQuery-like notation for the same is:
/*
$(document).ready(function() {
$("#uiArea").sapui("Button", "btn", {
text:"Hello World!",
press: function(){ $("#btn").fadeOut(); }
});
});
*/
</script>
</head>
<body class="sapUiBody">
<!- This is where you place the UI5 button ->
<div id="uiArea"></div>
</body>
</html>
Now open the file with any modern browser. FYI, We don't need any server to test this
You can configure Eclipse to work with SAPUI5 and use Apache Tomcat to run your application when working in a local environment.
Install Eclipse - http://www.eclipse.org/downloads/packages/eclipse-ide-java-ee-developers/lunasr2
Install the Java Runtime Enviromnet - http://www.oracle.com/technetwork/java/javase/downloads/jre7-downloads-1880261.html
Install Apache Tomcat - http://tomcat.apache.org/download-80.cgi
Install SAPUI5 tools in Eclipse
Eclipse > Help > Install New Software
Add a new site in the "Available Software Sites" with the url:https://tools.hana.ondemand.com/luna
Select the new site in the Work with selection.
Expand the UI Development Toolkit for HTML5 & Select UI Development Toolkit for HTML5 (Developer Edition)
Next & Install (An Eclipse restart may be required)
Now that you have the SAPUI5 Tools installed. If you create a new Project, you now get a SAPUI5 Application Development option available.
Configure Apache Tomcat in the Servers
Add a Server, Window > Preferences > Server > Runtime Environment > Add
Select Apache Tomcat 8.0( or whichever version you are using) & select Next.
Select Tomcat installation directory & Finish.
Now you are all set to go. Create a new SAPUI5 Project(say myProject), add some code. To run it on tomcat, right-click on the Project, Run As > Run On Server. Select your Tomcat server, Next & Finish. You project will be up & running on your server at http://localhost:8080/myProject/
The "failed to preload" messges should not be fatal errors; the library preload files are an optional bundled optimization in order to reduce the number of HTTP requests.
https://github.com/SAP/openui5/issues/119
I think you can just ignore this warning. And I encounter Cross origin requests problem when loading Component.js, solved this problem using python -m SimpleHTTPServer. What you need is just a server , choose whatever you like.
Daniel I recommend you SAPUI Walkthrough as a starting point. This is a step by step guide / tutorial on how to build SAPUI5 applications, contains explanation about the cornerstones and best practices. For the basics you will only need an editor and a browser (no webserver). This git repo contains all the Walkthrough steps as separate branches.
SAP UI5 is only bunch of UI libraries that are used to develop your front end, just like other libraries like jQuery. Now, the question is how do you configure your Apache to serve these files? This is a basic Apache configuration to serve files, this page might be a good starting point.
I'm rewriting my question to be more detailed and more clear.
i have a project like this:
com.mycompany.modulue1
------------------------------------>client
------------------------------------>server
------------------------------------>shared
------------------------------------>module1.gwt.xml
com.mycompany.modulue1
------------------------------------>client (JSNI - create a method to access methods in module2)
------------------------------------>server
------------------------------------>shared
------------------------------------>module2.gwt.xml (using add-linker name="xsiframe")
in module1.html i added the following script:
"script type="text/javascript" language="javascript" src="module2/Module2.nocache.js"
"script type="text/javascript" language="javascript" src="module1/Module1.nocache.js"
now i get "module2" need to be recompiled every time (even if the env. is clean and recently built
the JS method that is defined in module 2 is not defined when the server is up.
i'm using external server in dev mode (for EJB use)
What I'm doing wrong?
Thank you
Ahmad Igbaria
Not sure I fully understand your problem but judging by the title:
If you have a page that loads 2 distinct GWT applications, you can run only one of them in DevMode by subtituting gwt.codesvr in your URL with gwt.codesvr.moduleName, where moduleName is the name of the module to run in DevMode. That way, the other module won't switch to DevMode and will thus run in production mode.
This however only works with the xsiframe linker (for the one module you want to run in Dev Mode at least)
After so much time and headaches, I have found the solution it's very simple, you need to add the linker to both modules not only the one you want to use as a pre-compiled!