I just tried to test electron environment for programming with JavaScript on desktop with Windows 10.
So I have an app:
const electron=require("electron");
const app=electron.app;
const BrowserWindow=electron.BrowserWindow;
var mainWindow=null;
app.on("ready",function(){
mainWindow=new BrowserWindow({height:600,width:800});
mainWindow.loadURL("file://"+__dirname+"index.html");
});
and index.html is:
<html>
<head>
<title> MyIndex.html </title>
</head>
<body>
Hello World from Electron!<br>
</body>
</html>
and package.json is:
{
"name":"Electron-Test",
"version":"0.1.0",
"main":"./main.js",
"scripts":{"start":"electron ."}
}
If I run electron . or npm start the application seems to start, but no browser window opens. On console I have to press Ctrl-C to stop the application.
Does anyone know where is the problem?
try to add one more/after file:
you are also missing a / before index.html
app.on("ready",function(){
mainWindow=new BrowserWindow({height:600,width:800});
mainWindow.loadURL("file:///"+__dirname+"/index.html");
});
i saw it in this video, at 3:32 https://www.youtube.com/watch?v=i0AkgNv4U4E
Related
I am working on a new project where I need to connect to a docker container from web?
By connect I mean I will create a shell in the website and tat shell will be able to connect to the running container.
I am not able to figure out how to proceed with the project.
Can anyone help me out?
From what I know there is no out of the box solution, you should make your own api executing command on your container running docker exec <id> <command> and returning the output, mind escape the command.
However you should know that letting a user run commands inside a docker is dangerous as it could impact your host.
You should be able to use Docker APIs for this (https://docs.docker.com/engine/api/) along with a framework that wraps the APIs. For example refer dockerode.
You could combine some JavaScript modules. node-pty and xterm being the most important. Additionally, ws is useful, but could be replaced but something else.
Note: this is not a production ready example. In particular, you should take care of safety measurements, or better yet, let no one but yourself use it.
server.js
import { WebSocketServer, createWebSocketStream } from 'ws';
import pty from 'node-pty';
const wss = new WebSocketServer({ port: 3000 });
wss.on('connection', (ws) => {
console.log('new connection');
const duplex = createWebSocketStream(ws, { encoding: 'utf8' });
const proc = pty.spawn('docker', ['run', "--rm", "-ti", "ubuntu", "bash"], {
name: 'xterm-color',
});
const onData = proc.onData((data) => duplex.write(data));
const exit = proc.onExit(() => {
console.log("process exited");
onData.dispose();
exit.dispose();
});
duplex.on('data', (data) => proc.write(data.toString()));
ws.on('close', function () {
console.log('stream closed');
proc.kill();
duplex.destroy();
});
});
index.html
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="node_modules/xterm/css/xterm.css" />
<script src="node_modules/xterm/lib/xterm.js"></script>
</head>
<body>
<div id="terminal"></div>
<script type="module">
const term = new Terminal();
term.open(document.getElementById('terminal'));
const ws = new WebSocket('ws://localhost:3000');
ws.onmessage = async ({ data }) => term.write(await data.text());
term.onData((data) => ws.send(data));
</script>
</body>
</html>
Note: I am using the statics from the node modules folder, in your real code you probably want to use a bundler for this.
I am serving the entire project with nginx on port 8080 for simplicity. And then I start the server with node.
docker run -d --rm -p 8080:8080 -v "$PWD:/usr/share/nginx/html" nginxinc/nginx-unprivileged
node server.mjs
Afterwards, I can open http://localhost:8080 in my browser, and get a shell.
The dependencies in my package.json are these:
"dependencies": {
"node-pty": "^0.10.1",
"ws": "^8.7.0",
"xterm": "^4.18.0"
}
You can view the code in this repo: https://github.com/bluebrown/web-shell.
I'm trying to create a Rails API and a client in VueJs using webpacker on Cloud9.
After a standard installation : npm install -g yarn && rails _5.1.4_ new . --api --webpack=vue
I'm using Foreman to launch rails and webpack, here is the file.
# Procfile.dev
web: bundle exec rails s -p $PORT -b $IP
webpacker: ./bin/webpack-dev-server --inline true --hot true --public $C9_HOSTNAME
I changed the development part of config/webpacker.yml to this :
development:
<<: *default
compile: true
# Reference: https://webpack.js.org/configuration/dev-server/
dev_server:
https: false
host: localhost
port: 8081
When launching foreman start the webpack creates public/packs/manifest.json containing the follow object.
{
"application.js": "/packs/application-d2ce57fea2210882a7d4.js",
"hello_vue.css": "/packs/hello_vue-9cb5a7334a6577c3422968b9b9970b2f.css",
"hello_vue.js": "/packs/hello_vue-d8d50a7562d6abcbea06.js"
}
I created a public/index.html file containing the following
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="packs/hello_vue-9cb5a7334a6577c3422968b9b9970b2f.css" />
</head>
<body>
<script type="text/javascript" src="packs/application-d2ce57fea2210882a7d4.js"></script>
<script type="text/javascript" src="packs/hello_vue-bd484161b1956b3a536b.js"></script>
</body>
</html>
Now when I go to the URL I have the Hello World from Webpacker in my JavaScript console and the Hello Vue! in the browser.
My question is : Is it possible to use this generated manifest.json to automatically launch the good files (js, css) and how ?
There is a plugin called html-webpack-plugin that can create the index.html file with all the good css and js links.
I just had to npm install html-webpack-plugin --save-dev and then modify my config/webpack/development.js like this :
const environment = require('./environment')
const HtmlWebpackPlugin = require('html-webpack-plugin')
environment.plugins.prepend('HtmlWebpackPlugin', new HtmlWebpackPlugin({
title: 'My Vuejs App',
inject: true
}))
module.exports = environment.toWebpackConfig()
From this link, it says :
Once an application is cached, it remains cached until one of the
following happens:
The user clears the browser's cache
The manifest file is modified (see tip below)
The application cache is programmatically updated
Following the instruction from the internet, for the manifest file I use a version number. When I change the content of the index.html with 01.jpg to 02.jpg - I also changed the version number of the manifest file.
With the steps above, it works within my Win7 Wamp Server Local Host. But once I do the same steps in my web server (after uploading the file to the web server) - it doesn't work.
Can somebody please help me what did I do wrong ?
Document was loaded from Application Cache with manifest http://www.example.com/test/offline.appcache
Application Cache Checking event
Navigated to http://www.example.com/test/
Application Cache NoUpdate event
Above is from the Chrome browser console after I modified the version number of the manifest file (from #01 to #02) and the jpg file (from 01.jpg to 02.jpg) in the index.html file.
The offline.appcache CACHE file list no change, except the version number :
CACHE MANIFEST
# 2017-03-25 version#01
uploads/event.jpg
uploads/baby.jpg
/favicon.ico
NETWORK:
indexPHP.php
The index.html file :
<!DOCTYPE html>
<html manifest="offline.appcache">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style></style>
</head>
<body>
<img src="uploads/01.jpg">
</body>
</html>
<script type="text/javascript">
function onUpdateReady() {
alert("offline files will be updated");
window.location.reload();
}
window.applicationCache.addEventListener('updateready', onUpdateReady);
if(window.applicationCache.status === window.applicationCache.UPDATEREADY) {
onUpdateReady();}
</script>
the .htaccess file :
AddType text/cache-manifest .appcache
the "tree" :
example.com/.htaccess
example.com/favicon.ico
example.com/test/index.html
example.com/test/offline.appcache
example.com/test/uploads/01.jpg
example.com/test/uploads/02.jpg
Thank you in advanced.
I am trying out a Polymer Dart App under Cordova. So I started with the Dart Editor Sample App.
I use a recent version of Polymer so I had to edit the sample code. Here is my pubspec.yaml
name: cortst
description: Cordova Test Application
dependencies:
polymer: '>=0.15.1+3 <0.16.0'
transformers:
- polymer:
entry_points:
- web/cortst.html
And here is the combined HTML and Dart. I think the initialization uses the new/approved technique:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample App</title>
<link rel="import" href="clickcounter.html">
<link rel="stylesheet" href="cortst.css">
<script type="application/dart">
import 'dart:async';
import 'package:polymer/polymer.dart';
void main() {
initPolymer().run( () {
Polymer.onReady.then( (_) {
new Future( () {
// stuff goes here!
});
});
});
}
</script>
</head>
<body>
<h1>A Test</h1>
<div id="sample_container_id">
<click-counter count="5"></click-counter>
</div>
</body>
</html>
To generate stand-alone JavaScript I run dart2js via the command line:
pub build --mode=debug
And these are the results:
Dartium (37.0.2062.120 (292122) via Dart Editor 1.7.2) - OK
Run as JavaScript on Chrome (38.0.2125.111 m) - OK
Run as JavaScript on Firefox (33.0.3) - OK
dart2js and run on Chrome - no shadow DOM.
dart2js and run on Firefox - OK
When it fails the click counter is rendered (invisibly) as
<click-counter count="5"></click-counter>
This Chrome problem matters because the standard web host on Android is Chrome.
For brevity, I have embedded the Dart script in the HTML. I get the same results when I use a separate .dart file.
Perhaps I have overlooked something - it wouldn't be the first time...
I've trying for some days to get inAppBrowser to work in a simple Phonegap App for iOS with no luck.
Nothing happens... No log con the console.log...
What I've done so far is:
Install inAppBrowser using: plugman --platform ios --project /path/to/app --plugin inappbrowser
If I try to install it using
phonegap plugin add
https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git
it says it's already installed, so I assume installation is OK.
Add the plugin call in the main config.xml file this way: <gap:plugin name="org.apache.cordova.inappbrowser" version="0.2.4" />
My index.html file looks like this:
<!DOCTYPE html>
<html>
<head>
<title>InAppBrowser Example</title>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
//
function onDeviceReady() {
var ref = window.open('http://apache.org', '_blank', 'location=yes');
}
</script>
</head>
<body>
Hello World
</body>
</html>
I understand, on launch, it should open the Apache home, or stay blank (because of Phonegap URL permissions), but it just shows up the "Hello World" text and nothing happens.
Any ideas of what am I doing wrong?
Thanks in advance, and sorry about my poor english!
Make sure you have the following in your config.xml:
I used to have org.apache.cordova.InAppBroweser - maybe from an older version and it caused issues.
Also make sure your config.xml (in your apk file) is created properly.