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'
Related
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>
I'm building a one-page application using Vue.js and Webpack for bundling the client-side (HTML, JS, all in one file).
It seems that search engines, such as Google, are having trouble indexing the content, since it's only rendered through that bundle file, and doesn't exist on the html files (attached example).
My question is - how can I make Google index my app's content?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My App</title>
<link rel="stylesheet" type="text/css" href="dist/main.css">
</head>
<body>
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.3/vue-resource.min.js"></script>
<script src="dist/build.js?1500"></script>
</body>
</html>
I have a tomcat server project in intellij.
I have created in this project a client folder.
It contains an angular2 index.html template.
I run the tomcat from intellij and it's hosted with port 8880
Then I try to access localhost:8880/../client/index.html (simplified the path)
this is my html:
<!doctype html>
<html>
<head>
<base href="/">
<meta charset="utf-8">
<title>Ng2</title>
{{#unless environment.production}}
<script src="/ember-cli-live-reload.js" type="text/javascript"></script>
{{/unless}}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>Loading...</app-root>
{{#each scripts.polyfills}}
<script src="{{.}}"></script>
{{/each}}
<script>
System.import('system-config.js').then(function () {
System.import('main');
}).catch(console.error.bind(console));
</script>
</body>
</html>
but I see this content:
{{#unless environment.production}} {{/unless}} Loading... {{#each scripts.polyfills}} {{/each}}
if i use npm start and navigate to localhost:4800 I see the html as I expect it.
How can I host the server and client both on port 8880 so the client can post to the server with the same port?
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 been trying to get the documentation from http://d3-geomap.github.io/ to work but somehow it's not i can't find my mistake.
Here is my Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="d3-geomap/css/d3.geomap.css" rel="stylesheet">
<script src="d3-geomap/vendor/d3.geomap.dependencies.min.js"></script>
<script src="d3-geomap/js/d3.geomap.min.js"></script>
</head>
<body>
<div id="map"></div>
<script>
var map = d3.geomap()
.geofile('d3-geomap/topojson/world/countries.json');
d3.select('#map')
.call(map.draw, map);
</script>
My HTML File is in the root folder.
Okay if anyone else has the same problem as me - I solved it.
The thing is that windows has some security issues and it blocks some type of code. I couldn't find out the real reason but if u want it to work, just host it on a virtual web server (e.g. www.xampp.com) that did the job for me.