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?
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'
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 want to see how some changes in my Django app will interact with an HTML page, but I don't want to deploy them until I test.
Here's my naive attempt, which doesn't render anything inside the iframe, even though that link works in its own tab.
HTML file:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js">
</script>
<div class="frame">
<img id="logo" src="images/Logo.png"/>
<iframe id="primaryVideo" src="http://127.0.0.1:8000/app/1/">
<p> Your browser does not support iframes. </p>
</iframe>
</body>
</html>
Cross-origin resource sharing was the problem. You can check if this affects you by checking the console or network tab.
All I had to do was add my localhost address to the ALLOWED-HOSTS field in settings.py of my Django app.
I am going through the Augular course at edX. For one of the labs, I launched a file D:\Documents\Node.js\angularcourse\index.html. It works fine in Edge. However, in Chrome I get:
Failed to load file:///D:/Documents/Node.js/angularcourse/app/main.js: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
Isn't main.js on a path that is below the location of the running file?
The source calling main.js in inside zone.js and my index.html is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Angular 4.x Application</title>
<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="systemjs.config.js"></script>
<script>
System.import('app').catch(function (err) { console.error(err); });
</script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<app>
Loading...
</app>
</body>
</html>
If I launched Chrome with --disable-web-security then it works ok.
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.