Created a new app a developer Xero account. From the App, I got client_id and a callback. This is a dotnet core project integrating Xero SDK.
I created a simple HTML using the following code and that works nicely. (same as they provided here)
<html>
<head>
<meta charset="UTF-8">
<meta name="xero-client-id" content="42xxxx">
<meta name="xero-scopes" content="openid,profile,email">
<meta name="xero-redirect-uri" content="host-url/oidc-signin">
<title>My App </title>
</head>
<body>
<span data-xero-sso data-label="Sign in with Xero"></span>
<script src="https://edge.xero.com/platform/sso/xero-sso.js" async defer></script>
</body>
</html>
I have a React application, I'm adding a button within a react app so that user can authenticate and then get the invoices from Xero. So the button is not working from the react app. When I click on the button nothing just happens.
Any idea, please?
I found this plugin and tried but that didn't work either.
Related
React app which works great in local and aws. But in Google App Engine, when deployed using
mvn appengine:deploy
opens white fresh website which contains the index.html content inside; in the page source like:
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<base href="/" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="google" value="notranslate">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="shortcut icon" href="favicon.ico" />
<link rel="manifest" href="manifest.webapp" />
<link rel="stylesheet" href="static/css/loading.css">
</head>
<body>
<div id="root"/>
</body>
</html>
And does not load the js bundle. I couldnt see any clue in the browser and server logs.
I imagine that you want to host the React.js front-end and Java back end project that is build by maven. But It’s difficult to merge a React.js project built with NPM and a Java back-end project built with Maven into one deploy-able package in Google Cloud Patform.
So As an altenative, you can use Google microservices within an App engine project. You can follow this tutorial to solve your issue.
If you have only a Reactjs project so here is a tutorial, how to deploy React App to Google Cloud App Engine.
I am working very hard to get audio to play on my mobile phone with react 360. Through reading various documentation, I've learned that in order to play audio on mobile, I need to enact an html entity to create a user interaction. Once a user interacts by clicking the button, audio should be able to play on mobile. This does not seem to be the case.
In my index.html file I have the following code:
<html>
<head>
<title>ExampleVR</title>
<style>body { margin: 0; }</style>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
</head>
<body>
<!-- Attachment point for your app -->
<div id="container">
<button id="enter" onclick="enterApp();">
Click to Enter VR
</button>
</div>
<script src="./client.bundle?platform=vr"></script>
<script>
// Initialize the React 360 application
function enterApp() {
React360.init(
'index.bundle?platform=vr&dev=true',
document.getElementById('container'),
{
assetRoot: 'static_assets/',
}
);
}
</script>
</body>
</html>
As you can see, I have created am html button that when clicked, loads my React 360 code . However, when I click a VrButton in mobile, it still does not play. I've followed the recommendations as documented and it works on all browsers on desktop with the exception of mobile. Does anyone know how to fix this problem?
This was the solution to fix the audio issue:
https://github.com/facebook/react-360/issues/652
Based on superluminary response here I've set up an Angular 1 app without Hashbangs and html5Mode(true) and rely on Google to execute javascript. The page is being indexed by Google but dynamic titles and description tags are not.
My index.html head is the following:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href="/">
<meta name="author" content="me">
<meta name="robots" content="index,follow">
<title ng-bind="meta.title">Temp Title</title>
<meta name="description" content="{{meta.description}}">
<!-- Scripts & CSS -->
</head>
The title and description are correctly loaded but they don't display on Google.
How can I do that?
Also does this technique works with Facebook and other social networks? Thank you.
Why you don't use something like that?
https://github.com/steeve/angular-seo
Actually superluminary response here has the solution. HTML page head must be sent fully resolved by the server.
So in order for this solution to work I was forced to replicate angular routes in the server side and send the info resolved.
Instead of using a plain html view I changed to .ejs and also changed the header to something like this:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href="/">
<meta name="robots" content="index,follow">
<script type="text/javascript">
window.title = <%- JSON.stringify(precomposition) %>.title;
</script>
<title ng-bind="title"><%= precomposition.title %></title>
<meta name="description" content="<%= precomposition.description %>">
<!-- More meta information -->
<!-- Scripts & CSS -->
</head>
Now when the website gets a direct hit (initially resolved by the server instead of Angular, always the case for crawlers) I handle the request server side:
//Express route
app.route('/').get(precomposition.render);
//precomposition
exports.render = function (req, res) {
const precomposition = {title: 'tile', description: 'description'};
res.locals.precomposition = precomposition;
res.render('index.ejs');
};
If it's not a direct hit Angular handles the title update (because the other info is not displayed to the user).
It has off course some downsides but Google since October 2015 recommends this approach instead of "_escaped_fragment_ URLs". Also I think it's a lot less resource consuming than the selfhosted pre-render alternatives and cheaper than the paid ones.
I have this demo app
It works as intended in mobile safari (and desktop) but when I add the page to homescreen I can no longer click (ng-click) the card heading to toggle class to show full contact card. Any idea why that only happens when in standalone mode?
I have it as a codepen here as well
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
</head>
<body>
<div class="mdl-card__title mdl-color--blue-grey-500" ng-click="showCard($index)">
I have an interesting problem with the Cordova InAppBrowser plugin on ios where it will only start working after I leave the app. For example, when I hit a button in the app that should load the InAppBrowser, nothing happens. I can wait 5 or 10 minutes and nothing will happen. If I double tap home and bring up the recent apps view, the InAppBrowser loads immediately. If I hit home then return to the app, it loads right away. After it loads the first time, it works immediately every subsequent time without having to leave the app.
I've confirmed this is what is happening with breakpoints on the init of the InAppBrowser view and view controller in xcode. They only get called after leaving the app.
The app is a Sencha-Touch app on the latest framework and the xcode project and plugins were generated/installed using the latest version of Cordova and from the command line. The only file i've modified in the project from that generated by Cordova (aside from my apps files in www) is the index.html:
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MyWebApp</title>
<script>
var Ext = Ext || {};
Ext.theme = {
name: "Default"
};
</script>
<script src="sencha-touch-all.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<link rel="stylesheet" href="resources/css/application.css">
<script src="resources/js/currencyFormatter.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
</body>
</html>