Running UI5 on Node JS server - node.js

I'm trying to run my ui5 pages on Node.js server. What I've done till now is created a UI5 project with a simple index.html file calling my other ui5 views showing a text message. When I run it without node js it runs fine and shows me the message.
What I'm trying to achieve now is run this on top of my node server. So I've configured a server.js file for my node and it starts up fine. In there I'm calling up my above index.html file. it calls it fine but it gives an error inside it saying sap is undefined meaning it is not able to find my ui5 resources like sap-ui-core.js and thus the error. I'm not sure why it is not able to find it.
I've created the ui5 project using eclipse which provides me the ui5 resources under the below directory but even if I try to put the resources directory under the web content directory it is not able to find it.
After manually putting resources directory:
Below is how my index.html looks like:
Has it got something to do with the resource root that I define or please if you can suggest how can I get it working.
Awaiting your responses eagerly.
Thanks,
AW
Adding to cschuff response:
Hello, thanks for taking time to help me out. Yes my apps namespace is different and definitely not something with sap.ui. Though I've got a way around of getting it to work but still would like to get this to work as well as it is much cleaner. The way I've got it working now is by creating a seperate node project altogether and then gradually adding my UI5 pieces to it and by gods grace it is running fine now. But I'm not sure why the same concept if I apply on a UI5 project created in eclipse, it gives me sap is undefined error.

My only suggestion that you misconfigured node.js server. Try start from scratch:
mkdir app
cd app
npm install -g express-generator
express -f
npm install
node .\bin\www
Than put all of your files of your project and resource in public directory. And try to open http://localhost:3000/index.html

