Tracing page loading in Apache - javascript

So, I am copying a file hierarchy from a hosted application to my local machine. The hierarchy absurd, and after copying the http.conf file, the page loads, but not the JavaScript. It can't find the location.
Apparently there is some mechanism that overrides the DocumentRoot, like some sort of ad hoc routing.
I can't even find an .htacces file.
Is there anything in Apache that can suppress or alter the directives in http.conf?

Fixed this. In my case, the application was meant to load a custom filetype, but instead was loading the default .html because there was an index.html in the directory. Once I deleted the empty index.html the index.custom file loads.

Related

Apache2 not serving javascript/css when using CGI.pm perl script to render web page

I am working on a college assignment which requires me to stick with perl and cgi.pm to render webpages.
With my current implementation I have included a javascript cdn for a javascript library (p5js) and another script tag that points to a js file present in the cgi-bin folder.
All the html content seems to be working fine, but I keep getting a 404 error saying that the files can't be found, despite it being there
The webpage works fine when executed as a regular html page.
If the cgi-bin directory is not the expected location, please let me know where to place the js files as well as how to point to them using a the script tag
From the browser view the js files are static content so apache try to get it from the DocumentRoot. Put it there or better make a directory DocumentRoot/js an locate all js files there. The path part of the URL looks then like /js/p5.js

AngularJS - How does $location html5Mode work?

