I made a UI using html and css that takes input as file path. What I need is now to enable my python file to take that path name and run the python script on the input file. How can I achieve this? I saw there is something called eel. but I need this app to be distributed so everyone who installs wont have a chrome installed to run in eel. Please provide me with different alternatives to link these two. I'm quite new to web app.
After some research in Eel and PyInstaller, I found it's quite easy. I tested these instructions in Windows and the example code is from Eel GitHub.
Environment Setup
Install pipenv package to setup a virtual environment:
$ pip install pipenv
Install eel, pyinstaller to virtual environment:
$ pipenv install eel pyinstaller
Due to this issue, we need to install setuptools==44.1.0:
$ pipenv install setuptools==44.1.0
Project Setup
Here is the file structure:
.
├── hello.py
└── web
├── favicon.ico
└── hello.html
The content of hello.py is:
import eel
eel.init('web')
#eel.expose
def say_hello_py(x):
print('Hello from %s' % x)
say_hello_py('Python World!')
eel.say_hello_js('Python World!')
eel.start('hello.html', size=(300, 200))
The content of hello.html is:
<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
<script type="text/javascript" src="/eel.js"></script>
<script type="text/javascript">
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
eel.expose(say_hello_js);
function say_hello_js(x) {
console.log("Hello from " + x);
}
say_hello_js("Javascript World!");
eel.say_hello_py("Javascript World!");
</script>
</head>
<body>
Hello, World!
</body>
</html>
Building
Run following command:
$ pipenv run python -m eel hello.py web --onefile --noconsole
You will see a hello.exe under dist folder.
Any more detail you can read the documents of Eel and PyInstaller.
but I need this app to be distributed so everyone who installs wont have a chrome installed to run in eel.
I think you can use Edge in Eel since Edge is installed in every Windows 10, or you may need to use other python GUI framework. Since you write you UI in html and css, I think is may not be possible to distribute without any browser.
Related
I have a simple express app which renders some config for the client bundle to use:
const config = config.get('client');
const HTML = `
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="client"></div>
<script>
window.config = ${JSON.stringify(config)}
</script>
<script src="/bundle.js"></script>
</body>
</html>
`;
res.status(200).send(HTML);
For production I want to host a static version of this on AWS s3. I want a static version of the html above with both the stringified config and the webpack bundle.js including the hash.
For this I think I need a small express server that pulls in a templated version of the html above which will get populated with the config and the webpack bundle name and then written as index.html in the dist folder.
I intend this script to be run from an npm script:
scripts: {
build-html: node render-static.js,
},
Once this has run the next step would be to upload it to an s3 bucket so that would require another node script that would need to run. I might end up with a final npm run deploy that runs:
npm run build-html && npm run-deploy-static
I'm not sure if there is a better / more accepted way of doing this sort of thing? Is it correct to be running two node scripts in order to be deploying a part of my app?
I am new to reactjs and trying to install babel to run babel code without serving HTTP file. By following the Package Manager I have installed it with browserify as:
$ npm install --save react react-dom babelify babel-preset-react
$ browserify -t [ babelify ] main.js -o bundle.js
After it I created the file .babelrc in the same root directory with following code
{ "presets": ["react"] }
And removed the HTTP babel-core source file as:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>React Tutorial</title>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<!-- removed https://npmcdn.com/babel-core#5.8.38/browser.min.js -->
</head>
<body>
<div id="content"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('content')
);
</script>
</body>
</html>
but when I access it from http://localhost/react/ this doesn't work.
You haven't included the code that's failing or the error message, so this is a guess.
The problem is that when you run browserify, it transpiles (converts) the code you specify from ES2015 to plain old Javascript. So, when you do this:
browserify -t [ babelify ] main.js -o bundle.js
You're converting the code in main.js and writing it to bundle.js.
So there are two problems with your code:
you never include bundle.js in your HTML file. You need to add <script src="build/bundle.js"></script> to load the code that you transpiled.
the code in your HTML <script> block is not touched by browserify. Your build step (running browserify) is working on scripts, not on HTML files. So that code never gets transpiled and fails when the browser tries to execute it.
The reason it works when you include babel-core in the HTML is because Babel has a special "live" transpilation mode which will transpile your code when the page is loaded, and this mode DOES get the code in the <script> block because it's all running on the user's browser.
I use Eclipse Mars (4.5.1) with Android SDK 24.1.1. on Windows 7. I am upgrading a set of Cordova Android apps (now targeted at API 23 - Android 6) because of Google’s warning of blocking updates to pre-4.1.1 apps.
My apps use web-server-based pages entirely apart from the assets / www / index.html file that apart for the Cordova default header code contains code of the form:
<script type="text/javascript">
window.location=http://mydomain/mypage.html;
</script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
Since Cordova 6.0.0 with Android 5.1.0 specifics now has a “Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities” default option in index.htm, I moved the one line of Jscript (window.location=http://mydomain/mypage.html) to a separate file (say ‘pageopen.js’), added it to assets/www/js via Import / File System, and added a reference to it in index.html
<script type="text/javascript" src="js/pageopen.js"></script>
All very straightforward…
However, when the app is run on the VDM, it fails saying that it cannot find index.js and res/xml/config.xml.
This failure is caused just by having the extra pageopen.js file in the js/ folder (I can remove the reference to it in index.html and the errors still occur). If I move pageopen.js to www/ (i.e. 'alongside' index.html), the app fails to find index.html instead!)
Having tried Refresh and Clean (Build automatically is ticked) with no effect, I am clearly doing something naïve and stupid. But what pls?
I started investigating jspm and stumbled across this issue.
I seriously search all over Google but could not find a simple answer or example.
How do you load CSS and fonts that come with it?
I tried to do <script>System.import('font-awesome/css/font-awesome.css')</script> but it does not work. It adds .js extension to the url and I get a 404. like this: font-awesome.css.js
I tried import 'font-awesome/css/font-awesome.css'; which does not work either.
So, for a jspm packages that contain css and fonts, how do you make them available to my application?
And what about the font files? Do I have to move them manually or get gulp to do it? How do you handle this in your jspm workflow?
Thanks
EDIT
Based on the given answer by Joy, I just want to clarify what I want.
Investigating jspm I read about its ability to dynamically load modules (aka es6 module loading). This, I believe, is the crux of jspm. I don't want to bundler every time I change a file! I want to bundle once at the end of the development just before I upload the app to the server. During the development cycle I want jspm to dynamically load my js modules and assets. Otherwise, if bundling is required, I can just use already available (and much faster bundling solutions) like Browseryfy, Webpack. So bundling at every file change is not a solution. With Systemjs and HTTP/2 we should not need to bundle at all ever. And this, I thought, what the jspm was all about.
So can someone tell me if it is possibly to load assets (css, fonts, images) dynamically with jspm the same way it loads js modules? The key word here is dynamically without bundling first. If yes - how?
Before you using font-awesome package, you need the CSS loading plugin and CSS build support.
$ jspm install css
$ jspm install npm:clean-css --dev
$ jspm install font-awesome
And create the main.js file which contains:
import 'font-awesome/css/font-awesome.min.css!';
Until now, you have two options that make them available.
(1) The first solution in index.html file is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import('main');
</script>
<i class="fa fa-camera-retro"></i> fa-camera-retro
</body>
</html>
You don't need to bundle all js file here. Import the main.js file only.
(2) Second solution is use jspm bundle-sfx
You can build a build.js by
$ jspm bundle-sfx main.js ./build.js
or gulp to automatically build the bundle file.
Here is a simple gulpfile.js example:
const gulp = require('gulp');
const gulp_jspm = require('gulp-jspm');
const paths = {
main: './main.js',
dest: './dest/'
};
gulp.task('scripts', function () {
gulp.src(paths.main)
.pipe(gulp_jspm({
selfExecutingBundle: true
}))
.pipe(gulp.dest(paths.dest));
});
function reportChange(event){
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
}
gulp.task('watch', function () {
gulp.watch([paths.main], ['scripts']).on('change', reportChange);
});
gulp.task('default', ['watch', 'scripts']);
Now, create a index.html file and can test it by httpster
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="./dest/main.bundle.js"></script>
<i class="fa fa-camera-retro"></i> fa-camera-retro
</body>
</html>
Check the jspm-cli/docs/plugins.md to get more informations.
load it with css plugin.
jspm install css
jspm install fontawsome=github:FortAwesome/Font-Awesome
in the js file
import fontawsome from 'fontawsome/css/font-awesome.css!';
My situation
I'm checking out spine.js for a web application I'm thinking of writing. I've read all the documentation and gone through all the examples. Now I'm trying to run the spine.contacts example project on my own Windows 7 laptop.
I'm running node v0.6.6 for Windows
What I've done
Installed node
Installed spine, spine-app and hem through npm
Extracted spine.contacts in a folder
Run npm install . inside the folder, which created the node_modules folder with a bunch of directories inside, including jqueryify
Run hem server to start the test server
Basically followed all the instructions to the letter
The problem
Running the application in Chrome (http://localhost:9294), JavaScript throws an exception at line 9 in index.html (I've included index.html below). It reads "Uncaught module jqueryify not found". I know the jqueryify dependency was installed by npm earlier, but I tried removing that line anyway and linking in jQuery manually. Now I got the error "Uncaught module index not found" in application.js. That certainly isn't a dependency error, since the index.js file is local and it's the main script file in the project.
So it seems there's a problem with the require function. I've Googled a lot and nothing I've found has indicated that spine.js shouldn't work on Windows.
Any ideas?
Some links
The GIT page for spine.contacts
A demo of the exact same project on herokuapp.com
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>App</title>
<link rel="stylesheet" href="/application.css" type="text/css" charset="utf-8">
<script src="/application.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
var jQuery = require("jqueryify"); // I'm line 9!!
var exports = this;
jQuery(function(){
var App = require("index");
exports.app = new App({el: $("#article")});
});
</script>
</head>
<body>
<header id="header"><h1>Spine Contacts</h1></header>
<article id="article"></article>
</body>
</html>
Hem is not supported on Windows. I found myself in the same situation and tried the same approaches.
More info here: https://github.com/maccman/hem/issues/23
Try inserting that before line 9:
for(var winPath in require.modules)
{
path = winPath.replace(/\\/g, '/');
path = path.match('/node_modules/') ? path.split('/node_modules/')[1] : path;
path = path.match('/app/') ? path.split('/app/')[1] : path;
require.modules[path] = require.modules[winPath];
}
I think a fix will be there soon.