Installed atom-live-server using atom IDE
Using atom IDE, launching atom-live-server for an html page,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Classes</title>
</head>
<body>
<script src="code.js"></script>
</body>
</html>
where code.js is,
var Greeter = /** #class */ (function () {
function Greeter(message) {
this.greeting = message;
}
Greeter.prototype.greet = function () {
return "Hello, " + this.greeting;
};
return Greeter;
}());
var greeter = new Greeter("world");
console.log(greeter.greeting);
gives below error in console,
Live reload enabled.
Failed to load resource: `http://127.0.0.1:3000/favicon.ico` the server responded with a status of 404 (Not Found)
Why live-reload server searching for resource favicon.ico?
Just Install "npm install -g live-server" into cmd . then goto your project like cd your project folder name. then run the command "live-server" into cmd. it will automatically open the browser and make your project live reload. No need to atom-live-server or any editor live-reload. Because sometimes atom-live-server doesn't work properly. I personally use it all of my projects. You can try it.
Related
I started getting this error in a lot more complicated script and after a while I tried this extremely simple case. When I click the button I get the error: NetworkError: Connection failure due to HTTP 500
and of course I get the same thing in the console. I've moved it to another file and the error goes away.
gs:
function runTwo() {
SpreadsheetApp.getUi().showModelessDialog(HtmlService.createHtmlOutputFromFile('test'),'Title');
}
function getMessage() {
return 'Hello World';
}
html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div id='msg1'></div>
<input type="button" value="Click Me" onClick="iveBeenClick();" />
<script>
function iveBeenClick() {
google.script.run
.withFailureHandler(msg=>{document.getElementById("msg1").innerHTML=msg;})
.withSuccessHandler(msg=>{document.getElementById("msg1").innerHTML=msg;})
.getMessage();
}
</script>
</body>
</html>
Just in case it matters, this file has a webapp deployed that works with a Gmail Addon to delete unwanted emails. And here's that code:
function doGet(e) {
Logger.log('query params: ' + Utilities.jsonStringify(e));
if(e.queryString !=='')
{
switch(e.parameter.mode){
case 'dable':
deleteAllBlackListedEmails2();
return ContentService.createTextOutput("delete black list Done!!!!");
break;
case 'append':
const length=appendToBlackList({deletes:e.parameter.bls});
return ContentService.createTextOutput(length);
break;
case 'length':
return ContentService.createTextOutput(getBlackListLength());
break;
default:
return ContentService.createTextOutput("<h1>Unknown Command: " + e.parameter.mode);
}
}else{
return ContentService.createTextOutput("No Query String");
}
}
I'd like to know what the problem is. But I don't know where to go from here. I could certainly live without knowing and it doesn't seem to be affecting the performance of the other functions but it does impact my ability to built interactive tools for analyzing my data because I can't use google.script.run on any of my dialogs. Anyway I thought I'd ask and see if anyone else might be able to get it to fail.
New Information
Problem went away when I removed a library that I just installed. What should I looked for in that library?
The Fix
Because I was unfamiliar with the new dialog I chose to use the head deployment and I really wanted version 31. I don't know why this causes such an error but the script seems to be back to normal now. I was lucky this time.
I just wanted to share with everyone a simple way to avoid the HTTP 500 problem described above. It's fairly simple to reproduce and looking back upon it I can see now that it occurred because I was unfamiliar with the new editor and I made the simple error of not selecting a version. Instead I left it the head deployments which is a problem.
This is my minimum complete verifiable example.
I created a simple library with only one function and I called it the HTTP500Library
The Function:
function selectColumnsSkipHeader() {
var ss=SpreadsheetApp.getActiveSpreadsheet();
var sht=ss.getActiveSheet();
var rng=sht.getActiveRange();
var rngA= sht.getActiveRange().getA1Notation().split(':');
var ul=rngA[0].replace(/\d+/,'');
if(rng.getNumColumns()>1) {
var lr=rngA[1].replace(/\d+/,'');
}
else {
lr=ul;
}
var rngs=ul + rng.getRow() + ':' + lr;
var outrng=sht.getRange(rngs);
outrng.activate();
}
Then I deployed and actually due to a couple of stupid mistakes I have a couple of deployments
Then I created another spreadsheet called the HTTP500 Problem and I put this code into it:
Code.gs:
function onOpen() {
SpreadsheetApp.getUi().createMenu('My Tools')
.addItem('Simple Dialog', 'runTwo')
.addToUi();
}
function runTwo() {
SpreadsheetApp.getUi().showModelessDialog(HtmlService.createHtmlOutputFromFile('problem'),'Title');
}
function getMessage() {
return 'Hello World';
}
HTML:
function iveBeenClick() {
google.script.run
.withFailureHandler(msg=>{document.getElementById("msg1").innerHTML=msg;})
.withSuccessHandler(msg=>{document.getElementById("msg1").innerHTML=msg;})
.getMessage();
}
</html><!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div id='msg1'></div>
<input type="button" value="Click Me" onClick="iveBeenClick();" />
<script>
function iveBeenClick() {
google.script.run
.withFailureHandler(msg=>{document.getElementById("msg1").innerHTML=msg;})
.withSuccessHandler(msg=>{document.getElementById("msg1").innerHTML=msg;})
.getMessage();
}
</script>
</body>
</html>
After setting up the problem I tested the dialog that I just created and it worked fine with no problems.
Then I added the library that I just created but because I was unfamiliar with the new editor I mistakenly chose the head deployment. In other words I didn't select a version.
I ran the dialog again and this time I recieved the Network Connection problem with the HTTP 500 error.
The next step should have been to realize that I didn't select the correct version and return to the dialog and do so and that would have fixed the problem.
So I guess the Network connection that cause the problem was the connection to the library. So don't forget to pick the appropriate deploy of your libraries when you install them.
Thank for all the help
I trained a custom object detection model using Google Cloud AutoML and exported the model as a TensorflowJS package.
However, when I try running the model using the HTML deployment example they have here https://cloud.google.com/vision/automl/object-detection/docs/tensorflow-js-tutorial?hl=en_US, it does not seem to work.
My tensorflowjs package from the export (model.json, dict.txt, group1-shard1of3,group1-shard2of3, group1-shard3of3)
are in the same directory as the index.html. I also have an index2.html. In index.html I use the same
imports for tfjs and tfjs-automl as the example here. In the index2.html I use CDN sources for tfjs and tfjs-automl.
The create web app example I followed is : https://github.com/tensorflow/tfjs/blob/master/tfjs-automl/code_snippets/object_detection.html
My repo with my custom object detection model is: https://github.com/mmmwembe/automl-tensorflowjs.git including the tensorflowjs model package and the test-images.
My Index.html file is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cards AutoML Model - TensorflowJS</title>
</head>
<body>
<script src="https://unpkg.com/#tensorflow/tfjs"></script>
<script src="https://unpkg.com/#tensorflow/tfjs-automl"></script>
<img id="test-image" src="test-images/test-image-01.jpg">
<script>
async function run() {
const model = await tf.automl.loadObjectDetection('model.json');
const img = document.getElementById('test-image');
const options = {score: 0.5, iou: 0.5, topk: 20};
const predictions = await model.detect(img, options);
// [END load_and_run_model]
console.log(predictions);
// Show the resulting object on the page.
const pre = document.createElement('pre');
pre.textContent = JSON.stringify(predictions, null, 2);
document.body.append(pre);
}
run();
</script>
</body>
</html>
What am I missing here?...I've run this with Chrome browser using Live Server in vscode editor as well as with nodejs using http-server -p 8000
I have a Play application. The UI of the application is in Angular. I have created a folder ui which is the top level Angular directory.
build.sbt
`ui-dev-build` := {
implicit val UIroot = baseDirectory.value / "ui"
if (runDevBuild != Success) throw new Exception("Oops! UI Build crashed.")
}
def runDevBuild(implicit dir: File): Int = ifUiInstalled(runScript("npm run build"))
package.json
"build": "ng build --output-path ../public/ui",
When the Angular application is build, I transfer the output to the public folder of the Play framework. From there, Play transfers the contacts of the public folder to target folder for deployment. In the index.html (homepage html file), I access angular by including the scripts created in Angular build.
<script src="#routes.Assets.versioned("ui/runtime.js")" type="text/javascript"></script>
<script src="#routes.Assets.versioned("ui/vendor.js")" type="text/javascript"></script>
<script src="#routes.Assets.versioned("ui/styles.js")" type="text/javascript"></script>
<script src="#routes.Assets.versioned("ui/main.js")" type="text/javascript"></script>
<script src="#routes.Assets.versioned("ui/scripts.js")" type="text/javascript"></script>
This works fine.
I want to use ng-ace2-editor in my application - https://github.com/fxmontigny/ng2-ace-editor. I have added it in package.json - "ng2-ace-editor": "0.3.9" and I can see that ng2-ace-editor directory is present in node_modules.
When I run the application, I get error
GET http://localhost:9000/mode-html.js net::ERR_ABORTED 404 (Not Found)
exports.loadScript # index.js:3802
exports.loadModule # index.js:4174
setMode # index.js:10152
push../node_modules/ng2-ace-editor/src/component.js.AceEditorComponent.setMode
I can't understand how to make my application find mode-html.js. The file is present at location "./node_modules/ace-builds/src-min/mode-html.js. I have added this path in "script":[] of package.json but I still get the error.
"scripts":[
"./node_modules/ace-builds/src-min/ace.js",
"./node_modules/ace-builds/src-min/theme-eclipse.js",
"./node_modules/ace-builds/src-min/mode-html.js"
]
Interestingly, things work if I include ace.js in the homepage file
<script src="#routes.Assets.versioned("ui/runtime.js")" type="text/javascript"></script>
<script src="#routes.Assets.versioned("ui/vendor.js")" type="text/javascript"></script>
<script src="#routes.Assets.versioned("ui/styles.js")" type="text/javascript"></script>
<script src="#routes.Assets.versioned("ui/main.js")" type="text/javascript"></script>
<script src="#routes.Assets.versioned("ui/scripts.js")" type="text/javascript"></script>
<script src="#routes.Assets.versioned("javascripts/common/vendor/ace/src-min/ace.js")" type="text/javascript"></script> <!-- this makes things work-->
So I know that issue is that my mode-html.js file is not getting served and most likely it is the path resolution issue but I can't figure out what is it.
Further analysis shows that the following code in ace.js causes the error.
exports.loadModule = function(moduleName, onLoad) {
var module, moduleType;
if (Array.isArray(moduleName)) {
moduleType = moduleName[0];
moduleName = moduleName[1];
}
try {
module = require(moduleName);
} catch (e) {}
if (module && !exports.$loading[moduleName])
return onLoad && onLoad(module);
if (!exports.$loading[moduleName])
exports.$loading[moduleName] = [];
exports.$loading[moduleName].push(onLoad);
if (exports.$loading[moduleName].length > 1)
return;
var afterLoad = function() {
require([moduleName], function(module) {
exports._emit("load.module", {name: moduleName, module: module});
var listeners = exports.$loading[moduleName];
exports.$loading[moduleName] = null;
listeners.forEach(function(onLoad) {
onLoad && onLoad(module);
});
});
};
if (!exports.get("packaged"))
return afterLoad();
net.loadScript(exports.moduleUrl(moduleName, moduleType), afterLoad);
reportErrorIfPathIsNotConfigured();
};
var reportErrorIfPathIsNotConfigured = function() {
if (
!options.basePath && !options.workerPath
&& !options.modePath && !options.themePath
&& !Object.keys(options.$moduleUrls).length
) {
console.error(
"Unable to infer path to ace from script src,",
"use ace.config.set('basePath', 'path') to enable dynamic loading of modes and themes",
"or with webpack use ace/webpack-resolver"
);
reportErrorIfPathIsNotConfigured = function() {};
}
};
Why does explicitly calling <script src="#routes.Assets.versioned("javascripts/common/vendor/ace/src-min/ace.js")" type="text/javascript"></script> make the code work. Should this script be already available in ui/scripts.js as per Angular packaging method https://upgradetoangular.com/angular-news/the-angular-cli-is-a-great-way-to-build-your-angular-app-but-what-it-does-can-be-a-mystery-what-are-those-files-it-generates/?
I finally was able to make my code work. My setup is different. I build my Angular application and the it is served from my Play server. The angular build is stored in Play's /public/ui folder. The requests should be in format /assets/ui/.. which gets mapped to /public/ui/... due to a rule in Play routes file
GET /assets/*file controllers.Assets.versioned(path="/public", file: Asset)
When I ran the code, I got error.
Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:9000/worker-javascript.js' failed to load.
at blob:http://localhost:9000/3df21e42-fecb-4026-8bd6-f2b0d1d0540a:1:1
Earlier, I also got error Unable to infer path to ace from script src, use ace.config.set('basePath', 'path') to enable dynamic loading of modes and themes or with webpack use ace/webpack-resolver
It seems ng-ace-editor imports .js scripts (theme, mode, worker) based on the theme and mode of the editor. The theme and mode js files can be included in scripts.js but some worker-.js files can't be (I don't know why, maybe because worker ones are loaded dynamically using importScript.
The scripts section in Angular.json is (this will all get bundled in scripts.js in Angular's final bundle)
"scripts": [
"./node_modules/ace-builds/src/ace.js",
"./node_modules/ace-builds/src/theme-eclipse.js",
"./node_modules/ace-builds/src/theme-monokai.js",
"./node_modules/ace-builds/src/mode-html.js"
]]
To include worker-.js files, I added this rule because it seems angular-cli can't load from node_modules. So I had to copy the files from node modules to root of my ui build - How to include assets from node_modules in angular cli project
"assets": [
"src/assets",
"src/favicon.ico",
{
"glob": "**/*",
"input": "./node_modules/ace-builds/src/",
"output": "/"
}
],
When I executed the code, I found error that http://localhost:9000/worker-javascript.js can't be loaded. I realised that my files are loaded in /assets/ui/ path and not in the server's root directory. So I set the basepath to /assets/ui in the component's .ts file
import * as ace from 'ace-builds/src-noconflict/ace';
ace.config.set('basePath', '/assets/ui/');
ace.config.set('modePath', '');
ace.config.set('themePath', '');
In summary
basePath seem to be what is used to load scripts dynamically (eg worker scripts)
modePath and themePath are / as the mode and theme scripts are bundled in scripts.js and are available at root level
need to copy worker-.js files outside node_modules as angular_cli can't copy assets from node_modules
I am new to API methodology so sorry for asking such silly question which it may be.I am running Windows 10 on my machine and have setup a Ubuntu VM on Oracle VM VirtualBox. I want to hit the url in AJAX/REST way to get the JSON.I am able to get that JSON data in browser when I am hitting the url within VM environment. How can I accomplish the same via desktop?
I am running a separate server utility on VM which accepts the following url
localhost:8998/sessions
and it provides me data in form of JSON.
I have written the following code with help of W3Schools.
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "192.168.56.780:8998/sessions", true);
xhttp.send();
}
</script>
</body>
</html>
This should return json file in output in the same way as that when I run in browser in VM environment but no output is there on it in specified section.
UPDATE:
I have made changes in "Network" settings of VM making Adapter 2 as below and started the image:
Now I am able to putty it through new IP address 192.168.56.780 assigned automatically by it.Will this solve the above problem.
I'm trying to play around with sockets. I created a web server in node:
var http = require("http");
var server = http.createServer(function(req,res){
console.log("server has been created");
res.writeHead(200,{"Content-type:": "text/plain"});
res.end("Welcome to my supa' nodejs app");
}).listen(1337);
console.log("Server running at 127.0.0.1:1337");
var io = require("socket.io").listen(server);
io.sockets.on("connection", function(socket){
socket.on("input_written",function(){
console.log("someone clicked the button");
});
});
I also have a html file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html lang="en">
<head>
<title>Home page</title>
</head>
<body>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io.connect("http://localhost:1337");
function clickedButton()
{
socket.on("connect",function(){
socket.emit("input_written");
});
}
</script>
<button type="button" onclick="clickedButton()">Click me</button>
</body>
</html>
What I'm trying to achieve is when I press that button my console logs "someone clicked the button". However at the moment nothing happens. I'm not sure what I'm missing
UPDATE
As #Zub recommended I added
console.log("clicked");
right before the socket.emit();
I checked the console and this is the output:
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/socket.io/socket.io.js
Uncaught ReferenceError: io is not defined (index):11
Uncaught TypeError: Cannot call method 'on' of undefined
Since you bind node server on 1337, you have to point that port when you load socket.io.js script.
So try to replace
<script src="/socket.io/socket.io.js"></script>
with
<script src="http://localhost:1337/socket.io/socket.io.js"></script>
Edit
You should also initialize client socket.io connection beyond clickedButton function and leave just socket.emit("input_written"); in it.
The url in your browser needs to match the socket connection url. You have localhost in your io.connect, so make sure the url in your browser reads http://localhost/. If you connect to http://127.0.0.1/ in your browser then it won't work.