<link rel="stylesheet" href="/src/common/timeline/timeline.css">
<script defer src="/src/common/timeline/timeline-min.js"></script>
I want to place this to code in my project for compile and compress to save place and update speed.
But i have an error
How to do it correct?
Why not keep the file on same level as index html?
public/
index.html
timeline.js
timeline.css
And in index.html use like
<link rel="stylesheet" href="./timeline.css">
<script defer src="./timeline.js"></script>
If you want to keep the files somewhere else (say src folder) and manage using it using webpack, you can use copy-webpack-plugin
const CopyPlugin = require("copy-webpack-plugin");
plugins : [
// Some other plugins
new CopyPlugin([
{ from: "./common/timeline/timeline.css", to: "./timeline.css" },
{ from: "common/timeline/timeline.js", to: "./timeline.js" }
])]
And refer the files using the same code as before
<link rel="stylesheet" href="./timeline.css">
<script defer src="./timeline.js"></script>
Related
With Vite, using absolute paths in index.html results in them being transformed based on the base config, which is nice.
For instance my index.html contains this:
<script type="text/javascript" src="/config.js"></script>
And base is set to "/demo". The exported index.html will contain:
<script type="text/javascript" src="/demo/config.js"></script>
This is fine for most of my file but I would need to have a script loaded from the root of the server for a very specific thing. Is it possible to indicate to Vite to not change the path of a specific script tag? Like a preprocessor command? Like this:
<!-- #vite-ignore -->
<script type="text/javascript" src="/config.js"></script>
That would be nice!
I used an ugly fix:
<script type="text/javascript">
// We have to do it using javascript otherwise Vite modifies the path
var config = document.createElement('script')
config.type = 'text/javascript'
config.src = '/config.js'
document.head.appendChild(config)
</script>
For the first time I'm trying to use CodeMirror for template edition of my CMS. In the first page of http://codemirror.net there is the following sample:
<link rel="stylesheet" href="lib/codemirror.css">
<script src="lib/codemirror.js"></script>
<script>
var editor = CodeMirror.fromTextArea(myTextarea, {
lineNumbers: true
});
</script>
But on the GitHub page there isn't any codemirror.js file in the lib directory. How should I use this tool?
One way to get CodeMirror is to download it. You can get the file links from the CDN here: https://cdnjs.com/libraries/codemirror
You just have to put the CDN link in the script or link tag like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.css" />
My Folder structure is my Folder structure is and in one of the html pages i am adding scripts and link as below
WebContent
|-css(folder containing all css files)
|-js(folder containing all css files)
|-html pages(pages are stored directly under webcontent)
<script src="/BoardUI/WebContent/js/services.js"></script>
<script src="/BoardUI/WebContent/js/jquery.js"></script>
<script src="/BoardUI/WebContent/js/bootstrap.min.js"></script>
<script src="/BoardUI/WebContent/js/Operations.js"></script>
<link href="/BoardUI/WebContent/css/bootstrap.min.css" rel="stylesheet">
<link href="/BoardUI/WebContent/css/business-casual.css" rel="stylesheet">
Try removing /WebContent from your urls
<script src="/BoardUI/js/services.js"></script>
Use relative path like this. I believe main html file also be inside html folder.
<script src="../js/services.js"></script>
In normal web project, we have to inlcude js/css file like this:
<link type="text/css" rel="stylesheet" href="/css/main.css" />
<script type="text/javascript" src="/scripts/js/main.js"></script>
whenever we add a new css file or js file we have to add one more line.
In Meteorjs, its automatically taken care by Meteor itself, but for non-meteor project, can we do that?
for example, I just put any js file into js folder and I don't need to care about it anymore.
use the "browserify"
in the "package.json"
..."scripts": {
"build": "browserify public/javascripts/main.js > public/javascripts/main-build.js",....
in the "main.js"
var ObjectName = require('./another_file');
html
<script src="javascripts/main-build.js"></script>
another_file.js
ObjectName = function(){ ..... }
module.exports = ObjectName;
I was wondering if its possible to provide an alternate link if the CDN cannot be reached. For instance for bootstrap provide the tags to download from the CDN and if that cannot be reached provide the locally stored bootstrap:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- if cannot be downloaded -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
I would like to use this model because browsers cache CDN files so that speed could be improved by using this (also their download times are probably better than my servers). Though on the off chance that someone is connecting via the local network but not connected to the internet and does not have one of these cached versions I would like an alternative. Is this possible?
http://eddmann.com/posts/providing-local-js-and-css-resources-for-cdn-fallbacks/
That link answers both parts of the question.
For your example, with fallback.js:
HTML:
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
JS:
cfg({
"libs": {
'css$bootstrap': {
'exports': '.col-xs-12',
'urls': 'css/bootstrap.min.css'
},
'bootstrapjs': {
'urls': [
'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js',
'js/bootstrap.min.js'
]
}
}
});
req(function(css$bootstrap, bootstrapjs){ //Everything is loaded });
It appears the article above is a bit outdated on the fallback.js API, so I've included the example based on current state. https://github.com/dolox/fallback/blob/master/README.md
I just used this for a site i've been building lately, let me know if this is what you had in mind:
<script type="text/javascript" async src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="/path/to/file"><\/script>')
</script>
Perhaps you can use something similar for your bootstrap loading, i'll look more into it in the men time, let me know if it helps.
Edit:
Also found this thread question someone else made, could be of use:
how to fallback twitter-bootstrap cdn to local copy
For the css part, see the answer here: How to implement a CDN failsafe for css files?
For the js part, see: Best way to use Google's hosted jQuery, but fall back to my hosted library on Google fail
TL;DR:
<link rel="stylesheet" type="text/css" href="cdnurl/styles.css" onload="alert('loaded')" onerror="javascript:loadCSSBackup()" />
<script type="text/javascript>
function loadCSSBackup(){
var css = document.createElement("link")
css.setAttribute("rel", "stylesheet");
css.setAttribute("type", "text/css");
css.setAttribute("href", 'backup/styles.css');
document.getElementsByTagName("head")[0].appendChild(css);
}
</script>
For loading a fallback JS, you can use (taken from the answer above):
<script type="text/javascript" async src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="/path/to/file"><\/script>')
</script>