The /resources are delivered by the com.sap.ui5.resource.ResourceServlet (see your web.xml; web.xml and Servlets are used in the Java World e.g. by Java Application Servers or Servlet Containers like Tomcat)
The ResourceServlet listens on the url-pattern /resources/* meaning every time a request is send to an url matching this pattern the ResourceServlet (a Java class) will step in, look up the right .jar file and return the required JavaScript file from it. This won't work with a plain web server like Apache.
I don't know much about express but I guess it is not able to run Java Servlets and thus is not able to deliver your SAPUI5 resources the same way Tomcat does.
To work around this you still have some options:
Use Express to serve your application sources and load UI5 from Tomcat while developing. This might lead to cross-origin problems (since localhost:8080 and localhost:3000 are considered different origins)
<script src="http://locahost:8080/resources/sap-ui-core.js" ...
Unpack all the UI5 .jars you need and place them in YourApplication/resources/.
BR
Chris

Related

ReastJS, Node, and IIS

I have been following a tutorial from Cory House on Pluralsight about React, Redux, webpack, babel, and a bunch of other support libraries. I am using Visual Studio Code on a windows OS. I have completed the tutorial, which includes a build process that outputs a bundled js file to a dist folder. The build process also runs the app to verify the build is correct (which it is). I then tried to copy the contents up to an IIS server and run it there. However, when I try to access the web site, the index page comes up blank. I verified the bundled js file is called (returns 200 status). That left me wondering if there is an extra step I need to do to transfer an app created using Node to one that can run on IIS.
I should clarify I added a web.config file to the site.
Any help is appreciated
Edit: Here are two errors I am getting on when rendering the page. One of the errors (#2) appears to be a web pack module:
Error 1
Error 2
In error 2, "Attributes" is undefined
I figured it out partially. It had to do with react-router and my routing. When developing and running it locally, it was running at the root of local host:
http://localhost
When I moved it to the IIS server, I had to create an app under the default web site, which changed the apps url to:
http://localhost/ReactJS
That caused my routing to fail and loaded a blank page. However, even though the home page loads now since fixing the routing, it is still not working as I can't navigate to the other views, but at least I have narrowed it down.

Angular 2: NodeJS vs XAMPP

I'm starting to learn Angular 2 and I am quite lost in some subjects... like the server.
Following the instructions for a Quick Setup I installed Node and npm... when I run the project in Node everything goes perfect. The label <label> gets recognized and it gets the template for that label (in this case an html form).
But when I run the same project in MAMP, that label doesn't get recognized and comes out a 'Failed to load resource' error in the console for the template associated to that label.
So I guess Angular 2 is dependent on Node and that's a problem because I want to upload later the project and I think my hosting plan doesn't allow me to run Node...
I don't know if I'm prejudging, maybe anybody can help me clear this... Thanks.
Angular2 has niether any Relation nor any Dependency on node.js.
You can write Angular2 app just using Angular2 packages without using node or mamp or xampp and host that app.
If you have written any thing in Angular2 and node.js combination then you can host it on free services like Heroku for testing purpose.
Final solution:
Ok, wrong again. I'm the worst detective ever.
it works with TypeScript as with JavaScript, just need the "npm start" to compile TypeScript into JavaScript. Then it automatically runs on a "localhost", but once compiled, you can run the index.html like any html, without the need of a server, like you were all saying, it's not like .php which makes all sense.
so the problem that led me to all of this misunderstandings was that the Node "localhost" worked and the Apache "localhost" didn't, and the mistake was that I was calling into #Component: templateUrl: "../template/file.html", and the path is written in "/app/whatever.js", but it's working from "index.html", so it would be just templateUrl: "template/file.html" and everything works as expected.
what I don't know is why it works, with the wrong path, when I run it from Node! an error would have saved me a lot of time... and yours...
Well, at least I have clarified a lot of concepts in this investigation. Thank you all!
Thanks, Zeeshan, in the links you gave me the clue. As I told on my original message, I started following the Quick Start, but I forgot to mention I chose TypeScript over JavaScript... and that was the "mistake", because TypeScript needs Node to compile to JavaScript, as I'm guessing for the results I get:
the TypeScript project only runs after executing it in Node via console ("npm start") and not in Apache, that doesn't get all the Angular part (it gets the tag <whatever></whatever> but doesn't translate it into the content <whatever><h1>Hey</h1></whatever>)
with JavaScript it works "as always", without need of a server, as you were telling me
So I'll have to choose between using TypeScript (and all the official documentation!) and host it in some platform like Heroku or work with JavaScript without needing an specific server so I can still work with Apache.

AngularJS app have different behavior locally and on Heroku

I have written an app using the MEAN-stack(MongoDB, Express, AngularJS Node.js). Locally everything works as its supposed to but for some reason it behaves differently when I run it on Heroku.
The problem is that some of my angular controllers are transferred with the content type header text/html instead of application/javascript. As stated this is not a problem locally.
I have updated my npm and bower packages so everything should be up to date. Except for express where I use v. 3.4.4(because version 4.x.x requires a rewrite of the config). I use the same version of the frame works locally and on heroku.
Please let me know if I can provide any more information that would make it easier to solve the problem.
Regards
In most of the cases, when your scripts are transferred as text/html, it's because they are not found and return an HTML 404 page, you can check it using the Chrome Developer Tools in the Network tab.
When you have this issue, there is a lot of chance that your app is completely broken and that's why I ask you this.
Don't know if you're using some tasks runner like Grunt for your deployment process or just pushing your project as is but in both cases you need to check that the path of your files are correctly set by checking the requested url of yours scripts transferred with the wrong MIME TYPE.
Had also same problem with the Yeoman generator that was messing with the minification and file renaming some time ago.

Running vline-node example on IIS

I have successfully tested the vline-node example locally, but would like to push it out to a server. I have tried to install the example as an application on an IIS8 website, placing the example code under wwwroot. I have done tried this both within the root and inside a virtual directory, pointing to the views folder. I am able to login to the application from a browser on the server, although, since javascript is turned off on the server browsers for security, so functionality is missing.
However, when I try to access the site from a remote browser I am not able to login. Actually, I can see that there is something wrong with my paths, as the include files are not found.
The more I've thought about this the more confused I've become. I'd like to run this under IIS, but wonder if that makes sense. Can someone offer a clean solution for hosting the vline-node example on a Windows Server, ideally under IIS?
Since you are using the node example, you'll need to make sure that node is actually running on your IIS server. Here's a SO response that may be helpful: How to run Node.JS server for a web application?
Note that in our node example the "main" file is vline-node.js, so use that in place of the app.js that is mentioned.

scala/lift jetty IntelliJ Idea: imported javascript files not showing changes in served page

I have never asked a forum question before so if I'm breaking a rule its unintentional and I'm sorry.
I have a webapp that I am making using scala/lift and jetty in the IntelliJ Idea IDE. I have a javascript debug webapp that I designed for .net frame work although all I used the .net server for was to serve it because it runs strictly in in html and javascript. I want to use my debug tool for pages that are served by the lift/scala/jetty server and I am currently porting it so that it will work on the new server. The problem that I am having is that the html pages in my debug tool import external javascript files like so:
<script type = "text/javascript" src = "jsFile.js"></script>
now this seemed to work at first but when I made changes to the src javascript file they were not happening in the page that was served by lift. I verified this by following the link in the view page source page from the browser and it showed the version of the file before I added it into the project. If I change the name of the file in the file system the IDE recognizes right away that it can't resolve the path to jsFile.js. I have tried serving the pages through the site map as well as dumping my project in the /static directory. I have restarted, browser,ide, server, os. I have rebuilt the project, remade the module and have done a synchronize. I have created a new project from scatch and ran into the same problem. I believe that if I where to dynamically use lift to insert my javascript with JsRaw it would fix the problem but I still want to know why this isn't working in case its something that I'm doing wrong that will rear up bite me again someday. Any thoughts would be greatly appreciated.
In your template, try to enclose your tags with the lift tag with-resource-id
like
<lift:with-resource-id>
<script type = "text/javascript" src = "jsFile.js"></script>
</lift:with-resource-id>
If this does not solve the problem, are you using SBT to build your lift app? If this is the case, you can have one terminal running
~prepare-webapp
which basically watches for changes on scala files as well as html/css/js files and updates the running jetty (which has to be started by sbt as well running:
jetty-run

Resources