I am following this tutorial to add Firebase auth to an appengine app. It works except I always get the warning as if (typeof firebase === 'undefined') in index.html is always true. I may have put something in the wrong place (noob at web stuff). Here is what I have done (I have removed some comments and the msgbox display code):
<script>
if (typeof firebase === 'undefined') {
const msg = "Please paste the Firebase initialization snippet into index.html. See ...";}
</script>
<script src="https://www.gstatic.com/firebasejs/ui/4.5.0/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.5.0/firebase-ui-auth.css">
<script src="{{ url_for('static', filename='script.js') }}"></script>
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.8.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-analytics.js"></script>
<script>
var firebaseConfig = {
the secrets from firebase which work };
the rest is verbatim from the example
I have tried putting firebaseConfig in the header, same problem.
firebase won't have a value until after you include firebase-app.js. Right now, you are checking it before the inclusion. The order matters a lot. Just move the scripts above the code that uses them.
Also, the versions of your firebase scripts need to match exactly - what you show right now have version conflicts.
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-analytics.js"></script>
<script>
if (typeof firebase === 'undefined') {
const msg = "Please paste the Firebase initialization snippet into index.html. See ...";}
// now you can call firebase.initializeApp()
</script>
Related
There are multiple js and css libaries loaded (see code snippet)
Basically, this is what I have right now:
<link rel="stylesheet" type="text/css" href="/typo3temp/assets/compressed/7a1973f505-d75d99e70d86f83941cb8dde29be02ed.css" media="all">
<link rel="stylesheet" type="text/css" href="/typo3temp/assets/compressed/merged-4c85787f15040b42f80e9b8c12940eda-46385b6288d9ae801d3574a36a4f492d.css" media="all">
<script src="/typo3temp/assets/compressed/jquery-3.2.1.min-0e2a44e5d7960526ea22d19998a23651.js" type="text/javascript"></script>
<script src="/typo3temp/assets/compressed/merged-62fcf9b86d5d5537cbb754d505e7050c-e3f29e58f7f84473b47512d5d903396a.js" type="text/javascript"></script>
And this is what I want to get:
<link rel="stylesheet" type="text/css" href="/typo3temp/assets/compressed/merged-4c85787f15040b42f80e9b8c12940eda-46385b6288d9ae801d3574a36a4f492d.css" media="all">
<script src="/typo3temp/assets/compressed/merged-62fcf9b86d5d5537cbb754d505e7050c-e3f29e58f7f84473b47512d5d903396a.js" type="text/javascript"></script>
Depending on where some extentions get into play, there are multiple libaries not included into the merged one.
I do know where the original libs are coming from (before getting stored in typo3temp), however I don't know how to include those into the merged files.
The typoscript setup should be correct. It is configured like this:
config {
concatenateJs = 1
compressJs = 1
compressCss = 1
concatenateCss = 1
...
Is there a excludeFromConcatenation = 1 or disableCompression = 1 somewhere in the config?
Edit:
There is also includeJS or includeJSFooter or includeJSFooterlibs or includeJSLibs in page configuration of TypoScript are they difering maybe?
The Pagerenderer.php file is somehow seeing them as separate things to concatenate..
I checked a few Typo3 sites of our own company, they have 1 file only, 1 request. So there must be something different, with the page configuration?
This code in TypoScript:
page = PAGE
page.typeNum = 0
page {
# set properties ... (lot of configuration code)
}
I am trying to use the stripe library specifically stripe elements so I can set up a custom form for payment processing. I am using the mern-starter in the server.js file I have the following code. You can see that at the bottom I have added a script tag to import stripe. However, in my client folder I have a component that is trying to make use of stripe and it cannot seem to access it. My guess is that is doesn't know it exists yet, but how can I circumvent that issue? I have looked at a react component that specifically deals with loading scripts, but it didn't seem like a great solution. I was just wondering if anyone else out there knows a better way. I know I could use a callback and have that dispatch and action(using REDUX) when it is done loading and only then allow my stripe code to execute, but again this seems pretty annoying to do. Any insights on this issue would be appreciated.
return `
<!doctype html>
<html>
<head>
${head.base.toString()}
${head.title.toString()}
${head.meta.toString()}
${head.link.toString()}
${head.script.toString()}
${process.env.NODE_ENV === 'production' ? `<link rel='stylesheet' href='${assetsManifest['/app.css']}' />` : ''}
<link href='https://fonts.googleapis.com/css?family=Lato:400,300,700' rel='stylesheet' type='text/css'/>
<link rel="shortcut icon" href="http://res.cloudinary.com/hashnode/image/upload/v1455629445/static_imgs/mern/mern-favicon-circle-fill.png" type="image/png" />
</head>
<body>
<div id="root">${html}</div>
<script>
window.__INITIAL_STATE__ = ${JSON.stringify(initialState)};
${process.env.NODE_ENV === 'production' ?
`//<![CDATA[
window.webpackManifest = ${JSON.stringify(chunkManifest)};
//]]>` : ''}
</script>
<script src='${process.env.NODE_ENV === 'production' ? assetsManifest['/vendor.js'] : '/vendor.js'}'></script>
<script src='${process.env.NODE_ENV === 'production' ? assetsManifest['/app.js'] : '/app.js'}'></script>
<script src='https://js.stripe.com/v3/'></script>
</body>
</html>`;
Your issue is that your application scripts are running before stripe.js has been loaded.
put <script src='https://js.stripe.com/v3/'></script> in the head or, at the very least, before your app (app.js in this case).
My index.html has the following scripts.
<script src="js/moment.js"></script>
<script src="js/moment-timezone-with-data.min.js"></script>
When I run the electron app, I get an Uncaught Error: Cannot find module 'moment'. The timezone library seems unable to tell that I have included moment.js.
This does appear to be a problem with Electron, as doing the same thing in a regular HTML file structure leads to everything working fine.
EDIT:
I have tried modifying my code in the following manner.
<script src="js/moment.js"></script>
<script onload="window.moment = require(__dirname+'/js/moment.js');" src="js/moment-timezone-with-data.min.js"></script>
This still does not appear to produce any results.
This works for me in the current electron project I am working on:
<head>
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<script type="application/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="application/javascript" src="js/bootstrap.min.js"></script>
</head>
In case you want to write javascript in the html which is not electron related, you can do the following:
<script>
/* Javascript */
</script>
<script>if (window.module) module = window.module;</script>
<script>
const ipc = require('electron').ipcRenderer;
/* Rest of electron related javascript */
</script>
Great! this solves my problem with moment and timezone, working fine in app and in browser
<script>
if (typeof module === 'object') {window.module = module; module = undefined;}
</script>
my code:
<!-- inject:js -->
<script src="lib/index.js"></script>
<script src="lib/moment/moment-with-locales.min.js"></script>
<script src="lib/moment-timezone/moment-timezone-with-data.min.js"</script>
<script src="lib/mdg-foundation/mdg2.js"></script>
<!-- endinject -->
<script>if (window.module) module = window.module;</script>
Huzzah! This problem appears to be solved from this answer.
Electron: jQuery is not defined
Copy-pasted, the answer is as follows:
<!-- Insert this line above script imports -->
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<!-- normal script imports etc -->
<script src="scripts/jquery.min.js"></script>
<script src="scripts/vendor.js"></script>
<!-- Insert this line after script imports -->
<script>if (window.module) module = window.module;</script>
Basically, insert the first and last lines before employing script attachments.
Let's say I have a bunch of scripts on my server, which are used in my app.
So, my <head> contains a bunch of
<script src="http://myServer.com/myScript.js"></script>
If I am developing on localhost & don't have net access, I would like to reference those as a bunch of
<script src="http://localhost/myScript.js"></script> or, even,
<script src="myScript.js"></script>
I am very new to JS, is there a standard way to switch between two possible servers for the script file? Google is not my friend on this matter.
You could just dynamically load the script and add it to the document, based on whether you're accessing the page from localhost or not, as such:
<script>
var script = document.createElement("script");
if (/localhost/.test(document.location.hostname)) {
script.setAttribute("src", "./myScript.js");
} else {
script.setAttribute("src", "http://www.myServer.com/myScript.js");
}
document.body.appendChild(script);
</script>
In situations where I'd like to be able to continue development while offline on a webapp that has resources pulled from CDNs, I've used fallbacks.
For example, for jQuery:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
if(!window.jQuery) {
document.write('<script src="./js/jquery.min.js"><\/script>');
console.error('jQuery from CDN not available - reverting to local copy');
}
</script>
Or for BootstrapJS:
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
if(!(typeof $().modal == 'function')) {
document.write('<script src="./js/bootstrap.min.js"><\/script>');
console.error('Bootstrap JS from CDN not available - reverting to local copy');
}
</script>
Or for FontAwesome:
<link type="text/css" rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />
...
<span class="fa hide" id="faChecker"></span>
<script type="text/javascript">
if($('#faChecker').css('fontFamily') !== 'FontAwesome') {
$('<link type="text/css" rel="stylesheet" href="./css/font-awesome.min.css" \/>').appendTo('head');
console.error('FontAwesome CSS from CDN not available - reverting to local copy');
}
</script>
Similarly, you can make use of some variable that myScript.js would set and if it's not set, use the local fallback version.
This has the added benefit of helping prevent your site from malfunctioning if a CDN goes down.
I am trying to update an old cometd javascript wrapper and test client (was 1.3.x) that I have to the newer comet 2.5.1 javascript implementation. I have all of the dependencies and the browser can find them all, yet I am getting errors in Firebug's console (see below)
The head of my HTML is as below:
<head>
<title>CometD Tester</title>
<link rel="stylesheet" type="text/css"href="style/style.css" />
<script type="text/javascript" src="org/cometd/Cometd.js"></script>
<script type="text/javascript" src="org/cometd/AckExtension.js"></script>
<script type="text/javascript" src="org/cometd/ReloadExtension.js"></script>
<script type="text/javascript" src="jquery/jquery-1.9.0.js"></script>
<script type="text/javascript" src="jquery/jquery.cookie.js"></script>
<script type="text/javascript" src="jquery/jquery.cometd.js"></script>
<script type="text/javascript" src="jquery/jquery.cometd-reload.js"></script>
<script type="text/javascript" src="js/myCometd.js"></script>
</head>
All of these are found by the browser. Looking at Cometd.js I see the following:
org.cometd.Cometd = function(name)
{
....
}
So is that not defining org? Note that none of the errors in the Console are from Cometd.js. Otherwise I see no other definition of "org.cometd". I would really appreciate it if anyone can help me out. I am using Tomcat 7 and below is the dir structure:
Thanks.
UPDATE - Further testing
I reduced the header to:
<head>
<title>CometD Tester</title>
<link rel="stylesheet" type="text/css"href="style/style.css" />
<script type="text/javascript" src="org/cometd/Cometd.js"></script>
</head>
And removed ALL JS from the index.html. The only JS now included is the Cometd.js from the comet.org. There is still the same error... coming from the very first line in that script:
org.cometd.Cometd = function(name)
Not sure what I have missed here.
EDIT - Add jquery.cometd-reload.js
This is the contents of the file. It looks like it is "re-binding" functionality from the cometd library to use the jquery one instead (?). I'm not up to speed enough in JS to debug this (I'm a C++ dev really).
(function($)
{
function bind(org_cometd, cookie, ReloadExtension, cometd)
{
// Remap cometd COOKIE functions to jquery cookie functions
// Avoid to set to undefined if the jquery cookie plugin is not present
if (cookie)
{
org_cometd.COOKIE.set = cookie;
org_cometd.COOKIE.get = cookie;
}
var result = new ReloadExtension();
cometd.registerExtension('reload', result);
return result;
}
if (typeof define === 'function' && define.amd)
{
define(['org/cometd', 'jquery.cookie', 'org/cometd/ReloadExtension', 'jquery.cometd'], bind);
}
else
{
bind(org.cometd, $.cookie, org.cometd.ReloadExtension, $.cometd);
}
})(jQuery);
So the problem was that I misunderstood the project layout from the Comet.org site. I should have followed the direction posted at cometd primer for non-maven setups a lot more closely. Basically when you are setting up the project you download the distribution, and then you need to take the code from the war files bundled inside the tarball.
SO, once you have extracted the tarball...
Take the org folder from cometd-javascript-common-2.5.1.war (located in \cometd-2.5.1\cometd-javascript\jquery\target) or cometd-javascript-jquery-2.5.1.war (located in \cometd-2.5.1\cometd-javascript\common\target)
Take the jquery folder from cometd-javascript-jquery-2.5.1.war
The org namespace definition was in the file org/cometd.js which I did not have before, as I wrongly assumed that it had been replace by the org/cometd/Cometd.js file. The namespaces org and comet are defined as below starting on line 17 of that file:
// Namespaces for the cometd implementation
this.org = this.org || {};
org.cometd = {};
org.cometd.JSON = {};
The functions are working correctly now.
Try loading jQuery before any of the other JavaScript files -
<head>
<title>CometD Tester</title>
<link rel="stylesheet" type="text/css"href="style/style.css" />
<script type="text/javascript" src="jquery/jquery-1.9.0.js"></script> <!-- load first -->
<script type="text/javascript" src="org/cometd/Cometd.js"></script>
<script type="text/javascript" src="org/cometd/AckExtension.js"></script>
<script type="text/javascript" src="org/cometd/ReloadExtension.js"></script>
<script type="text/javascript" src="jquery/jquery.cookie.js"></script>
<script type="text/javascript" src="jquery/jquery.cometd.js"></script>
<script type="text/javascript" src="jquery/jquery.cometd-reload.js"></script>
<script type="text/javascript" src="js/myCometd.js"></script>
</head>