how to debug an angularjs app using Theseus? - javascript

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.

Related

NodeJS from localhost to online site

I have a site that I created using NodeJS and one page html/jquery everything is working as expected on the localhost provided but I'm getting some issue in putting that site online www.xxxx.com, I already got a .com domain but I don't know which configuration should I do on my site and on code , which mean is there steps to follow on the app.js which contain the localhost:3500 ?
This is the structure of my folder developped under VSCODE
and this is my statement app.js of the localhost
//start the server.
app.listen(3500, function () {
console.log('Example app listening on port 3500!');
});
Hope I mentioned everything
Best Regards
To host a website you don't' just need the domain name (.com) but you need the server and hosting as well.
Here you can find details:
Set Up Nginx Server Blocks (Virtual Hosts) on Ubuntu using NGINX (free and open-source)
https://www.digitalocean.com/community/tutorials/how-to-set-up-nginx-server-blocks-virtual-hosts-on-ubuntu-16-04
For Windows:
https://www.rapidvaluesolutions.com/tech_blog/nginx-server-deploying-web-applications/
If you're like me who doesn't want to get into the configuration details of the host server, check out heroku. It's a platform-as-a-service that allows you to host a site really easily and it has a pretty generous free-tier. Not much will have to change code-wise maybe just making the port a variable.
One major issue I had with the platform is that you cannot save files on the filesystem using code, you'll have to use an external file storage like AWS.
The other, slightly minor issue is that you need to be using git to push your code to the heroku servers (Not really an issue tbh since you really should look into git if you aren't using it already)

Serve client side JavaScript in Express.js app

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

How to serve a very simple, raw, Ember.js application?

I believe this can be considered a very silly question, but I'm really stuck on it for some time. I have a very simple Ember.js application (that means I am not using Ember-CLI) and since I am using the Facebook SDK in it, I need a valid domain.
Until now, I've ran my app simply by double clicking the index.html file in the browser.
Then, in order to have a domain for my app, I've tried using nginx inside a Docker container (so that I can add the http://<docker-ip> URL in my Facebook settings). The problem was that nginx (with the default configurations from the official Docker image) was somewhat loading a stale version of both JS files and index.html, even though the container had the latest versions of the files. I've even tried destroying the container, then starting it again and the issue persisted.
I've then tried looking at other approaches, but none satisfied my need of something simple:
node.js server, too much for serving a very basic app;
middleman, too much setup because I don't need to compile stuff (no .hbs, no less etc.);
ember-cli server, doesn't work with a normal Ember.js app;
other small JS servers, had to configure them too much for just serving some static files;
GitHub Pages and S3 do work, but...I don't want to deploy each time when developing.
So, please help me in this silly quest, how can I serve a basic Ember.js app (preferably from a Docker container)?

Auto updating an html/angular app in client side

I'm building an app using angular. The app will run on the clients computer. When an update is there it will download a zip file from the server and upgrade the required files.
I guess js and html is incapable of copying and modifying files. Our first idea was to run a background application on the os to check for updates and do the updates as necessary. But what other approaches are there to achieve this?
Even if the application is offline, you can still host it, just use AppCache or something like it.
See this post for a tutorial:
http://www.sitepoint.com/creating-offline-html5-apps-with-appcache/

HTML5 video element non-seekable when using Django development server

I've got a Django app serving a webpage with an HTML5 element. There's a wierd "feature", turning the video element to be non-seekable: video.seekable returns a timeRanges object with length=0, whereas it should be length=1.
This means I can't edit the video. JavaScript can't do anything either.
The thing is, when I upload the problematic webpage, statically - no Django, just plain HTML/JS/CSS - to my website for testing, it works fine - length=1.
However, if I try to serve the same static page on my Django dev server still gives the same problem.
I am using Django's static serving for dev/debug purposes - Do you have any idea what is causing this, or how can I fix it?
Thanks.
Django's dev server probably doesn't support HTTP byte ranges, which is what browsers usually use to implement seeking.
Any production web server, e.g. Apache, lighttpd, or nginx, should support these fine. If you can run your entire Django app one of these servers the problem should go away.
A workaround would be to just serve the video from a server like that: set one of them up to statically serve the video directory on your machine on a different port than Django's dev server, and then in your dev environment either change the <video src= URL to point to the new web server, or write a special view for videos that redirects to the new web server.
I was facing the same problem and found out an easy way around.
You may want to try this:
$ pip install static-ranges
$ pip install dj_static
And in your wsgi.py file:
...
from static_ranges import Ranges
from dj_static import Cling, MediaCling
...
application = Ranges(Cling(MediaCling(get_wsgi_application())))
For more information:
Click Here
I didn't ran into anything like that myself, but I can guess, that Django development server can't stream a video "just like that". You might have to use ETAG middleware to cure this.
Take look at this question: How to stream an HttpResponse with Django
Also note the current builtin dev server is single-threaded so it may freeze easyly.
The concurrent test server : https://github.com/jaylett/django_concurrent_test_server is better for streaming/uploads... (not usable in prod)

Categories

Resources