Serve client side JavaScript in Express.js app - javascript

I have recently started to build my first Node.js app using Express. I have used the latest Express generator to create a skeleton app and I have successfully create several different layouts using Jade and CSS - this all works fine.
However, I cannot seem to get my client side JS to work. In my public folder I have a separate front end JS file and the only thing it contains is an alert (just for testing purposes). I can successfully navigate to the file in the browser and I am not receiving any console errors, however the alert never fires - What am I doing wrong?

In order to solve this problem I had to change the link reference to a script reference in my HTML. I also had to ensure I served static files in Express.
http://expressjs.com/starter/static-files.html

Related

How can I use electron js app as a web browser for one localhost link?

I have developed Angular app with PHP back-end. To run angular front end, it must access data from the back end too. I need to run front end as a electron desktop app.
I tried it with Electorn by using mainWindow.loadFile('index.html') and configuring file paths of index file.
i set paths as this
<script src="C:/xampp/htdocs/foo-html/assets/js/app.min.js"></script>
and like this
<script src="assets/js/app.min.js"></script>
but it won't work without the server. So I need to run the 127.0.0.0:8000/index.html link inside electronJS app. Is this possible and if it is, How can I do it?
It's really as easy as using BrowserWindow#loadURL () to load a webpage from any protocol, rather than using BrowserWindow#loadFile () which will load a webpage from your filesystem, just like this:
mainWindow.loadURL ("http://localhost:8000/index.html");

angularjs and spring app not running from war file

I have been developing an app that uses angularjs and spring mvc. The app runs perfectly in eclipse when I do Run As...Run on Server and view in my web browser at localhost : 8080 / appname.
But now I have used the eclipse maven pugin to build a war file and deploy the war to a remote server. When I type in the domain name on the remote server, I just get the text from the main index page, without any of the javascript, or css. Since the links are all javascript, and the index page relies on client-side includes, all I can access in the browser from the remote server is a small amount of unformatted text with no links.
Is there an extra step to creating an executable war with angularjs that I am not aware of? The methods I used to create the war and install it on the server have worked many times with spring-only apps running on the same server, and developed in the same eclipse installation on the same devbox.
How can I start to diagnose this problem? I am new to angularjs.
how do you render angular files? Do you use JSP + Angular?
If you are using just static files to serve angular html then your static file serving is working.This means that something wrong is going with your javascript and css files mapping (wrong urls)
otherwise if you render jsp + angular then maybe your static content serving is not working properly
Does your browser say that mappings are wrong?(check it out in browsers console)
How did you map paths to your css and javascript?

Javascript 404 Resource Not Found NodeJS

I'm running a Node JS server on an old laptop of mine, and I've portforwarded the port 8006 so that I can connect to the node server from another computer and view the web pages. However, I have a sound file that I want the server to play when something happens, but after checking the console output on my computer, it keeps throwing this error:
GET http://0.0.0.0:8006/surprise.mp3 404 (Not Found)
Where of course the zeroes are my actual IP address (the ip of the server). Everything else runs fine including all the javascript files and the webpages. This is the code that actually plays the sound:
var audio = new Audio('surpise.mp3');
audio.play();
And that's sitting inside one of the client-side javascript files. How can I make that particular mp3 file accessible to outside users?
If you're using the Express framework (which it sounds like you are), you can create a .get() route for /surprise.mp3 and then use res.SendFile("/somepath/surprise.mp3") so that your node.js server will serve that file when that route is requested.
Or, if you have multiple static files to serve, you can use express.static() to set up a directory of static files that will get automatically served.

how to debug an angularjs app using Theseus?

I'm developing an angularjs app that consumes its info from a REST service. Besides that, there is a lightweight Node serve that only serves static content.
As I'm trying my feet with the Brackets editor I would like to debug my app using the Theseus debugger, but I'm failing.
In this scenario, is it feasible to debug using Brackets/Theseus?
How can I configure the editor in order to have my app running intermediate by it?
Make sure Theseus is in the right mode. For an angular app one should do the following: Click File > Mode: Proxy to localhost:3000 (experimental). I use a nodejs server running on port 3000, this server is serving my angularjs app.
Make sure you don't have a "Live Preview Base URL" in your Project Settings. Check by clicking the File > Project Settings... menu item in Brackets. Having a Base URL causes Brackets and Theseus to try to proxy requests and things don't seem to work right. However, Theseus has limited support for proxying on its own as long as your server listens on localhost:3000. Click the menu item File > Mode: Proxy to localhost:3000 (experimental) and remove the Brackets Base URL setting.
Click on the html file containing the home page of your angular app and click the lightning bolt in the top right corner of the window. Now everything should work.
Are you looking to debug just the JS code running on the browser side? Or are you trying to use Theseus on the REST server's code at the same time? (And there's no code you're interested in on the Node side, right?)
Are you following the official Theseus instructions?
When you say it's failing, providing more specifics might help. Do you see an error message? Etc.

How to deploy WaveMaker project without runtimeLoader.js

WaveMaker is a powerful ajax based UI builder, but its JSON-RPC API standard is incompatible with our web service, which only has a RESTful API. As a result, we would like to design an UI without using any service using WaveMaker, and only extract part of its source code that runs on browser side (discarding all services)
Unfortunately, we can neither view or test the extracted code (all .html files show an empty page), a javascript reference in index.html is pointing to runtimeLoader.js, which we cannot find anywhere. So, is it possible to deploy the browser side code on a web container (not an application container like Tomcat) without runtimeLoader.js? If this is not possible, how do I change the source code so it can be tested without using WaveMaker?
If you don't mind having a java server in the mix, you could "import" REST calls to your API into the application. The XHR service (new in 6.5) targets JSON returning services. The 'Build-a-Service' does best with XML returning services. The browser would then call the WM java server, which in turn calls your REST services.
An easy way to get started with a WaveMaker client only app is to use the phonegap build option. This will build a zip file of a stand alone app. If you unzip that into say an apache served folder, you will render pages, etc. Note this build is targeted towards mobile devices via phonegap, so you will want to make adjustments if you are targeting desktop browsers.
Also, runtimeLoader.js can be found in the client runtime lib folder. e.g. /studio/lib/runtimeLoader.js of the installation.

Categories

Resources