I have webpage that needs to run some computation on start up. I want to keep this computation on the server side so the client cannot access the source code. I discovered pico, a module that is supposed to be "a bridge between server-side python and client side JavaScript".
I have a simply test.py:
import pico
def hello():
return "Hello World"
My JavaScript is also simple:
pico.load("../../../test.py");
pico.main = function() {
var displayMessage = function(message){
console.log("hello2");
console.log(message);
}
test.hello(displayMessage);
}
"../../../test.py" is the relative location of the python script to the pico folder
I then run "python -m pico.server" on the command line. When I go to my web page, open inspector, and go to the console I get the error: "Uncaught SyntaxError: Unexpected token i". 'i' is presumably from the first line import. Note that this same error happens if I don't run the pico.server command.
Any help would be great, as well as suggestions for alternative methods of doing this serverside vs clientside.
I may have an answer for you, however I have not been able to replicate the same error.
pico.load does not seem to work when file extensions are included in the argument, this is due to the function being designed to load sub-modules directly (i.e. module.sub_module) as in the pico API:
pico.load(module, [callback])
Load the Python module named module. The module will be available as a global >variable of the same name.
Submodules may be loaded by using dotted notation e.g. module.sub_module
To make sure I included ".py" file extension on the pico test page I have been working on and it failed to load the module, so this may be a problem if you are using the file extension.
Another possible issue was mentioned in a comment by holderweb. In the first pico example HTML the file client.js is included in an external <script> tag, this includes the functionality required to use pico. So you must have something similar to the following tag in your index.html head section:
<script type="text/javascript" src="/pico/client.js"></script>
For more insight I would be interested in seeing what/if the server logs at command line when the error occurs, and also the contents of your index.html page. Hope this helped!
Related
I'm attempting to import a 3rd party SDK into a simple project with a very simple setup. I have an index.html file that looks like this:
<!DOCTYPE html>
<html lang="en-us">
<body>
<h1>SDK Test</h1>
<script type="module" src="/js/main.js"></script>
</body>
</html>
I have a main.js file that looks like this:
import MyAlgoConnect from '/#randlabs/myalgo-connect';
console.log("It Worked!");
I also have the #randlabs directory in my project running on an Apache server, so that in Apache's htdocs directory, it looks like this:
But I always get an error in my browser console that says:
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
I originally tried using <script src="/js/main.js"></script> in the index.html file, but it returned with the error:
Uncaught SyntaxError: Cannot use import statement outside a module (at main.js:3:1)
There's a whole bunch of different files and additional folders within the myalgo-connect folder, so when I try going to my local apache server at 127.0.0.1:8080/#randlabs/myalgo-connect in my browser it just returns an html document showing the contents of the folder, which is why I assume I'm getting an error in the first place.
According to the SDK's documentation, I think I'm following its Quick Start steps exactly: https://connect.myalgo.com/docs/getting-started/quickstart
I've been searching the internet for days trying to figure out why I can't get this to work. I've also asked a question on the associated discord server but haven't had a response. My experience with web development is very limited, so this is probably just an issue of inexperience on my part, but I cannot figure out what I'm doing wrong. If anyone can shed some light on this, I would be very grateful!
I recommend to setup basic node processor which then compiles application into js file.
https://vuejs.org/guide/quick-start.html
https://reactjs.org/docs/create-a-new-react-app.html
https://nextjs.org/docs/getting-started
I recommend also to setup the TypeScript as it helps a lot with data types and recommendations.
This is example how you can use the MyAlgoConnect by Randlabs (React): https://github.com/Diatomix/Diatomix-frontend/blob/dff9a531ceac4341a3780c004f2bc2206b255ed4/src/components/Authenticate.tsx#L163
Example how to use Algorand with Vue.js : https://github.com/scholtz/wallet
I have a frontend in HTML and JAVASCRIPT. I need to get value from nodejs file and display it in HTML label. So I create new node js file node.js as:
const Web3 = require('web3');
const web3 = new Web3('https://kovan.infura.io');
web3.eth.getBalance('0x9E632F36D8193a23ee76e7C14698aCF4b92869A2').then(console.log);
I include this file in script tag as:
<script src="node.js"></script>
First I want to look output in the console but it is giving an error
Uncaught ReferenceError: require is not defined
So, I try this code directly in HTML file within the script tag without including node file but still gives the same error.
Can somebody help me with this? I am new to use all this together.
Somehow, I managed to find a solution. I used browserify, which makes easy for me to run the nodejs code from my web app.
Browsers don't have the require method defined, but Node.js does. With Browserify you can write code that uses require in the same way that you would use it in Node.
browserify will recursively analyze all the require() calls in your app in order to build a bundle you can serve up to the browser in a single tag.
I referred this link: http://browserify.org/
I have an application where the output is written into a file (.py) by using javascript.
I'm using this application to write python script into the file. Now I want to run the python script automatically on cmd(Windows) right after the output was written.
Is there a way to do so ? Is it possible without using "NodeJS"
So apparently everything happens with a single click on the application.
Thanks.
Node js provides the child process module,
which you can use to basically spawn a child process from your js application.
since you have not shared any source code so i am not sure what your specific use case is but a basic way of spawning python script would be like this.
import { spawn } from 'child_process';
let scriptPath = './script.py' // path to your python script
var script = spawn('python', ['-u', scriptPath, arg1, arg2]); // arg1,arg2 can be any command line arguments required by your script or if not needed you can skip them.
script.stdout.on('data', data => {
console.log('Data: ', data.toString());
// implement your functionality here
});
you can similary bind on close and error events to your script and implement the functionality accordingly.
Why not storing your script in a script.py file? Why do you use .txt at all? With CMD and Python installed you should easily run .py scripts with a command line "python path/to/script.py", shouldn't you?
Edit: For checking out how to execute python on Node JS just use Google! Google is your friend! "execute python with node js" threw me this article: How to call python script from NodeJs
I can't seem to change any of my JavaScript files without restarting the server - it really kills a lot of the live-reloading fun of working in Phoenix. I don't do a ton of JavaScript, so I'm not sure if I'm doing something wrong.
Phoenix version: 1.2.0
Steps to reproduce:
Create a new project with mix phoenix.new foo
Create web/static/js/foo.js file.
In that file, write alert("Hello, world!");
In app.js, include import "web/static/js/foo" at the bottom.
Start Phoenix with mix phoenix.server and navigate to localhost:4000.
It doesn't matter how many times you refresh the page, you'll see an alert box with "Hello world!" every time, without fail.
Edit the foo.js message to be "Hello worlds!"
I expect that I'll still get an alert message with updated text, but the alert boxes stop appearing - altogether. They only start appearing again when I restart the server.
Is this intended behavior? A bug in Phoenix? Am I writing my JS code in a way that Brunch doesn't expect it? Is this a Babel issue? Should I be organizing my code differently?
Should add that I'm developing in Chrome on Linux - in case this might be a browser issue
Edit: I can't reproduce this exact issue anymore, but I'm still having issues with my non-toy project:
My original issue was in the app I'm actually developing - where I have global.jQuery = require("jquery") and global.bootstrap = require("bootstrap") in app.js. If I comment those two lines, save, and uncomment, I get a Javascript error in the browser: app.js:16Uncaught Error: Cannot find module 'jquery' from 'web/static/js/app.js'
Is this intended behavior? Yes.
A bug in Phoenix? No.
Am I writing my JS code in a way that Brunch doesn't expect it? Right you are.
Is this a Babel issue? Nope.
Should I be organizing my code differently? Probably.
Brunch (or Node.js or any other module bundler) expects relative path in import statement: it fails to resolve web/static/js/foo from web/static/js/app.js and does not mark foo.js as dependency of app.js (entry point). That is why it does not rebuild app.js when foo.js is changed. When Brunch is restarted, it completely rebuilds app.js, with latest foo.js (Brunch includes it because of joinTo.javascripts in config) version from the disk.
Specify relative paths (import "./foo") and prefer import jquery from ... over global.jquery = ...
Disable caching (if enabled) in your client (browser).
Disable caching (if enabled) in your server.
I have SDK 1.13 and I want to use pageload API to give the alert message when html form is loaded in firefox browser. but I'm getting an error on console: require is not defined.
I have linked cfx file of add on SDK to file system directory:
ln -s PATH_TO_SDK/bin/cfx ~/bin/cfx
Still, I am not able to solve this error. Here is my code (Included in XUL file):
var pageMod = require("sdk/page-mod");
pageMod.PageMod({
include: "*.html",
contentScript: 'window.alert("Page matches ruleset");'
});
I assume you've installed the SDK and have run bin\activate within your extension before trying cfx run, right?
You can't run this stuff from an XUL file, which is why require... wont work. All of this needs to be in a main.js (in the lib folder). You'll need to communicate via the content script that you'll write (in the data folder). When the html loads (I'd add a window.listener or something from the content script) you'll use port.emit("loaded") or something similar and then you'll have to listen in the main.js with something like addon.port("loaded",somefunction). There's a lot of good documentation on this!
XUL files is quite an opposite of SDK modules. SDK and XUL Comparison.