I am trying to set up my facebook instant game.
I have followed https://developers.facebook.com/docs/games/instant-games/test-publish-share , to test locally then deploy into production.
When testing, everything works fine. However, in production, nothing shows up (black screen) when I open my game. <app-root> doesn't render, app-home's constructor isn't called and it takes up 0x0 pixels.
This is my index.html
<!--
Copyright (c) 2017-present, Facebook, Inc.
All rights reserved.
This source code is licensed under the license found in the
LICENSE file in the root directory of this source tree.
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="full-screen" content="yes" />
<meta name="screen-orientation" content="portrait" />
<meta name="viewport" content="user-scalable=no" />
<script type="module" src="/build/app.esm.js"></script>
<script nomodule src="/build/app.js"></script>
<link href="/build/app.css" rel="stylesheet">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/icon/apple-touch-icon.png">
<link rel="icon" type="image/x-icon" href="/assets/icon/favicon.ico">
<link rel="manifest" href="/manifest.json">
</head>
<body>
<script src="https://connect.facebook.net/en_US/fbinstant.6.2.js"></script>
<script type="text/javascript">
const assets = [
'img/asset1.png',
'img/asset2.png',
'img/asset3.png',
'img/asset4.png'
];
window.onload = function () {
// When the window loads, start to initialize the SDK
FBInstant.initializeAsync().then(function () {
// We can start to load assets
for (let i in assets) {
// When preloading assets, make sure to report the progress
FBInstant.setLoadingProgress(i / assets.length * 100);
}
// Now that assets are loaded, call startGameAsync
FBInstant.startGameAsync().then(() => console.log("initialized"));
});
};
</script>
<app-root></app-root>
</body>
</html>
'initialized' is printed in the console, when I open the game. There are two errors there with it (which might have to do with the error I am having)
Console logs
The 404 error (resource not found) is a .js file which I checked was included in the .zip file which I uploaded.
This is what i see when I inspect element on the game
Inspect element
Also, on mobile, nothing is displayed (white screen)
Any help would be greatly appreciated.
Thanks! :)
Related
I just build a flutter web project. I hosted it on github pages. After successfully from creating repository to deploying project I am getting this following error...
(index):46 Uncaught ReferenceError: _flutter is not defined
I don't understand why is this happening. I tried flutter clean.
I searched for the solution. but many people suggested that run flutter clean command but it made no effect on the project.
Here is my code code for web build.
<!DOCTYPE html>
<html>
<head>
<!--
If you are serving your web app in a path other than the root, change the
href value below to reflect the base path you are serving from.
The path provided below has to start and end with a slash "/" in order for
it to work correctly.
For more details:
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
This is a placeholder for base href that will be replaced by the value of
the `--base-href` argument provided to `flutter build`.
-->
<base href="$FLUTTER_BASE_HREF">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A new Flutter project.">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="code_snippets">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png" />
<title>code_snippets</title>
<link rel="manifest" href="manifest.json">
<script>
// The value below is injected by flutter build, do not touch.
var serviceWorkerVersion = null;
</script>
<!-- This script adds the flutter initialization JS code -->
<script src="flutter.js" defer></script>
</head>
<body>
<script>
window.addEventListener('load', function (ev) {
// Download main.dart.js
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
}
}).then(function (engineInitializer) {
return engineInitializer.initializeEngine();
}).then(function (appRunner) {
return appRunner.runApp();
});
});
</script>
</body>
</html>
Uncaught ReferenceError: _flutter is not defined is may caused by wrong deployed folder.
you have to delpoy web directory insted of build/web
here some reference from github issue: https://github.com/flutter/flutter/issues/107448#issuecomment-1181591460
or you may try this solution :
Is `Flutter build web` supposed to output a file called flutter.js? Because it does not by me :(
I have a curious error while i try to download an apk file with a website in vue :
Based on How to download a locally stored file in VueJS, i try to download a local file with this command :
Download
But no matter what i put in href, the file download is always this file :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="/favicon.ico">
<title>client_web</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#mdi/font#latest/css/materialdesignicons.min.css">
<link href="/js/app.js" rel="preload" as="script"><link href="/js/chunk-vendors.js" rel="preload" as="script"></head>
<body>
<noscript>
<strong>We're sorry but client_web doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="/js/chunk-vendors.js"></script><script type="text/javascript" src="/js/app.js"></script></body>
</html>
I don't understand where this file come from, and how to make my link download the apk file.
Edit: vue.config.js
"transpileDependencies": [
"vuetify"
],
chainWebpack: config => {
config.module
.rule('apk')
.test(/\.(apk)$/)
.use('apk-loader')
.loader('apk-loader')
.end();
}
}
Directory Tree:
│ └──views
│ └──APKDownload.vue
└──app-debug.apk```
There could be 2 problems:
Server does not allows you to download '.apk' files.
There is a path problem. The fastest way to check it is in DevTools/Network, what url is used to download file as you use ../../app-debug.apk.
I made a webpage that inputs user's feedback using a form. On successful submit I display a thank you message on the same page, for which I'm using javascript.
The code executes well when I put the javascript on the same page. However, when I tried to separate the script onto a file (in a test webserver), it stopped executing.
Can you please help?
Relevant codes are mentioned below:
Head Element
<head>
<meta charset="utf-8" />
<!-- For proper rendering and touch zooming in mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="images/logo.ico" />
<title><?= htmlspecialchars($title) ?></title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="../javascript/submit-logic.js"></script>
</head>
First 2-3 lines of the javascript function:
$(function ()
{
$('form').submit(function (e)
{
e.preventDefault();
Detailed code (HTML, CSS, Javascript) can be found in my codepen (this is working as expected) : http://codepen.io/abbor123/pen/YGwVXg
Javascript folder is placed outside the Public folder and has 755 permission.
Edit 1:
File Tree Screenshot:
Console Error Screenshot: (submit-logic.js is the name of my javascript file. The URL mentioned on hovering over this link is: /javascript/submit-logic.js:1 )
The javascript code page is available at the following URL:
https://gist.github.com/abor123/3193eb399c3f973be453ae9a8fcc0ce5
Move your javascript folder into public_html. As Quentin commented, your server likely isn't set up to serve any files outside public_html.
I'm trying to use font awesome for some icons, and am doing this by using the CDN.
I simply copied my font awesome embed code in the of my page, as instructed.
<script src="https://use.fontawesome.com/4c5806874b.js"></script>
But when I open the page, it tells my that webfontloader.js failed
Any ideas what goes wrong here?
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Brighton Times</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" media="(max-width: 400px)"type="text/css" href="smallest-screens.css">
<script src="https://use.fontawesome.com/4c5806874b.js"></script>
</head>
If I understand this correctly, You're trying to use to load some fonts - try using the following link
https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css
if you want to see the output in HTML follow - i class and it should work.
Somewhere in your code, You have given a wrong path. ex:font-face url etc.
keep in mind,
<img src="Lanka.jpg"> <!-- Lanka.jpg is in the current folder -->
<img src="Asia/Lanka.jpg"> <!-- Lanka.jpg is in the Asia folder -->
<img src="/Asia/Lanka.jpg"> <!-- Asia folder is in root folder -->
<img src="../Lanka.jpg"> <!-- Lanka.jpg is in one folder up from current folder-->
I am having some inconsistencies regarding generating the HTML BASE tag in javaScript.
I have a global script of which the relevant parts are below. Every page in my site points to this script relatively. Then in the head section I call the following: generateBase();.
This appears to work well. All my CSS Twitter bootstrap files appear to do their job, the page renders and I've had no complaints from users. Looking at the logs on our server, and the developer console in chrome the it would seem that all links to JavaScript or CSS files are incorrectly relatively addressed.
Below is my header which calls generateBase() in settings.js. Below this is the important bits of settings.js.
Whilst I do not want to give the actual URL away, a flavor of the problem is below. I am expecting http://somewebsite.com/~mysite/js/bootstrap.js as the address for the bootstrap.js file. Howeever chrome reports that it is looking for http://somewebsite.com/~mysite/subfolder/subdir/js/bootstrap.js and gives a 403 even though the generateBase() call points to http://somewebsite.com/~mysite/. What I need is regardless of where each page of my site is located for them to be able to point to the required CSS and Javascripts that app pages need. I want the ability move a page without having to update all the URLS inside it.
Below is the head:
<head>
<script type="text/javascript" src="../../js/settings.js"></script>
<script type="text/javascript">generateBase();</script>
<meta charset="utf-8"></meta>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrapPurple.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/carousel-custom.css" rel="stylesheet">
<link href="css/pageStyle.css" rel="stylesheet">
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script type="text/javascript" src="js/equalise.js"></script>
</head>
Settings.js Below:
var baseTestURL = "http://localhost/mySite/";//test local
var baseURL = "http://somewebsite.com/~mysite/";//live
function getBaseURL(){
if(test)
return baseTestURL;
else
return baseURL;
}
function generateBase() {
document.write('<base href="' + getBaseURL() + '" />');
}
PS I am aware of a similarly titled thread here (Link). But the answer was not accepted, nor fully addressed the original question. Hence I ask this. Which is a more fuller explanation of the problem which may or may not be related.