Downloading scripts and stylesheet beforhand - vuejs 2 - javascript

While running a vuejs app on the intranet I get a 403 FORBIDDEN error while the web app is trying to get some js scripts and css files from the internet (like jquery.min.js or semantic.min.css). The app runs in a docker container.
Is there a way to tell the app to download all the files needed already during initiation (run) of the container - while still having access to the internet? So that this doesn't happen during the page is being loaded in the browser? I'm using Vue 2. Thanks in advance!

Related

Suggestion on injecting a React App Widget on a host website using iframe

I'm making a chat widget, which will be embeddable to any website using an iframe. Previously I made a react app and then bundled everything to ONE bundle.js file and hosted it on S3(or any static file hosting platform) with public access and then inject that file inside the website with iframe (using the script tag). That bundle.js file has a size of nearly 1.23 MBs. I suspect that it can affect the speed of the website loading.
I have tried one more thing, I created the same react app and deployed it on AWS Amplify, and then use the link of that app in the iframe instead of hosting a static bundle.js file.
Is the latter one a good approach or the former (bundle.js) was better?
I figured it out that the latter approach (Running the app in AWS Amplify) takes more time to load hence is not that useful than hosting a static file on S3. However, I found that CloudFront can improve the speed and also add cache support for it.

Embedding React static site (create react app) in a website

I have a react app (created using create-react-app) and generated build (using react-scripts, npm run build).
Build folder has static site (with single index.html, js file and media) which is deployed on a domain (domain1.com).
On domain2.com there is a web app already running. Now I want to embed domain1.com in domain2.com.
What I tried:
Inside domain2.com I added <div id="root"></div>
loaded necessary scripts and css file from domain1.com
What it outputs:
It rendered html, css and all necessary icons but none of the functionality is working. Click is not triggered and no error message shown.
What is expected:
It should work fine in domain2.com as it works in domain1.com
I don't want to use iframe or object (even they worked well).
Please help me in achieving this.
Thank-you.

Need to send information from chrome to external app

I have an app (software in my windows) which I can do whatherver I want with it and I need this app to be notified when some JS code is run inside chrome. Ok this is not easy.
So I came up with this idea: when I want to notify my app (running on my windows) to do something, I just downloaded a cacheable file (using js) to my chrome browser. THEN my app can check every 10 seconds the "C:\Users\PC\AppData\Local\Google\Chrome\User Data\Default\Cache" directory to know if a file with a specific size was created.
This is working flawlessly! But I wonder if you guys would recommend any other method to send a command or anything from JS code running inside chrome to an external app running in windows?

Is it possible to use Electron in web application loaded from external web server?

I started to learn Electron and have one question:
Is it possible to use Electron's code in a web application only in the case when application was loaded by Electron from local folder?
win.loadURL('file://' + __dirname + '/app/index.html');
Is it not possible to use electron in web application's java script files if application was loaded to BrowserWindow from external web server?
win.loadURL('http://localhost:9000');
It is absolutely possible. BrowserWindow.loadUrl will also load an http location, localhost or otherwise.
We use this to load the application from a local webpack dev server to refresh with changes without having to restart the application let alone having to go through the entire build process.
Here you can find an example on exactly that
You can use webview to load external web content.
It is similar to iframe with the difference that it runs in a seperate process than your app and it doesn't have the same permissions as your app, to keep your app safe from the embedded content.
More about the webview can be found here

PhoneGap + JQuery Mobile + Transitions + Multiple HTML files = "Error Loading Page"

I´m developing a PhoneGap application (HTML5 + CSS3 + Javascript/JQuery Mobile). I´ve started using a single HTML file with multiple pages. I´m using page transitions (Slide) on changing among pages.
The problem occurs when I break the single HTML page in multiple HTML files (one for each page). I cannot load the pages. The framework display "Error Loading Page".
I know that JQuery Mobile framework uses AJAX to load the page contents when using multiple html files. If I deploy the app in a web server (say IIS) everything goes fine. But running in local files - like PhoneGap apps demands -, the framework cannot perform an AJAX request, and consequently the page cannot be loaded "Error Loading Page".
I need to use JQuery Mobile
I need to use page transitions (slide) to improve user experience
I want to use multiple HTML files to not have to deal with a unique huge html file
The app will not be deployed to a web server because it is a PhoneGap App and must run locally in file system.
I´m deploying the app in an android and using the Adobe Build to generate the APK installation file.
Could someone give some advice?
Thanks!
I have solved my problem.
I was thinking that the PhoneGap would behaves like loading a page directly from file system and not allowing AJAX requests. In my tests on desktop I cannot load external links "Error Loading Page". But after publishing the app on the device all the the external links behaves accordingly. In some way the PhoneGap infrastructure can handle AJAX requests locally.
So, to test in my desktop I just put the app in IIS and the external links will work. When the app is published on the device the behavior will be the same.
PhoneGap doesn't run a webserver. All files are loaded via file:// protocol. Thus, any request is considered cross origin.
To solve this, you need to allow requests to all hosts.
<access uri="*" subdomains="true" />
See http://docs.phonegap.com/en/1.9.0/guide_whitelist_index.md.html

Categories