How to serve Django for an Electron app - javascript

I'm trying to create an Electron desktop app which has a Django application at its backend. There are several tutorials and blogs which mention how this can be achieved. I've tried those and it seems to be working, however there are some issues.
One of them for me is how to server Django in this case? For me the current way of doing it creates some unwanted delay making the app slow to start...
Generally, what needs to be done to create an Django/Electron app is to package (I'm using pyInstaller)the Django app into an stand-alone executable and then bundle that into an Electron app. The question is which server should be used for this case to server Django before packaging it with pyInstaller? At the moment I'm using cherryPy as a WSGI web server to serve Django.
However - is there a better alternative knowing that this will be used in an Electron desktop app? Maybe something faster, or more suitable for this task? What is the typical way of handling Django in this case?

First of all, if you app slow to start you can create custom loading-animation template with node which you will serve until your server will be ready, in this case you BrowserWindow flag show should be setup to false, you will "show" your window with window.show() on your custom "server_ready" event. Overall logic of your app should fit in: 1) You start electron app and on load serve browser window with loading... animation, then you spawn child process in which your django app will run, here you have the "bridge" between your electron-node events and python logic, this done as follows:
let django=child_process.spawn('python', [__dirname+'/django_folder/start_server.py']);
Now variable django is your handler for communication with you django app.
You can communicate as follows:
let result_name = '';
django.stdout.on(
'data',
(data:Buffer) => {
result_name+=data.toString('utf8');
}
);
django.stdout.on(
'end',
(reasone) => {
resolve(result);
}
);
django.stderr.on( //error in python will be directed here
'data',
(buf : Buffer) => {
reject(buf.toString('utf8'));
}
);
django.stdin.write(JSON.stringify('notify your django app what you need from it'));
In python:
args=sys.stdin.readlines()[0] #your message in json from electron
args=json.loads(args)['data']
print result #send data back to electron
If your app is not very complex you probably can run in on localhost,
so then your python process will notify you through event that it is ready you can reload BrowserWindow with localhost url and start to coordinate interaction communicating with child process.

Related

Can't load views in AppScript test deployment because of XFrameOptions 'sameorigin'

I am trying to deploy a Web App using Google AppScript with multiple views. I have an appCover.html with a few buttons and each button redirects to a different page. The app cover (or homepage) loads flawlessly but when I click on any of the buttons I get the error in the console:
Refused to display
'https://script.google.com/macros/s/sriptID/dev?v=newPage'
in a frame because it set 'X-Frame-Options' to 'sameorigin'
I have looked into Google's developer resources and all the references I found tell to add the XFrameOptionsMode.ALLOWALL. So I did but still no success. This is the function that is rendering each page:
function render(file, argsObject) {
var tmp = HtmlService.createTemplateFromFile(file);
if (argsObject) {
var keys = Object.keys(argsObject);
keys.forEach(key => {
tmp.key = argsObject[key];
});
}
return tmp.evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}
Right now I am testing the deployment so I get /dev at the end when retrieving the URL and try to route with a parameter like /dev?v=newPage. Does it make a difference tying to access these pages when testing the deployment versus deploying itself?
It's a personal app so I'm the only user.
Any other ideas on how to solve this?
The problem is that you are using the dev version
Deploy your Webapp as an exec version
https://script.google.com/macros/s/XXX/scriptID
and then build your URL as
https://script.google.com/macros/s/sriptID/exec?v=newPage
Once you deploy your Webapp as a exec version, the method ScriptApp.getService().getUrl() will return you the corerct (exec) URL which you can use as a variable to dynamically build your redirection to different pages / views.

Vue PWA not getting new content after refresh

I'm new to Vue and created a project with the PWA Service-worker plugin. After deploying a new version of my App I get these messages in console:
After refreshing the page (F5) these messages still appear the same way and the App is still in it's old state. I tried everything to clear the cache but it still won't load the new content.
I haven't changed anything from the default config after creating my project and didn't add any code which interacts with the serviceworker. What is going wrong? Am I missing something?
As I figured out, this question is really only related to beginners in PWA, which don't know that you can (and need) to configure PWA for achieving this. If you feel addressed now (and using VueJS) remember:
To automatically download the new content, you need to configure PWA. In my case (VueJS) this is done by creating a file vue.config.js in the root directory of my project (On the same level as package.json).
Inside this file you need this:
module.exports = {
pwa: {
workboxOptions: {
skipWaiting: true
}
}
}
Which will automatically download your new content if detected.
However, the content won't be displayed to your client yet, since it needs to refresh after downloading the content. I did this by adding window.location.reload(true) to registerServiceWorker.js in my src/ directory:
updated () {
console.log('New content is available: Please refresh.')
window.location.reload(true)
},
Now, if the Service Worker detects new content, it will download it automatically and refresh the page afterwards.
I figured out a different approach to this and from what I've seen so far it works fine.
updated() {
console.log('New content is available; please refresh.');
caches.keys().then(function(names) {
for (let name of names) caches.delete(name);
});
},
What's happening here is that when the updated function gets called in the service worker it goes through and deletes all the caches. This means that your app will start up slower if there is an update but if not then it will serve the cached assets. I like this approach better because service workers can be complicated to understand and from what I've read using skipWaiting() isn't recommend unless you know what it does and the side effects it has. This also works with injectManifest mode which is how I'm currently using it.
pass registration argument then use the update() with that.
the argument uses ServiceWorkerRegistration API
updated (registration) {
console.log('New content is available; please refresh.')
registration.update()
},

Shopify App - Using Script Tags with Ruby on Rails Application

