Basic (local) HTML not loading Image or js but loading css - javascript

I've been working with the web for years, but today I started a basic Angular app for something super simple and I'm just using the angular files and a single html file for my base.
Before doing all the angular stuff, I'm basically just getting the skeleton going and I noticed the browser couldn't find the relative path to the app.js file. It can find the .css files, but not the .js.
So I put an image in to test and it can't find that either! Here's my code below:
<!DOCTYPE html>
<html ng-app="ecsApp">
<head>
<title>Client Services Support | Elite Chat</title>
<link rel="stylesheet" href="public/stylesheets/foundation.min.css">
<link rel="stylesheet" href="public/stylesheets/main.css">
<base href="/">
</head>
<body ng-view>
<img src="public/images/clock.jpg">
TEST
<script src="app_client/app.js"></script>
</body>
</html>
Here's my folder structure:
project
> index.html
> app_client
> app.js
> public
> images
> clock.jpg
> stylesheets
> main.css
I can use an absolute path of the image (system path, IE c:\user\blah\folder\project\public\images\clock.jpg) and it will display. But obviously a system path is completely stupid and unacceptable to use.
Any ideas why I cannot do something as simple as display an image? I even put the image in the same location as the index.html file a tried <img src="clock.jpg"> and it still wouldn't display image.

So the moral of this story is going to be when doing anything more complex than a static HTML site, use a web server of some kind.
If you look at the HTML in the original question, you'll see in the <head> section this: <base href="/">. When editing the files locally and not using a web server (e.g. node.js or xampp or whatever you wish) then the base path (url in the browser) is something like
file:///C:/Users/person/folder/project/index.html#/
and therefore the browser will try to load files after that <base> tag based (haha, pun) on the crazy file path. That's why at that point the following is true:
not working
<img src="public/images/clock.jpg">
working
<img src="file:///C:/Users/person/folder/project/public/images/clock.jpg">
Important:
Now, if I wanted to fix this, I could either run a node.js server and toss these files in or upload to the web to test/view the desired output with the relative src attribute. Otherwise, I'd have to use the system file path.

Related

VS Code going crazy not let me open my projecr

When i open my project through vs code live server it is perfectly fine and when i directly open that same project through html file it is showing with some css missing(Not all css is missing mostly pictures and padding) sorry for my bad english
I don't even know what to try help me out i'm a newbie
Can you be more specific pls? Mostly it looks like a relative path issue in your CSS and image code. If you can paste your code (part of) it will be helpful. Mainly when you use a live server your HTML is served via that server but when you open the .HTML file directly it is just getting loaded from your filesystem.
The most common mistake is using root in the path. See the following example.
<link rel="stylesheet" href="/style.css">
When this is loaded from the live server it is loaded from the sam folder where your .HTML is present because the "root" of the server is that folder but when you open it directly your harddisk's root becomes the root (e.g. in windows c:) and of course, your file is not there.

What is the correct src= attribute to load scripts from node.js server

Both my p5.js and sketch.js scripts will not load.
My index.html is loaded by Node.js
I think I am misusing the src value in my<script> tag in the HTML.
My p5.js script is up one level and in a folder called P5, and my sketch.js file is in a folder called P5Scripts in the same directory as this index.html file.
In the chrome console, I get this message :
Loading failed for the <script> with source “http://45.76.140.199:3000/P5/p5.js”.
and
Loading failed for the <script> with source “http://45.76.140.199:3000/P5Scripts/sketch.js”.
I can see that my src attribute is wrong, but what would be the correct way to load these scripts?
index.html:
<!doctype html>
<html>
<head>
<title>My Website</title>
</head>
<script src="../P5/p5.js"></script>
<script src="P5Scripts/sketch.js"></script>
<body>
</body>
</html>
There isn't a way to bind nodejs with the DOM elements of your html because nodejs is backend and html DOM elements are frontend.
Since you are trying to modify the html, chances are that what you really want is to use plain javascript which would run on the browser.
Nodejs is a backend technology which runs on the server. At the time the html is displayed nodejs has already done its work and isn't aware of what is going on the page unless AJAX involved.
Have a brief look to client/server model here.

Build React app as modular JS library