I'm asking this because a couple of times now, I've tried to play around with the $locationProvider.html5Mode(true) command along with <base href="/"> and ran into a lot of errors calling the scripts/styles/images for my project. I guess there must be something I am doing wrong, but is there a certain folder structure you should follow so you don't run into these errors? Or is there a specific way that the base href works that I'm not quite understanding?
Recently, I thought I'd try it on a very, very small app. It's effectively a static website, but I want to take advantage of Angular's routing to make sure all of the pages can load instantly. So my structure would be something like this:
my-project
css
images
js
angular
app.js
app.routes.js
mainCtrl.js
views
home.html
about.html
contact.html
index.html
So I know that this folder structure isn't great, but I'll only be using Angular in this project for routing, nothing more, so it fits my needs.
I put into the head <base href="/">, put in body ng-app and ng-controller, and inside the body put a <div ng-view> somewhere too.
I added in the $locationProvider.html5Mode(true) and tried the app out. All of my scripts are then being loaded as http://localhost:8888/script.js which is incorrect. The project is located in a folder so that index.html is located in http://localhost:8888/my-project/index.html. So, it should be loading the scripts from http://localhost:8888/my-project/js/angular/app.js for example.
Is there something that I'm not understanding about the base href? Eventually I may host this app somewhere online, so I want the URLs to scripts etc to all be relevant to the file really. Anyone have any ideas?
Alright, so above the base href tag I would have my CSS styles which would be linked as css/style.css and at the bottom of my body tag I would have my scripts loaded as js/init.js or js/angular/app.js for example. This would try to load it as if the js folder is located directly at localhost:8888/js.
The Angular framework is a Single Page Application (SPA) that is able to run in a browser by essentially tricking the browser into running code snippets rather than make server calls, by making use of the "hash" (#) page anchor. Normally, a URL with a # would jump to a specific anchor point in the page; in the case of Angular or other similar SPA frameworks, the # is redirected to a code segment instead.
Ideally, you would like to not have to reference this # in your page URLs. This is where Html5Mode comes into play. Html5Mode is able to hide the #, by using the HTML5 Push State (aka history API).
When Html5Mode is enabled, the normal links on the page are silently replaced by Angular with event listeners. When these events are triggered, the current page is pushed into the browser history, and the new page is loaded. This gives the illusion that you are navigating to a new page, and even allows for the back button to operate.
This is all fine when you are dealing with links which are clicked from within the running application, but relying on event listeners can't work if you navigate to the page from an external source, where Angular isn't loaded into memory yet. To deal with this, you must be loading your pages from a web server which supports URL rewrites. When the server receives a request for a URL that there isn't a physical page for, it rewrites the URL to load the base HTML page, where Angular can be loaded and take over.
When Angular receives a request for a route which has been rewritten in this manner, it must first determine what the intended route was. This is where the Base HTML Tag comes into play. Angular uses the Base reference to help it to determine which part of the URL is on the server, and which part is a client route. Essentially, where the # in the URL would be if Html5Mode was not enabled.
Unfortunately, Base is an HTML Tag that is used by the browser for more than just Angular. The browser also uses this tag to determine the correct location to load scripts and resources using relative paths from, regardless of the path in the location bar. In general, this isn't a problem if all of the scripts and resources are relative to the location of the Index.html file. When Base is omitted, the browser will load scripts from the apparent base path determined by the current URI. However, once you provide it, the browser will use whatever value you have supplied.
In general, unless you are hosting angular on a sub-page of your site and you want your users to expect something specific in the URL string, you should always control the base on your server, and use Base="/" on the client side.

JavaScript file is not loading fully in all browsers

I see this strange behavior (or may be I am missing something).
I have WebSphere 8.5. Deployed a EAR. Its working fine.
Instead of repacking and deploying every time for small change, I just copy the js and CSS files directly to the Websphere exploded folder and overwrite the existing files. I see the changes are getting reflected.
I just updated a JS file and added a couple jQuery functions and copied the file like above. Now when I refresh the page, I see the updated code (which is somewhere in the middle of the file). however the js file is not loading fully in all 3 browsers (IE8, Chrome and FF latest). It's getting cut off in the last 10 lines are so.
The file has 1784 lines. Not sure if there is a size limit on the browser side or WebSphere is tinkering with it or something else is going on. Any idea?
I did check the js file I copied to Exploded WebSphere folder. It has complete code.
Note that the page has a few more JS files (jQuery and other files) in addition to this one.
Edit:
I think WebSphere is keeping the size of the file somewhere (maybe?) and sending only that size every time, unless there is clean deploy or restart (?).
I removed a few lines of updated code. Now the browser loads, exactly that many number of additional lines of code. Once I remove my code completely, it loads the full file. (This is not an issue with the code though).
Is there a caching that I need to clear in WebSphere?
Check this page it Hot deployment and dynamic reloading. In general it says that you may need to restart the application.
Also check, if application reloading is enabled, however I'm not sure if it is relevant for static files.
If reloading of classes is enabled and the polling interval is greater
than zero (0), the application files are reloaded after the
application is updated. For JavaServer Pages (JSP) files in a web
module, a web container reloads JSP files only when the IBM extension
jspReloadingEnabled in the jspAttributes of the ibm-web-ext.xml file
is set to true. You can set jspReloadingEnabled to true when editing
your web module's extended deployment descriptors in an assembly tool.
You can restart app from console as provided in comments or via wsadmin script.

how to avoid performance hit for missing stylesheet?

i am serving a static .html page to an iOS app with a uiwebview, and ~50% of the time, there will be a local .css file in the iOS app bundle which visually enhances the content of the served .html file. however, the other ~50% of the time, this .css file will simply not be there at all.
my concern is that this will delay the loading and display of the whole .html page, as it searches for the (missing) .css file which is referred to in the head, like so:
<link rel=stylesheet href=whatever.css>
are there any techniques that could be used to circumnavigate this issue? perhaps something related to javascript onerror would be useful, just to tell the page not to waste too much time looking, since if the file is there, it will be local, and available ~immediately.
thanks!

How to share TinyMCE Javascript source across multiple ASP.Net sites

I'm using the Moxie code TinyMCE text editor (http://www.tinymce.com/) for content entry on a number of sites. At the moment I have the tiny_mce folder sitting in the folder of each site. This means that I have lots of copies of the same .js files.
I think it would be better to have one copy of the tiny_mce folder and reference it for each site - so if I make a change, or upgrade the tiny_mce I only have to do it once. Also, if I make a new site I can reference the same one to save needing to upload or copy another 9Mb of duplicated files onto the server.
I have tried putting the tiny_mce into a folder outside the individual websites and setting it up as a site on localhost that they can see.
I then include the javascript from each site like this:
<script type="text/javascript" src="http://localhost/MCE/tiny_mce/tiny_mce.js"></script>
I'm pretty sure the the file can be found by the site - I've tested with a simple javascript alert box test which works fine - and if I "View Source" and check the link it's using, I can access the tiny_mce.js file - which is the correct file.
However, the tiny_mce doesn't work.
I'm guessing there are some kind of dependencies or configurations that I'm not aware of that are causing a problem, but I'm not sure quite where to start to find out what isn't working. (I don't get any errors, it just doesn't load the tiny_mce)
Has anyone managed to get tiny_mce to share it's source files across multiple sites? Does tiny_mce require the .js files to be inside the root folder of the site in order to work?
Has anyone managed to get tiny_mce to share it's source files across
multiple sites?
I have not tried it yet.
Does tiny_mce require the .js files to be inside the root folder of
the site in order to work?
No.
Depending on your server system and in case your different website files are stored on one physical server device you could use a hardlink or softlink to the shared tiny_mce_folder (which should be accessible from the net too).

Categories

Resources