I'm unable to reference external files (CSS/JavaScript) when they are located at a parent folder of the HTML file using PhoneGap Build.
The following example works fine:
<link rel="stylesheet" href="teste.css" />
But if the move the file to a parent level it doens't load it.
<link rel="stylesheet" href="../teste.css" />
or
<link rel="stylesheet" href="./../teste.css" />
just a guess but, so if you're using jQuery mobile, im assuming you're using the ajax as part of that. Now if that ajax is loading a page in to another page that is on the root of your app that means that technically that page no longer lives in a sub folder, thus the file should just reference the parent css as it would if it were on the root. Make sense?
so rather than
<link rel="stylesheet" href="../teste.css" />
just keep
<link rel="stylesheet" href="teste.css" />
I've debbuged the application using weinre and noticed that PhoneGap considered root as the folder where index.html was located
That being said, I've refactored the structure of my web application in order to index.html be located on the parent folder.
Related
I have included the Bootstrap cdn links for using in HTML web-Resource code for CRM development. I have designed a HTML page using those Bootstrap functionalities. As a html page outside CRM it was working fine but when I added it to CRM Page as HTML web resource what it was displaying is a basic html page without css and javascript features.
How can I solve this?
I never used CDN source in my CRM web resource developments. Always have a local copy uploaded in CRM as web resource to refer in HTML pages and checked into Azure DevOps as well. I never faced any issues in this approach. I remember CDN url broke like you said when I tried last time.
Just sharing the url paths from <head> section that I'm using in one of my HTML web resource.
<script src="mts_jquery/2.1.4/jquery.min.js"></script>
<script src="mts_typeahead.bundle.js"></script>
<script src="mts_bootstrap/3.3.5/bootstrap.min.js"></script>
<link href="mts_bootstrap/3.3.5/bootstrap.min.css" rel="stylesheet" />
<link href="mts_bootstrap/3.3.5/bootstrap-theme.min.css" rel="stylesheet" />
<script src="mts_bootstrap-tagsinput.js"></script>
<link href="mts_bootstrap-tagsinput.css" rel="stylesheet" />
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/
I can't link my CSS or other files to my HTML. I always get the error:
Failed to load resource: net::ERR_FILE_NOT_FOUND
And the strange thing is it works on the computer of my project partner. How is that possible? We have the same code.
This is the part of my code:
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/custom.css" rel="stylesheet">
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/register.js"></script>
<script src="/js/login.js"></script>
It's very difficult to know without seeing your directory structure. But it seems likely that removing the leading / from your file path will solve the issue. I'm willing to bet that you're unintentionally referencing an absolute path instead of a relative one.
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/register.js"></script>
<script src="js/login.js"></script>
The leading slash tells that you want to link the files from a root. If you were viewing this page on e.g. http://www.example.com the files will be linked from http://www.example.com/css/bootstrap.min.css, even if your current page is http://www.example.com/folder/folder/page.html.
Since you're only using Windows without webserver, the root is C://. A solution would be to use relative paths instead of absolute paths.
For example:
<link href="css/bootstrap.min.css" rel="stylesheet">
In the previous example the file you link (with relative paths) will be in http://www.example.com/folder/folder/css/bootstrap.min.css if your current page is http://www.example.com/folder/folder/page.html.
Your URLs use absolute paths (i.e. they start with /) which makes them relative to the root of the website.
This is excellent when you want to write links that:
Work anywhere on the website, even if the HTML is shared between pages with different numbers of / in the path segments as your main navigation is likely to be
Work in both a development environment and a production environment
In this case it is failing because your development environment doesn't involve a web server.
You are loading the files into the browser directly from your local hard disk without going through an HTTP server. This makes the root of your website be the root of your hard disk (instead of the folder you are keeping the files in).
The solution: Install an HTTP server and tell your browser to fetch the files from http://localhost.
This will provide other benefits, such as being able to test Ajax code in your development environment.
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.
I have created a mvc3 application which work fine locally. I work for a department where all websites sits under single url. when i deployed my website to test environment than page are coming up but all java script and content (images,css) folder path is not right.
I work for a department where all websites sits under single url eg https://abcd.test.hosts.network/application1 ,https://abcd.test.hosts.network/application2
When i check location of images it shows following path
http://abcd.test.hosts.network/Content/Images/Master/masterBannerLeft5.jpg
What should i do or how i should deploy my application to fix the problem of java script and content folder.
Are you using the following for referencing content files:
<link href="#Url.Content("~/content/css/normalize.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="#Url.Content("~/content/js/jquery.js")"></script>
rather than:
<link href="/content/css/normalize.css" rel="stylesheet" type="text/css" />
See http://msdn.microsoft.com/en-us/library/system.web.mvc.urlhelper.content.aspx for the details, it basically resolves the path within your application.