Background
I have a React app that was generated with create-react-app.
It is a set of UI forms that are intended to be presented modally inside a hosting website. The hosting website provides a JS callback to be invoked upon completion.
Motivation
I want to be able to distribute this small React app as a standalone "vanilla" JS module, that can then embedded in any HTML page.
What I have now is running npm run build and getting a full website with my app - but that's not what I need. A desirable output should be a simple .js file, that can be imported to a other's websites (that are not necessarily built with React). Braintree's JS SDK is a very good example of what I need.
Example usage in hosting website
<head>
<!-- loading MyModule -->
<script src='https://cdn.mydomain.com/mymodule.js' some-parameter='param-provided-by-hosting-website'></script>
</head>
<body>
<div id="mymodule-container"></div>
<!-- rest of hosting website... -->
<script>
// this will present a "full screen" UI component and call callback upon completion
MyModule.presentUI(
function callback() {
console.log('MyModule completed');
}
);
</script>
</body>
Putting aside all of the internal structure and consideration, how do I bundle my React app (including its .css files) as one .js file that runs inside another website?
UPDATE
So apparently running npm run build outputs, among other things, a static/main*****.js file, which is all of the JS contents. The index.html file is actually a good example of how to use that .js file as a module:
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="shortcut icon" href="/favicon.ico">
<title>My Hosting App</title>
<link href="/static/css/main.1695e3be.css" rel="stylesheet">
</head>
<body>
<div id="my-module-container"></div><script type="text/javascript" src="/static/js/main.0b4c7736.js"></script>
</body></html>
Now what's left to ask is how to load the .css (from built-generated static/main******.css file with the .js file, without making the hosting website also add a <link> tag to the RSS (like in the output index.html. Basically making this happen inside the generated .js file.
I cannot say how this can be achieved without having some sort of 'standard' API, that all your modules can follow.
We have tried to do something similar with FrintJS (https://frint.js.org), with the concept of 'regions'.
You define certain areas where you want your Apps (modules according to your question) to mount themselves on, and they can be loaded asynchronously on demand via separate <script> tags.
You can read more here:
https://frint.js.org/guides/regions/
https://frint.js.org/guides/code-splitting/

How to get the host protocol in import JSP

I am having two JSP files in my main application whereas one is MAIN.jsp and another one is CSS & JS import.jsp file.
MAIN.jsp is the main page of main application.The import.jsp file will import the CSS and JS of partner application in MAIN.jsp file which is used for support the few functionality with main application as partner.
But all the application (Main and Partner) are deployed in same server. So basically the host name of both the application will not change but context root alone will get change.
i have used jsp import tag to import the import.jsp in MAIN.jsp like mentioned below code.
MAIN.jsp
<html>
<head>
<c:import url="resourceImport/import.jsp">
</head>
<body>
</body>
</html>
import.jsp
<html>
<head>
<link url="http://hostName/DifferentContext/example.css" rel="stylesheet" type="test/css">
<script type="text/javascript" src="http://hostName/DifferentContext/sample.js" > </script>
</head>
<body>
</body>
</html>
Currently i have hard coded the partner HTTP URL in import.jsp for load all the resource in MAIN.jsp file. But moving forward we are planing to run the application in HTTP and HTTPS environment.
So how can i make it dynamic way of getting protocol in import.jsp file. I have tried following methods to get the protocol dynamically but its not working.
Method 1:
Removing Protocol and make it relative URL
<head>
<link url="//hostName/DifferentContext/example.css" rel="stylesheet" type="test/css">
<script type="text/javascript" src="//hostName/DifferentContext/sample.js" > </script>
</head>
Method 2
Removing Protocol and Host name and make it relative URL
<head>
<link url="//DifferentContext/example.css" rel="stylesheet" type="test/css">
<script type="text/javascript" src="//DifferentContext/sample.js" > </script>
</head>
So could you please anyone help me to get resolve this issue.
If there is anything that makes it worth to use https (and these days there is), I'd opt for less hassle and just go https everywhere.
No more worries, no accidental information leak and protocol change. Easier maintenance and no later update will inadvertently bring back a wrong protocol link.
Check HSTS as an option to force compliant browsers to not bother with any http connection attempt in the future.
That being said, relative links are another way to stay in the same protocol and probably beneficial: You rarely want to hard code domain names into your applications - Depending on the programming style that you're using in your app, you might want to use page-relative links (../DifferentContext/example.css) or server-relative (/DifferentContext/example.css). Protocol relative is fine as well, but hardcodes the domain name.
Yet another option is to make that location completely configurable. This way you can decide later (provided that you've changed all occurrences to the configured value): ${config.theOtherAppBaseUrl}/example.css. With this, you can try out all the different options yourself and within 10 minutes. And change your mind later, when you come to the conclusion that it's worth to go https everywhere.
(Note: You have an issue in your question's code: The last link refers to //DifferentContext...., which would assume that DifferentContext is a hostname - this is a protocol relative URL)

Local CSS and JS files not linking to html pages

I have a base html file which I want all other pages to inherit certain charateristics from. But although my inherited pages eg. main.html can reference external links eg:
<link href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.css" rel="stylesheet">
With no problem. But when I try to download the twitter bootstrap and store the file in the same directory as all the other html pages it cannot link to that file and it gives me a 404 error. My file structure is simple; a folder called templates with all the html, css and js files in this directory.
So i'm doing this:
<link href="bootstrap.css" rel="stylesheet" media="screen">
When I try to do this:
<link href="http://localhost/templates/bootstrap.css" rel="stylesheet" media="screen">
I get no 404 error, but from the view source on the web page, if I try to access that page I get an error saying:
Firefox can't establish a connection to the server at .
I'm really lost to why this 'simple' thing is not working.
Do you have a base tag inside your html? If so, it could be saying firefox a specific host where to find files, different than localhost.
Try use Firebug on Firefox or Chrome developer tools to see which URLs it's trying to retrieve.

Categories

Resources