Have created an Ionic2 app based on the Ionic2 blank template. Using Visual Studio 2015 Update 2. Have setup Azure Mobile Services account to use as the backend. Have installed Azure Mobile Apps plugin (by doubling clicking config.xml and choosing Azure Mobile Apps and clicking install) /config.xml excerpt:
<plugin name="cordova-plugin-ms-azure-mobile-apps" version="2.0.0-beta4" />
Have installed azure-mobile-app.d.ts as described here: https://www.nuget.org/packages/azure-mobile-apps.TypeScript.DefinitelyTyped/. VS2015 intellisense considers code valid.
However, getting an error when trying to access the backend in chrome console: WindowsAzure is not defined.
client: WindowsAzure.MobileServiceClient;
...
client = new WindowsAzure.MobileServiceClient('removed url for security');
Code needs to be run after device ready. In Ionic2 you can see an example of device ready in app.ts:
constructor(platform: Platform) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
StatusBar.styleDefault();
});
}
I mistakenly thought the home page constructor would fire after device ready but it does not.
The only way I have been able to get WindowsAzure.MobileServiceClient to work is by declaring a WindowsAzure variable in my provider and then manually include the script file MobileServices.Cordova.js as a script reference in index.html. It's less than ideal. There are some typing files out there for it but they aren't up to date any more.
Related
I wonder if it is possible to use chromium engine inside google chrome or the google chrome itself to render a web page inside my WPF application instead of using traditional WebView (because it's the IE engine and it's awful -_-) or implementing CEFSharp (because it uses about 200 MB of space only for the chromium engine)
so in this case I need the target pc to has installed google chrome or any other(firefox or ...)
Soooo ... is there any solution?
thanks in advance
EDIT
I want to create applications based on web UI, - because of being easy and powerful - I know some providing this feature, e.g. CEF Sharp WPF or electron js but they include a full chromium engine with the app. I don't want this.
I want to create my app as light as possible, and my idea is to use chromium engine of a modern browser, that almost everyone has one.
For example, imagine that the user has installed google chrome.
first I locate the installation folder
I use chromium.exe -render path/to/file.html(imaginary) command to render my application UI.
finally bind the UI events to my native code. (e.g. c#(wpf) or any language that you can create desktop apps with it)
One solution is creating web apps by installing a website with the browser. but with that you cannot for example create or read some files in user pc, or any similar operation.
I'm looking for the most light-weight solution...
There is a new Chromium based WebView2 control that you can use to embed modern web content in your WPF application.
Please refer to the docs for more information about the prerequisites and how to use it:
Getting started with WebView2 in WPF
Explanation
So, let's say that you want your UI to be rendered in a chromium environment(aka a browser)… right?
let's take a look at electron js:
it uses NodeJS as backend.
it uses an embedded browser for frontend.
the language used is JavaScript due to NodeJS.
So, you want to use the client's browser to render your frontend instead of embedding a browser inside it.
well, don't embed it!!
you can create a web application(e.g. opened by typing localhost:<port> in browser1) using NodeJS and handle your IPC(between frontend and backend) using ajax calls or a socket connection.
that way you are doing exactly what an electron app does, except that, electron uses a bundled browser.
now you made your app lighter, also if your client do have NodeJS installed, you don't need to bundle NodeJS!
--- inspired by jupyter notebooks ---
Possible Solutions
use NodeJS as backend.
use python and combine it with Flask or Django as backend. (I think this would be the most lightweight solution)
use PHP as backend. (the best, personal opinion)
use ASP.NET/Blazor as backend. (as mentioned in the comments; but doesn't seem to be a lightweight solution)
or use any language that you can create a web application with that!
make a runApp.bat or runApp.sh to simply run your server and open the browser automatically.
I've a simple web server for e2e purposes, built with create react app and react app rewired.
Cypress runs perfectly against this web server, the only issue I am facing is about the fonts.
They are included with an external url.
Since I launch the web server regularly, the react application is able to be fed with the url for the proper fonts.
Once Cypress open the browser with the command cypress open the console log shows this error and fonts indeed are not loaded.
GET https://[URL.EXTENSION]/[FONT.WOFF2] net::ERR_EMPTY_RESPONSE
BEGIN EDIT
I noticed that the issue occurs on my company VPN and not on my regular network configuration, so as I already said, the fonts are not loaded just in the browser of Cypress, if I
view the website from a regular browser
access those fonts url copying them in the browser
any issue is occurring
END EDIT
Where is lying the error? Do I miss something in the configuration?
Thanks
Hello Guys !
Today I deployed an app online to test it but didn't understood very well why it didn't work.
What I did :
I've created a sample react app using bootstrap and used firebase to deploy it. Here is the link.
What was expected ?
I wanted the app to be able to be downloaded on the phone as angular.io is.
Reality :
Nothing special. It's in fact registered in service worker and very fast to load and download, but nothing more.
Problem now :
I've done it today two times but wasn't able to use it as well as the image of service workers I had.
What should I do ?
You need a a 144px square PNG icon to be defined in your manifest.json to enable the web app install banner.
You can validate whether your application can be added to your homescreen from Chrome on a desktop computer.
To do so, open the Chrome developer tools on your website, open the 'Application' tab, click 'Manifest' in the left navigation and then click 'Add to homescreen'.
If there's a problem adding to homescreen an error will appear in the console, when trying it on the website you mentioned I received the error 'Site cannot be installed: a 144px square PNG icon is required, but no supplied icon meets this requirement'.
You can read more about the requirements for web app install banners here https://developers.google.com/web/fundamentals/app-install-banners/.
I use the angular-fullstack/generator-angular-fullstack for my project and for testing purpose I would like to run my project on two different browser windows.
The problem is that I got the same input for each text field on both browsers simultaneously.
For example:
On the login page, if I type my email address on one browser it will appear on the login email field in the other browser.
Any ideas of what I'm doing wrong?
Your project uses browserSync.
When your project is opened using localhost:3000, you should browse to localhost:3001 that will give you a BrowserSync configuration page.
Under Sync Options on that page you can disbable what to sync.
How can I run my AngularJS Application in the IntelliJ IDEA? I use the last version of the IntelliJ IDEA and I installed the AngularJS support with the IntelliJ IDEA AngularJS Plugin. I wonder, that I cannot define some Server Run/Debug Configuration (like Tomcat) to run my application.
Is there a way to do this?
EDIT: Or there is some other way to deploy the application? I cannot find any suitable Run/Debug Configuration to somehow deploy my project locally.
Well, you need an application server to run the application. I'm using IntelliJ Idea with a local JBoss.
Build your modules and deploy them on the JBoss. You can even use an automated front-end build process with bower and gulp.
If you are only using javascript you don't even need a local server running, js is executed in the the browser. A JBoss, Tomcat or other application server is used for your server logic (e.g. Java code).
A 'lisa p' says:
You need an application server to run it locally on, such as JBoss.
Unless it's a static application (i.e. no dynamic content) in which case, just open your index.html file in a web-browser.
Ideally, if you wanted to continue to develop more pure AngularJS projects, then use Jetbrains' WebStorm IDE instead of their IntelliJ IDEA IDE.
IntelliJ is for Java Development, WebStorm is for Web and JavaScript Development.
To run Angular application without Tomcat/JBoss, we need to create a "JavaScript Debug" configuration. To do this, follow the instructions below.
In intellij menu bar, Choose Run --> Edit Configurations
Click green plus (+) sign and choose "JavaScript Debug"
For the value in URL box, navigate to the index.html file by clicking the little button[...] next to URL field
For the rest of the values in the form, follow the screenshot below