I was working on some project and here is "index.html" file of my Angular project.
<!doctype html>
<html ng-app="templateApp">
<head>
<meta charset="utf-8">
<title> MEAN project template </title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- including App scripts -->
<!-- JQuery -->
<script type="text/javascript"
src="bower_components/jquery/dist/jquery.min.js"></script>
<!-- App scripts -->
<script type="text/javascript" src="configs/app_setup.js">
</script>
</head>
<body>
</body>
</html>
and my project hierarchy as following:
client (contains: configs(folder) & index.html )
bower_components
my curious question here: what are the rules for script tags i expected the above "bower_components" path should not work but it works well.
and the above path and the following one are working without problems, so how that happened although they are different ??!!
<script type="text/javascript"
src="../bower_components/jquery/dist/jquery.min.js">
</script>
it seems by default it looks into the root project directory, and then check for relative paths.
This one would make the directory go up one level from the directory that your index.html is located in
<script type="text/javascript"
src="../bower_components/jquery/dist/jquery.min.js">
</script>
Where as the following one would make the folder bower_componets be in the same directory as your index.html
<script type="text/javascript"
src="bower_components/jquery/dist/jquery.min.js">
</script>
Related
I have a react app and I am using ms clarity for analytics. The docs say to set it up I need to use the javascript script tag in the head of the html. I am wondering if I can make an external file with the code and have access to the process.env.NODE_ENV variable?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- Make the page mobile compatible -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript">
if ('%NODE_ENV%' === 'production') {
MS CLARITY CODE
}
</script>
</head>
<body>
<div id="root"></div>
</body>
</html>
The node env variable is not working. I would like to have an external file that contains the clarity code and check if the app is in production so that it doesnt track changes when developing on localhost
**try using this**
<head>
<title>React App</title>
<script type="text/javascript">
console.log("%REACT_APP_TEST%") // OK
console.log("%NODE_ENV%") // development
</script>
</head>
and start server like this
'NODE_ENV=development npm start'
There's nothing fancy about the HTML, JS or CSS code. It all works fine if I embed the css inside the HTML file, but when linking to the external file it doesn't work.
Just uploaded it all to Digital Ocean, so I'm not sure if there are any special configurations I need to make to enable these external files to work.
Here's the HTML file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2>v1</h2>
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
I'm trying to run a Angular2 app from WAMP on my local pc.
I develop the app from the wamp/www folder and test it at different stages both from localhost:3000 and localhost/myapp (liteserver and wamp)
All works fine until i try to add <base href="/"> to Index.html right below the <head>.
At that point, only in Wamp i get the error: ReferenceError: System is not defined
Is there any workaround or fix to get past this error? (and move to the next one :) )
This is my Index.html.
<html>
<head>
<base href="/">
<title>Firebase</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
Update:
LiteServer working, Folder Structure, and main.ts:
WAMP, Index.html
I was just reading about the new angular2 router and i thought to try this:
<base href=".">
and it just works with no further errors!!
I can't tell why, but both wamp and liteserver work fine now, even though in all tutorials about router they all show this method: <base href="/">. I hope this will help someone else to waste less time on this silly thing then i did.
I have already an exsisting html file which use another librairies and stuff, I want to use in my new ionic application.
So I would like to use it as an ion-view. so I would like to know if it would be possible to include an html file in the ion-view ? which look like :
<ion-view>
<io-content>
</ion-view>
</ion-content>
this is the existing HMTL file where I use different libraries and css file :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="./assets/js/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css" />
<link href="./assets/css/ofc.css" rel="stylesheet" type="text/css" />
<script src="./assets/js/jquery-1.7.1.min.js"></script>
<script src="./assets/js/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="pouchdb-3.4.0.min.js"> </script>
<script type="text/javascript" src="blob-util.min.js"> </script>
<script type="text/javascript" src="moment.js"> </script>
<script src="properties.js"> </script>
</head>
<body>
<div data-role="page" id="p1">
</div>
<script src="core.js"></script>
</body>
</html>
Why would you do this? I believe this question comes from a problem you haven't described yet.
Normally all libraries used in an Ionic app are included in the index.html and not within each <ion-view> or <ion-content>. In these Ionic directives you only load the HTML needed for that view.
I suggest you start reading from the beginning:
Getting Started with Ionic
Ionic documentation
CodePen examples Ionic
I am using ExpressJS. My scripts or CSS will not load.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<title>Customer Info</title>
<link rel="stylesheet" href="/stylesheets/testing.css" type="text/css" media="screen" charset="utf-8"/>
<script type="text/javascript" src="/javascripts/jquery-1.9.1.js"></script>
<script src="/javascripts/jquery-ui-1.10.2.custom.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="/javascripts/testing.js"></script>
</head>
<body>
//body contents
</body>
</html>
I know the problem is not with the location. When I render this EJS view in express none of the scripts are loading. I can not understand why it would work for an almost identical view, but not this one. Any ideas?
Step 1
In your node.js file locate the part where you configure the express.
It would be like.
var express = require('express')
, app = express();
app.configure(function() {
//configure the express codes go here
}
in that check out the line of code where you configure the folder which serves the static files. like images,css, and js. I would be like.
app.use(express.static(__dirname + '/public'));
here in the above case public should be exactly the name of the parent folder which holds the stylesheets and javascripts folder that you mentioned in the above html.
like
--app.js
--package.json
--views/
--node_modules/
--public/
--stylesheets/
--testing.css
--javascripts/
--jquery-1.9.1.js
--jquery-ui-1.10.2.custom.js
--testing.js
Step 2
If the above is configured correctly then you can make sure
app.use(express.static(__dirname + '/public'));
in config comes ahead of
app.use(app.router);
so that you can make assure that your line is not ignored by a 404 route handler you written in the router.
Step 3
You can inspect the rendered page with Firebug or Chrome inspector and check in the networks tab what was the response you received for the js and css files you have mentioned.
As per you question it should be 404 file not found and if its something else you should update it in the question.
Step 4
If you still cant fix the issue then you have to update the question with the node.js codes you are using. So that we could look into it.
i believe it is that "/" in start of every src line which is not making it load. for example .. use them this way
<link rel="stylesheet" href="stylesheets/testing.css" type="text/css" media="screen" charset="utf-8"/>
<script type="text/javascript" src="javascripts/jquery-1.9.1.js"></script>
<script src="javascripts/jquery-ui-1.10.2.custom.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="javascripts/testing.js"></script>
well, these scripts and css files are in their respective folders and to reference to them, you just have to start the source from its name directly, e-g src="folder/script.css"
This was if folders are one level above from html file. for example
your index.html file is in folder1
your style.css file is in folder1 >> css
your script.js file is in folder1 >> scripts
then for this level, above suggestion will 100% work. If other types of levels are there, e-g
index.html is in folder1 >> folder2 >> index.html
style.css is in folder1 >> css
script.js is in folder1 >> js
then your src should look like
<link rel="stylesheet" href="./stylesheets/testing.css" type="text/css" media="screen" charset="utf-8"/>
<script type="text/javascript" src="./javascripts/jquery-1.9.1.js"></script>
<script src="./javascripts/jquery-ui-1.10.2.custom.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="./javascripts/testing.js"></script>
please note a "." dot in start. It means the code will reference the file from one folder behind. if the file is 2 folders behind, then use it two times, e-g ././folder1/css
hope that helps
You have to set expressJS to to use static links linking your assets or public folder that contain js and css folders.
express.static(__dirname + '/assets', { maxAge: 24*60*60*1000 }
Then use dots at the beginning of href links or simply add server url instead. e.g. :
<link rel="stylesheet" href="../css/test.css" type="text/css" >