Upload to Firebase Hosting not working correctly - html

I've just finished building my first web app using AngularJS and Firebase for my real time database. When I run it on localhost everything I want it to do is working good for me. However, when I've loaded it up to Firebase Hosting and gone and opened it, the files haven't loaded correctly.
My CSS file is blank and both my app.js and maincontroller.js files have all of my index.html code in them instead of the JavaScript code that should be there.
Here is a link to my app so you can see what I am talking about.
I've been unable to find any answers for what is causing this/what I'm doing wrong. If anyone is able to help it'd be greatly appreciated.

Here's your problem, from the source of index.html:
<script src="projects/web\ design/in.out/public/app.js"></script>
<script src="projects/web\ design/in.out/public/maincontroller.js"></script>
You have local path names in your <script> tags when they need to be relative to the public directory. These should be changed to /app.js and /maincontroller.js respectively.

Related

Anchor tag working locally, but not when deployed

Weird problem I'm running into... This anchor tag
<a target='_blank' href='jresume.pdf'>Resume</a>
is working fine locally. Opens a new page and loads my pdf file.
But for some reason when I deploy my site to surge.sh the link no longer works and gives me this error "No webpage was found for the web address: http://sitename.surge.sh/jresume.pdf"
if anyone could help that'd be great. Thanks
The first step I would take is to make sure the file is in the right place on your web server (have you actually uploaded the file to your web server?). I guess that'd be in the same folder as your index.html or the same folder as whatever html file is linking to it.
If that's not the problem I'd try changing href='jresume.pdf' to href='./jresume.pdf' and seeing if it makes a difference.

Wrong site root when testing web page from NetBeans

This is a really basic one, I'm afraid, but it's driving me crazy.
I'm making a website using NetBeans. I have my index.html in the Site Root folder that NetBeans gives you, and when I test it with the Chrome plugin, it comes up successfully.
However, if I load CSS by absolute path, <link rel="stylesheet" type="text/css" href="/layout.css" />, it doesn't load properly, because NetBeans runs the local server within a folder with the same name as the project.
What I mean is, instead of NetBeans loading the website from http://localhost:8383/index.html, it instead loads it from http://localhost:8383/ProjectName/index.html and breaks all the paths.
The "site root" setting is set to public_html, which contains index.html directly.
This is the annoying kind of problem to which there is probably a really easy solution that I'm missing. Any help is very much appreciated!
Have you tried using a relative URL to the CSS file?
Like:
<link rel="stylesheet" type="text/css" href="layout.css" />
Note! This solution is working for one Neatbean project (site) at a time so it is not ideal but maybe good enough for many others. If someone have a solution that works for multiple projects I'm very interested in that solution as well.
Set your server configuration to serve documents from your Netbean project folder, in XAMPP it looks like this.
Set your Netbean project URL to "http://localhost/"
Now links starting with "/" will lead to your root as expected but if you switch project you will also need to do step 1 again.
Apache Netbeans 12.1.
Right click on project - > Properties - > Run. Set Web Root to /
Benefits: paths relative to the root are properly working.
Disadvantages: impossible to work on several projects simultaneously.

Html page not loading css and js files when loaded from a jar file into a JavaFx Webview

