and then show me message can't reach that page.
this is the launch.json code:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "msedge",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}
I'm trying to test the code.
I have index.html file, style.css and app.js
I see it's trying to "Launch Chrome against localhost" then what should I do to test my code if it's working?
the error message:
this is the index.html code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Maps Api</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<h1>Google Maps</h1>
<div id="map"></div>
<script defer
src="https://maps.googleapis.com/maps/api/js?key=I HAVE A KEY&callback=initMap">
</script>
<script src="/app.js"></script>
</body>
</html>
the style.css
#map
{
height: 700px;
width: 100%;
}
the app.js
function initMap()
{
var options =
{
center: {las: 38.3460, lng:-0.4907 },
zoom: 8
}
map = new google.maps.Map(document.getElementById("map"), options)
}
I want to run it and test it like on a real website.
I have a site on wix already so I wonder if I have to test it as a real site on my wix site or I can use only the visual studio code?
I tried to follow this tutorial and at minute 13:22 he just types it and save it and it's showing google map.
on minute 5:07 when I ran it showed my Google Maps like in the video tutorial but after that it's showing me that error can't reach that page.
https://www.youtube.com/watch?v=uPhWSyRqQDA&t=801s
Related
I can’t figure out what the problem is .__.
Liveserver extension does not react on html/css changes
This line in html is present `
<meta charset="UTF-8">
Here is my settings (cant post image):
{
"files.autoSave": "afterDelay",
"liveServer.settings.AdvanceCustomBrowserCmdLine": "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
"liveServer.settings.useWebExt": true,
"liveServer.settings.fullReload": true,
"liveServer.settings.ChromeDebuggingAttachment": false,
"liveServer.settings.wait": 3,
"liveServer.settings.CustomBrowser": "chrome",
}
here is markup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
test
</body>
</html>
Updated question shows complete HTML example that should work with default preferences. Presumably the problem lies in the
"liveServer.settings.useWebExt": true,
preference: if the browser you are starting does not have installed required Live Server - Web Extension and if your preferences do not adhere to Setup Documentation, then reloads will not be triggered according docs.
Frankly, I was not able to set it up to work with web extension so I've either missed some detail there or it is a bug probably.
Plus, Preferences documentation tells that Web Extension approach should even work with head- and body-less documents.
liveServer.settings.useWebExt: : If it is true, Live Reload will be fully controled by the Live Server Web Extension. And also, it does not matter if your HTML have <body> tag or not, Live Reload will work for every file. :smile:
Default is false
Original question included just first the HTML example (and I've missed aforementioned documentation part) so it seemed that problem might be that uch empty file does not work with the Live Server (ritwickdey.LiveServer) extension's "Live Reload" feature, and it even warns you about that in a notification bubble:
Live Reload is not possible without a head or body tag.
I understand, don't show again
So use more complete HTML skeleton with those optional <head> and <body> tags if you want to see it live-reloaded upon save with this extension.
This morning, I was able to view vscode intellisense suggestions with PIXI.js.
My index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Fun with PIXI</title>
<script src="node_modules/pixi.js/dist/pixi.min.js"></script>
</head>
<body>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
My index.js:
const app = new PIXI.Application();
document.body.appendChild(app.view);
Serving the file and running index.js is fine. I am just so annoyed that I lost intellisense suggestions for PIXI.js (or any third party libraries). I still do see Intellisense suggestions working for DOM APIs (i.e. document methods, etc...)
Currently I am securing the front-end side of a FIORI application. When reading the official documentation I have seen that it is possible to load a FIORI application in a frame on a trusted domain. For that we would have to implement a whitelist. The official documentation stipulates that the following steps have to be implemented:
Call the service:
<meta name="sap.whitelistService" content="Whitelist.js">
Set the whitelist
jQuery.sap.addUrlWhitelist(undefined, "https://webide-ad232er4.dispatcher.hana.ondemand.com/");
jQuery.sap.validateUrl("https://webide-ad232er4.dispatcher.hana.ondemand.com/");
Set the frameOptions to trusted
data-sap-ui-frameOptions="trusted"
After performing all these steps as stipulated by the official documentation, through the SAP Web IDE I launch my application in a frame and normally all actions can be performed. However this is not the case, no actions can be performed and seems like the Whitelist service doesn't recognized my domain.
Is somebody able to provide guidance on how to correctly implement this?
P.S: This is the official documentation i used: https://help.sap.com/saphelp_uiaddon10/helpdata/en/62/d9c4d8f5ad49aa914624af9551beb7/content.htm
EDIT
Index.html
<!DOCTYPE HTML>
<html>
<!-- Copyright (c) 2014 SAP AG, All Rights Reserved -->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="sap.whitelistService" content="ui.2sp.mm.purchorder.approve.uis2pmmpurchorderapproveExtension.Whitelist.js" />
<title>Extension Project in UShell Sandbox</title>
<script type="text/javascript">
window["sap-ushell-config"] = {
defaultRenderer : "fiorisandbox",
services: {
NavTargetResolution: {
// navigation target resolution service is configured to resolve the empty location hash to the application
config : {
resolveLocal : [ {
"linkId" : "",
resolveTo : {
additionalInformation : "SAPUI5.Component=ui.s2p.mm.purchorder.approve.uis2pmmpurchorderapproveExtension",
applicationType : "URL",
url : "./" + window.location.search // pass URL query parameters to application
}
}]
}
}
}
};
</script>
<script src="test-resources/sap/ushell/bootstrap/sandbox.js" id="sap-ushell-bootstrap"></script>
<script id="sap-ui-bootstrap"
src="resources/sap-ui-core.js"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-compatVersion="1.16"
data-sap-ui-frameOptions="trusted"
data-sap-ui-resourceroots='{"ui.s2p.mm.purchorder.approve.uis2pmmpurchorderapproveExtension": "./"}'>
</script>
<!-- Create the unified shell default renderer control and add it to the page -->
<script type="text/javascript">
sap.ui.getCore().attachInitEvent(function() {
sap.ushell.Container.createRenderer().placeAt("content");
});
</script>
</head>
<!-- UI Content -->
<body class="sapUiBody" id="content">
</body>
</html>
Whitelist.js
jQuery.sap.addUrlWhitelist("https", "uis2pmmpurchorderapproveextens-ad232er4.dispatcher.hana.ondemand.com/?hc_reset");
jQuery.sap.validateUrl("uis2pmmpurchorderapproveextens-ad232er4.dispatcher.hana.ondemand.com/?hc_reset");
Kinds regards,
Zakaria
I have saved the source of sample AMP video http://amp.azure.net/libs/amp/latest/samples/dynamic_setsource.html locally and trying to play video. It works in IE and Edge but not in chrome. if i host this file it works.
Can you please help me understand what is wrong here?
You can try running script in IE an Chrome to see the difference.
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Skill Cloud</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://amp.azure.net/libs/amp/1.7.1/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
<script src="http://amp.azure.net/libs/amp/1.7.1/azuremediaplayer.min.js"></script>
</head>
<body>
<h1>Skill Cloud</h1>
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" tabindex="0"> </video>
<script>
var myOptions = {
autoplay: true,
controls: true,
width: "100%",
height: "auto",
poster: ""
};
var myPlayer = amp("azuremediaplayer", myOptions);
myPlayer.src([{ src: "http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest", type: "application/vnd.ms-sstr+xml" }, ]);
</script>
<footer>
<br />
<p>© Microsoft Corporation 2016</p>
</footer>
</body>
</html>
Thanks
When you run the code locally, Chrome opens your index.html with the file:// protocol. Due to Chrome's security policy local resources aren't allowed to be loaded and that's what's preventing playback. (If you check out your JavaScript console, I bet you'll see a similar error.)
To workaround this, you can use an IDE like Visual Studio or WebMatrix that will automatically set up a local web server for you so you can access your page with http://localhost:8000 or whichever port you prefer.
If you don't want to use VS or WebMatrix, you could also use Python's Simple HTTP server. Hope this helps and happy coding :)
I'm using the trial webide and trying to run myqunittest.qunit.html from the /test-resources folder. by using the url /test-resources/myqunittest.qunit.html. However it simply returns a 404 error whenever I attempt to run it.
Is this a problem with defining the resources? I don't understand how, for example, view/Main.view.xml can be found but not anything in the test-resources folder (I've tried just creating a simple js or html file containing a single line and it still 404'd).
I've copied the page directly from the qunit help page, QUnit Testing Fundamentals, this code seems to imply it should just work without any reference to the rest of the app.
I've tried various combinations of sap.ui.localResources and data-sap-ui-resourceroots in both html files to no avail.
My folder structure is as follows:
myapp
test-resources
myqunittest.qunit.html
view
Main.controller.js
Main.view.xml
index.html
myqunittest.qunit.html
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script id="sap-ui-bootstrap"
type="text/javascript"
src="resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-noConflict="true">
</script>
<link rel="stylesheet" href="resources/sap/ui/thirdparty/qunit.css" type="text/css" media="screen" />
<script type="text/javascript" src="resources/sap/ui/thirdparty/qunit.js"></script>
<script type="text/javascript" src="resources/sap/ui/qunit/qunit-junit.js"></script>
<script type="text/javascript" src="resources/sap/ui/qunit/QUnitUtils.js"></script>
</head>
<body>
<div id="qunit"></div>
</body>
</html>
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-resourceroots='{"myapp": "./"}'
data-sap-ui-theme="sap_bluecrystal">
</script>
<script>
sap.ui.localResources("view");
var app = new sap.m.App({initialPage:"idMain"});
var page = sap.ui.view({id:"idMain", viewName:"myapp.view.Main", type:sap.ui.core.mvc.ViewType.XML});
app.addPage(page);
app.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
In your index.html you are loading ui5 relatively to the index.html in a resources folder
so on your server there is another folder
myapp
resources
sap-ui-core.js
test-resources
myqunittest.qunit.html
view
Main.controller.js
Main.view.xml
index.html
The problem is, that you are loading the core also relatively to your test-resources. You probably need to go 1 directory up.
so in myqunittest.qunit.html
change the bootstrap to
<script src="../resources/sap-ui-core.js"
Best regards,
Tobias
The SAP WebIDE adds neo-app.json to a project you create. It contains this entry:
{
"path": "/test-resources",
"target": {
"type": "service",
"name": "sapui5",
"entryPath": "/test-resources"
},
"description": "SAPUI5 Test Resources"
}
This is interfering with creating my own test-resources folder (one doesn't already exist in the project), and was causing the 404 error. Removing this entry has fixed my problem.