I'm trying to familiarize myself with the concept of using script tags. I'm making a ruby on rails app that does something as simple as alert "Hi" when a customer visits a page. I am testing this public app on a local server and I have the shopify_app gem installed. The app has been authenticated and I have access to the store's data. I've viewed the Shopify API documentation on using script tags and I've looked at the Shopify Embedded App example that Shopify has on GitHub. The documentation details the properties of a script tag and gives examples of script tags with their properties defined, but doesn't say anything about where to place the script tag in an application, or how to configure an environment so that the js file in the script tag will go through.
I've discovered that a js file being added with a script tag will only work if the js file is hosted online, so I've uploaded the js file to google drive. I have the code for the script tag in the index action of my HomeController (the default page for the app). This is the code I'm using:
def index
if response = request.env['omniauth.auth']
sess = ShopifyAPI::Session.new(params[:shop], response[:credentials][:token])
session[:shopify] = sess
ShopifyAPI::Base.activate_session(sess)
ShopifyAPI::ScriptTag.create(
:event => "onload",
:src => "https://drive.google.com/..."
)
end
I think the problem may be tied to the request.env. The response is not being read as request.env[omniauth.auth] and I believe that the response coming back as valid may be required for the script tag to go through.
The method that I tried above is from the 2nd answer given in this topic: How to develop rails app for shopify with ScriptTags.
The first answer suggested using this code:
ShopifyAPI::Base.site = token
s = ShopifyAPI::ScriptTag.create(:events => "onload",:src => "your javascript url")
However, it doesn't say where to place both lines of code in a rails application. I tried putting the second line in a js file in my rails application, but it did not work.
I don't know if I'm encountering problems because I'm running the app on a local server or if there is something missing from the configuration of my application.
I'd appreciate it if anyone could point me in the right direction.
Try putting something like this in config/initializers/shopify_app.rb
ShopifyApp.configure do |config|
config.api_key = "xxx-xxxx-xxx-xxx"
config.secret = "xxx-xxxx-xxx-xxx"
config.scope = "read_orders, read_products"
config.embedded_app = true
config.scripttags = [
{event:'onload', src: 'https://yourdomain.herokuapp.com/javascripts/yourjs.js'}
]
end
Yes, you are correct that you'll need the js file you want to include for your script tag publicly available - if you are using localhost for development look into ngrok.
Do yourself the favor of ensuring your callbacks use SSL when interacting with the Shopify API (i.e. configure your app with https://localhost/ as a callback setting in the Shopify app settings). I went through the trouble of configuring thin as the web server locally with a self-signed SSL certificate.
With a proper set up you should be able to debug why the response is failing the omniauth check.
I'm new to the Shopify API(s), but not Rails. Their documentation leaves a lot to be desired.
Good luck to you sir,

How to remotely fetch answer of phantomjs script run on heroku?

I want to fetch some information from a website using the phantomjs/casperjs libraries, as I'm looking for the HTML result after all javascripts on a site are run. I worked it out with the following code from this answer:
var page = require('webpage').create();
page.open('http://www.scorespro.com/basketball/', function (status) {
if (status !== 'success') {
console.log('Unable to access network');
} else {
var p = page.evaluate(function () {
return document.getElementsByTagName('html')[0].innerHTML
});
console.log(p);
}
phantom.exit();
});
And I also worked it out to get phantomjs/casperjs running on heroku by following these instructions, so when I now say heroku run phantomjs theScriptAbove.js on OS X terminal I get the HTML of the given basketball scores website as I was expecting.
But what I actually want is to get the html text from within a Mac desktop application, this is the reason why I was looking for a way to run the scripts on a web server like heroku. So, my question is:
Is there any way to get the HTML text (that my script prints as a result) remotely within my Objective-C desktop application?
Or asked in another way: how can I run and get the answer of my script remotely by using POST/GET?
p.s.
I can handle with Rails applications, so if there's a way to do this using Rails - I just need the basic idea of what I have to do and how to get the phantomjs script to communicate with Rails. But I think there might be an even simpler solution ...
If I understand you correctly you're talking about interprocess communication - so that Phantom's result (the page HTML) can somehow be retrieved by the app.
per the phantom docs, couple options:
write the HTML to a file and pick up the file in your app
run the webserver module and do a GET to phantom, and have the phantom script respond with the page HTML
see http://phantomjs.org/api/webserver/

Is SpineJS not fit for multi page web site?

I'm newbie on using SpineJS and having happy time with it.
And, when I finished contact examples and saw some other components in SpineJS,
I realized there's no example about Web Site(which has many html pages).
It seems like SpineJS is not proper framework for web site design.
(I think this kind of framework is proper for Single Page Application)
I thought like that because I should create 'websocket' object in the first view of my web site.
I cannot keep the 'websocket' object when I leave first view( html page changed.).
I should keep this 'websocket' for whole time until user logs out.
Is it right? or are there ways that I can create multi view web site?
(AngularJS framework support this with $route service.
- it can load html page without reloading whole framework.)
You can certainly implement multi-page websites within a single-page RIA. Ok, that sounds paradoxical. From the server side, it's rendering a single page, serving the source code. But within the client code, the Router object may render the page completely differently based on the route.
Edit / Addition:
Not sure if this is best, but here's how my app loads templates stored in separate html files within the app source code, e.g. myview.template = app.TemplateManager.fetch('grids/item');
templateManager: {
JST : {}, // hash table so not to load same template twice
fetch: function(path) {
url = "/app/templates" + path + ".html";
if (!this.JST[path]) {
$.ajax({ url: url, async: false }).then(function(contents) {
this.JST[path] = _.template(contents);
});
}
return this.JST[path];
}
});

Categories