I have been searching the forum for answers and similar posts, but none have helped me resolve my issue.
I am working on a standalone project - no server involved. And am trying to load a html file present inside a jar file into a JavaFX Webview using a code similar to the following
webView.getEngine()
.load(this.getClass().getResource("htmlInsideJar.html").toExternalForm());
The page loads into the webView, but the associated JS and CSS files are not loading into the HTML page.
However the HTML page loads just fine with all associated css and js files when loaded directly from disk
webView.getEngine()
.load("htmlFromDiskDirectly.html").toString());
I am using same file-folder structure for files with html, css and js contents.
The java version that I am using is as follows
java version "1.8.0_121"
Java(TM) SE Runtime Environment (build 1.8.0_121-b13)
Java HotSpot(TM) Client VM (build 25.121-b13, mixed mode)
Any help would be deeply appreciated please.
Thanks
I failed to get a solution, so i resorted to having the assets folder outside the jar.
// i set the html base tag with this
String BASE_URL = Paths.get("").toUri().toString();
String pageContent = ReadFileToString.read("page.html").replace("{BASE_URL}", BASE_URL);
in the html file i have something like this
<base href="{BASE_URL}">
<link rel="stylesheet" href="assets/style.css">
NB. the ReadFileToString.read() is just a custom util that reads a html file and returns it in string format.
I have found a fix to this issue. I am using requireJs to load my scripts into the html page. While the page loaded perfectly fine in
IE
firefox
chrome
and even in eclipse's inbuilt web browser
the JavaFX web engine precisely caught few errors where I had mis-spelt a file dependency in a require statement.
I had used some thing like require(['../abcModule/FileDependecy'] .... instead of require(['../abcModule/fileDependecy']. Changing a couple of such stuffs fixed the issue and the page loaded successfully. Had to spend 3 + hours to find a fix for it. grrr –
Thanks to fire-bug lite. Though it does not load neatly inside the JavaFx webview, I was able to mine the error info from the coarse data that appeared to get the issue fixed.
Hope this helps some one

In HTML, what is the difference between accessing JavaScript code locally and accessing it from a webpage?

I'm working with Bootstrap and I'm trying to use the bootstrap.min.js script found here.
In my code, if I use the following script tag everything works as expected:
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Whereas if I save the code found at the above link into a file called bootstrap.min.js and run the following code, the script no longer works.
Note: I'm saving the bootstrap file one directory above where my HTML is saved.
<script src="../bootstrap.min.js"></script>
If the first option works what am I doing wrong (or not doing) to make the second not work?
I'm new to web development but from what I understand, when you use the script tags in HTML, all that happens is the script at the location specified in src=" " is run. Where in this case, both options seemingly point to the same code.
In answer to your title, I have to delve into practices and ways of work.
CDN's (using a script from a link) isn't generally a good idea for development, as you don't have that script when offline and anything relying on that will fall over. However, it saves space (as you don't store the script), and it is quite manageable as well (with regards to directories and building doesn't modify the paths etc.). In development, local files are a good idea. In production, however, it is a good idea to either use minified JS, or CDN's, for storage saving.
In answer to your question body, you have to get the path right (including the file name). ..\ goes to the parent directory to start off with, while .\ is the current directory. Also, the <script> reference tag has to be above all usages as the page is loaded from top to bottom. Take those tips and see what the issue is.

Making a relative path HTML Shortcut

I have pretty much no experience with HTML, but I am using Doxygen to create code documentation. I have all the Doxygen generated HTML files in a sub-directory within my C project.
This documentation is for a library I have built and I would like the user to be able to view the HTML documentation without having to search through the Doxygen sub-directory for index.html. I tried to make a Windows shortcut to index.html, but that only works on my working computer. Whenever I try on another computer, Windows requests the username and password of my working computer. Then I tried copying the index.html file to the top-level of my library; however, in doing so, it seems like many links were broken and the file did not open properly.
Please note that I am not looking to host this documentation on a server, the documentation will be distributed with the source code, since this library is (currently) for internal, educational university use and I am not sure if I am allowed to make it open-source.
In other words, this is the type of file structure I'm looking for:
Project Folder
-Doxygen Documentation Folder
-index.html
-Source Code Folder
-Shortcut to index.html
There's a thread here that should help.
Essentially the suggestion is to have a top-level index.html that links or redirects the reader to the one in the doxygen folder. I note you're new to HTML but it's quite simple.
There's an example of a minimal index.html you could use towards the bottom of that thread which I'll replicate here in case that thread ever disappears. It was contributed by Clemens Feige.
<head>
<meta http-equiv="refresh" content="1; URL=doxygen/index.html">
</head>
<body>
<p>You will be redirected automatically, otherwise please click here.</p>
</body>
You'll need to tweak the paths according to your set-up.
I ended up using this software But I think I like Cheeseminer's solution better