2 new important facts here
As stated in this Google App Engine page no app.yaml file is employed. As mentioned in the Answer, app.yaml is in fact required, duh.
[contracalls.appspot.com] works when I launch it from my own Mac Terminal from within it's own directory as follows
server:contracalls brian$ gcloud app browse --project contracalls
But, of course, others can't launch from my desktop computer, so I still need a fix. Are the instructions at the Google App Engine page incomplete, perhaps?
jsfiddle.net added
This shows a working jsfiddle version
Line 3 of the following code produces Uncaught (in promise) TypeError: Cannot read property 'getUserMedia' of undefined when deployed here, but works fine in the GAE sdk. (You can try the link yourself.) Any ideas?
Index.js:
const recordAudio = () =>
new Promise(async resolve => {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const mediaRecorder = new MediaRecorder(stream);
let audioChunks = [];
// ...
});
Notice:
This is a static website application with only html and javascript employed.
Using Chrome Version 79.0.3945.88 (Official Build) (64-bit).
I chatted and then emailed with a Google support professional who finally figured out the problem (see below). Along the way I discovered that contrary to my updated question, there is an app.yaml file as was described at the first link in the question.
The problem was that the app must be called with https:// and to force that I needed to place secure: always in the app.yaml file.
Related
I'm having trouble with deploying my dispatch.yaml file to App Engine, using the following command (as described in the doc):
gcloud app deploy displatch.yaml --project [my-project] --account [my-email#gmail.com]
dispatch.yaml looks like this:
dispatch:
- url: something.mycustomdomain.com/*
service: something
This used to work fine, but now I'm getting this error:
Unexpected attribute 'dispatch' for object of type AppInfoExternal.
in "/home/bgirschig/Documents/projects/offensive culture/WEB/website/displatch.yaml"
I had made a change to the file, but reverting it to its previous state does not sovle the issue.
I've tried:
Updating the gcloud components (to Google Cloud SDK 303.0.0): didn't help
Looking for the issue on stack: found this and this but they are really old and seem obsolete (using appcfg.py)
Looking for the issue on Google: Same as above (old and obsolete answers)
I wish I could delete my question...
This is a simple typo:
My file was called displatch.yaml instead of dispatch.yaml.
It looks like gcloud uses the name of the file to decide what to do with it.
I have been using Datastore in AppEngine since few weeks ago and there was no such access issue in production. Today 1pm SGT, my service was suddenly returning 500 error with this error message although I never deploy to production.
Error: Could not load the default credentials. Browse to https://cloud.google.com/docs/authentication/getting-started for more information.
This error probably happened when accessing Datastore with my GCP's default credential:
const {Datastore} = require('#google-cloud/datastore');
const datastore = new Datastore();
const [shop] = await datastore.get(
datastore.key(['Shop', Number(phone)])
)
My stacks:
Standard AppEngine with nodejs10
Koa, Next, Datastore
In App Engine dashboard, as a random solution, I changed to the old version. Then, it suddenly started working. Then, I changed back to the original version. It worked well too. Any clue?
Suspect 1: Around the time, I was working locally. Although I never deploy, I was executing few GCP commands. These should not affect production tho
export GOOGLE_APPLICATION_CREDENTIALS="[my local credencial json file]"
gcloud config set project [project-name]
Seems like this problem has to do with App Engine/Cloud Function cold starts. In this scenario, the environment would not have loaded the credentials yet when the client library is being initialized.
Apparently it is fixed in newer versions of the client libraries: https://github.com/googleapis/gapic-generator-typescript/issues/287
But if not or if you do not want to upgrade your #google-cloud/ client libraries, this is the suggested workaround:
const {Datastore} = require('#google-cloud/datastore');
let datastore;
// If you are using it in a request handler
exports.handler = async (req, res) {
if (!datastore) {
datastore = new Datastore();
}
const [shop] = await datastore.get(
datastore.key(['Shop', Number(phone)])
);
}
See also: https://github.com/googleapis/google-auth-library-nodejs/issues/798#issuecomment-591622283
I'm using Nextjs for a front-end application and dotnet core 3.1 for the Web API. There are some pages that are static and other that are dynamic I followed the official documentation to achieve this. On development mode (local machine) everything works fine. Both static and dynamic routes are working properly and fetching data from the dontnet core Web API.
However, when publishing the Nextjs app following this steps:
yarn build
yarn export
An out folder is generated at the root of the project
The content of that folder is uploaded to the server
After, the deployed files are uploaded and when loging to the app, it redirects to the main page (until here is working OK), but as soon as I click on the reload page botton (Chrome) I am gettint the 404 error.
Looking at the console in the developer tools I got this:
I found this Stackoverflow link with same issue but there the answer is to use Express for server routing. In my case I am using dotnet core Web API for server requests. So, not sure how to do that.
Is there a way to fix this from the client side? Might be a configuration is missing?
The only thing I noticed while doing the export was a message saying: No "exportPathMap" found. Not sure if that would the the reason.
I had got similar issue in react when all of my pages after building and exporting had ".html" extensions. I solved it by the following code in next.config.js file.
next.config.js
module.exports = {
exportTrailingSlash: true,
}
Note: Do not work with the above code while in development. Use it just before building the project.
You can find the documentation link here: https://nextjs.org/docs/api-reference/next.config.js/exportPathMap#adding-a-trailing-slash.
UPDATE
The above code was for next.js v9.3.4 which I was using at that time. For newer versions below code should be used according to docs.
next.config.js
module.exports = {
trailingSlash: true,
}
it has been fixed update your nextjs package
npm install next#latest
based on the current version of Next js you have, visit here to see if there's any breaking change before updating what you have
I had a similar issue where after deploying the out folder created by next export all URL's would redirect me to the homepage. Everything was working fine during development and all URL's were accessible with next/link but in order to access pages with a URL I had to add a .html extension at the end of the URL.
Because I needed a quick workaround I added a useEffect block in the _app.tsx file for rerouting so that upon landing on the homepage it would act as if a Link component was clicked redirecting to the entered URL.
useEffect(()=>{
router.push(window.location.href)
},[])
We created a Linux Web App in Microsoft Azure. The application is static written with React (html and Javascript).
We copied the code into the wwwroot folder, but the application only showing only hostingstart.html and when we try to get page index.html we have this error:
Cannot GET /index.html
We tried with a sample of Azure in GitHub (https://github.com/Azure-Samples/html-docs-hello-world) but the error is the same.
The url is this: https://consoleadmin.azurewebsites.net/index.html
Last week the application was running correctly.
We forget to do something?
MAY 2020 - You don't have to add any javascript files or config files anywhere. Let me explain.
I was facing this exact same issue and wasted 6 hours trying everything including the most popular answer to this question. While the accepted answer is a nice workaround (but requires more work than just adding the index.js file), there's something a simpler than that.
You see, when you just deploy an Azure Web App (or App Service as it is also called), two things happen:
The web app by default points to opt/startup/hostingstart.html
It also puts a hostingstart.html in home/site/wwwroot
When you deploy your code, it replaces hostingstart.html in home/site/wwwroot but the app is still pointing to opt/startup/hostingstart.html. If you want to verify this, try deleting opt/startup/hostingstart.html file and your web app will throw a "CANNOT GET/" error.
So how to change the default pointer? It's simpler than it looks:
Go to Configuration tab on your web app and add the following code to startup script:
pm2 serve /home/site/wwwroot --no-daemon
If this web app is a client-side single-page-app and you're having issues with routing, then add --spa to the above command as follows:
pm2 serve /home/site/wwwroot --no-daemon --spa
This will tell the web app to serve wwwroot folder. And that's it.
Image for reference:
Screenshot explaination
PS: If you only set the startup script without deploying your code, it will still show the hostingstart.html because by default that file lies in the wwwroot folder.
Ok you are gonna love this. This happened to me today also. Same exact thing.
I am pretty sure the azure team flipped a switch somewhere and we fell through a crack.
I found this obscure answer with no votes and it did the trick (with a little extra finagling)
BONUS! this also fixed my router issues I was having only on the deployed site (not local):
Credit: #stormwild: Default documents not serving on node web app hosted on Azure
From #stormwild's post see here:
https://blogs.msdn.microsoft.com/waws/2017/09/08/things-you-should-know-web-apps-and-linux/#NodeHome
Steps:
Go to your azure portal, select your app service and launch ssh
In ssh terminal, navigate via command line to /home/site/wwwroot
create index.js there with the following code:
var express = require('express');
var server = express();
var options = {
index: 'index.html'
};
server.use('/', express.static('/home/site/wwwroot', options));
server.listen(process.env.PORT);
NOTE: Be sure to run npm install --save express also in this folder else your app service will crash on startup
Be sure to restart your app service if it doesn't do so automagically
A workaround, I changed the webapp stack to PHP 7
Another solution would be to add a file called ecoysystem.config.js right next to your index.html file.
module.exports = {
apps: [
{
script: "npx serve -s"
}
]
};
This will tell pm2 to associate all requests to index.html as your app service starts up.
Very helpful information here: https://burkeholland.github.io/posts/static-site-azure/
I am using Ionic and Oauth.io to perform authentication. If I run ionic serve and include the outh.js file in my index everything works good from the browser.
But when I run ionic run ios or install the app in android, I get the following error when I press the auth button (the one that suppose to execute OAuth.popup
I do not know what to do, until now I have checked the following:
In config.xml I have access, allow-intent and allow-navigation full permisive
I have installed and re-installed the plugin ionic plugin add https://github.com/oauth-io/oauth-phonegap.git
I tried to run the native app without the inclusion of the oauth.js file and everything breaks.
Using current versions up to date.
I am new to Ionic, so I don't know how to debug the device-running app or simulator.
Could be similar to this post but not exactly .
Your advices will be appreciated.
I figure it out reading some posts. The OAuth initialization and references should be done after the device is ready, so it is best to put the initialize in this block:
$ionicPlatform.ready(function() {
// ...
if(typeof window.OAuth !== 'undefined'){
$rootScope.OAuth = window.OAuth;
$rootScope.OAuth.initialize('XXX');
}
else{
console.log("plugin not loaded, this is running in a browser");
$.getScript( "lib/oauth.js", function() {
$rootScope.OAuth = OAuth;
$rootScope.OAuth.initialize('XXX');
});
}
});
Now, if the plugin is loaded it initializes the window.OAuth object, else the app is running in browser, so I have to include the oauth.js file. Also I assigned the OAuth to the $rootScope for quick access.
Hope this helps anyone.