Develop Reference

How to include external JS SDK in .NET .razor?

I'm trying to include the PayPal SDK in my .NET application. From the PayPal documentation, I need to include the following (with MY_CLIENT_ID coming from my PayPal application)
<script type="text/javascript" src="https://www.paypal.com/sdk/js?client-id=MY_CLIENT_ID"></script>
If I place this in my index.html, everything works perfectly.
The issue is that MY_CLIENT_ID cannot be hard-coded, as it varies from environment. From my understanding, this can't be configured dynamically in index.html. To remedy this, I've placed the id in my config file, then use that value to generate the src URL. Then, in my .razor file I'm using
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
var sdkUrl = await _billingApi.GetPayPalSDK();
await JS.InvokeAsync<IJSObjectReference>("import", sdkUrl);
}
}
from Microsoft's documentation
However, I'm running into this JS error and can't seem to find a solution. The sdkUrl matches exactly what I put in index.html. My guess is .NET is looking for the sdkUrl inside my project? Does anyone know the proper way to include an external JS script with a dynamic URL?

JavaScript in IntelliJ rest client

I have read most if not all of the documentation JetBrains provides about their HTTP Client and how to create requests using files with .http extension.
My problem is that I want to use a function in a different .js file inside one of the .http request files. The way they explain how this can be achieved is with this 1 liner "For external scripts, you need to enable it manually." The problem is they don't explain how you do the manual part. I did find that you have add any custom js code/library via Settings-> Languages and Frameworks -> JavaScript -> Libraries.
So my question is if anyone knows how to import custom JavaScript in a different location in a .http file? My JavaScript function is written in this manner:
export default function writeResponse(response, client) { ... }

For external scripts, you need to enable it manually
This quote from the docs is about enabling code assistance for external script, not about importing and exporting functions from scripts.
For your scenario, please try load(), for example:
### Import a function check() from a script new.js
GET http://example.org
> {%
load('/Users/YourPathToScript/scripts/new.js');
check();
%}

How to stop the warning: It looks like you're using the development build of the Firebase JS SDK?

It looks like you're using the development build of the Firebase JS SDK.
When deploying Firebase apps to production, it is advisable to only import
the individual SDK components you intend to use.
For the CDN builds, these are available in the following manner
(replace <PACKAGE> with the name of a component - i.e. auth, database, etc):
https://www.gstatic.com/firebasejs/5.0.0/firebase-<PACKAGE>.js
It takes half of my already limited console space :(
Note: I use firebase inside html .. with script tags. I don't use import syntax as explained here : similar question
How to stop this warning?

To answer this question a little more clearly,
What you most likely have is
<script src="https://www.gstatic.com/firebasejs/6.0.2/firebase.js"></script>
Because this is what Firebase gives you from the "Add Firebase to your web app" screen.
However, what this is doing is importing all of the Firebase modules. I don't know why Firebase has this as the generated script, but all you need to do is add -app to the source so it is now.
<script src="https://www.gstatic.com/firebasejs/6.0.2/firebase-app.js"></script>
Then with every subsequent feature of Firebase you would like to use, you would will need to add another script line. For example, if you would like to add cloud messaging to your web app it would only need.
<script src="https://www.gstatic.com/firebasejs/6.0.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.0.2/firebase-messaging.js"></script>
You can find more information including a complete list of imports here from Firebase.

Your error message tells you how to fix it... this part right here:
For the CDN builds, these are available in the following manner
(replace <PACKAGE> with the name of a component - i.e. auth, database, etc):
https://www.gstatic.com/firebasejs/5.0.0/firebase-<PACKAGE>.js
So if you're using Firebase authentication you'd have a script tag requesting https://www.gstatic.com/firebasejs/5.0.0/firebase-auth.js ... and for the Firebase database you would also have another script tag with https://www.gstatic.com/firebasejs/5.0.0/firebase-database.js .... just following that pattern for any other portions of Firebase you need.

The details given here are not super easy to understand:
step 1: Remove below line, because it's development build:
<script src="https://www.gstatic.com/firebasejs/5.8.6/firebase.js"></script>
step 2: Add below line, (required), production build:
<script src="https://www.gstatic.com/firebasejs/5.8.6/firebase-app.js"></script>
step 3: Add any more packages/sevices you need, like database, (optional), production build:
<script src="https://www.gstatic.com/firebasejs/5.8.6/firebase-database.js"></script>
This solved the issue.

vuejs - google tag manager

I have a vuejs project with various pages:
study.vue
result.vue
My client want me to add in the Google Tag Manager code so that they can use google analytic to track. Where should I add the code in my .vue file? Or should I just add it in the index.html?
Update01
This is what I do so far:
I add the Google Tag Manager code to the index.html.
I installed vue-gtm.
I have app.js and bootstrap.js. basically, bootstrap.js will have all my other js frameworks added. Like lodash.js or 'jquery.js'. I add the sample code from vue-gtm into bootstrap.js:
window._ = require('lodash');
window.moment = require('moment');
window.Vue = require('vue');
import VueRouter from 'vue-router';
Vue.use(VueRouter)
import VueGtm from 'vue-gtm';
Vue.use(VueGtm, {
debug: true
})
In all the vue file, I add this code:
this.$ua.trackView('Sample', 'samplepath');
However I got error:
TypeError: Cannot read property 'trackView' of undefined
What seems to be the error?

I assume you are talking about the script that you get when you create an account?
There should be two scripts to include in your HTML, one that has comments around it that include (noscript) and one that doesn't. Both should probably go in your index.html file (whichever file has the <head> and <body> tags). The one that has the noscript should go immediately after the <body> tag, the one that doesn't have the noscript should go near the top of the <head> section.
If you are asking how to fire an event, such as when the user interacts with one of those Vue elements, then yes the code for firing the event should go in the Vue component.
UPDATE 1: I looked into it and setup my own Laravel installation to test (since that seems to be what you're using) and tested it. The problem is that $ua is part of the Vue Analytics, so if you want to use $ua you need to install the vue-ua module as well and add that to Vue. I don't know why the documentation for the Tag Manager module shows how to use the Analytics module without making reference to it, maybe you should file an issue on the Tag Manager GitHub to make the documentation more clear!
So in summary, you should replace $ua with $gtm instead. I tested it and $gtm has a trackView function so it will probably achieve what you want, but I don't know how to use Google Tag Manager so you'll have to test it out yourself.

Django cannot find the djangular/app.js file via the urls.py config. How to troubleshoot?

I've spent a few days trying to figure this out and it's driving me up the wall. I'm limited on what I can copy and paste, so forgive the 'code brevity'. I also have a working version I developed and have uploaded it to GitHub.
I'm developing a Django website that also uses AngularJS, so I'm using the djangular package, specifically the bit that lets me import Django variables into Angular. This is the section from GitHub:
To use the AngularJS module that Djangular provides you, you'll need to add the djangular app to your projects URLs.
urlpatterns = patterns('',
...
url(r'^djangular/', include('djangular.urls')),
...
)
And I've placed this in my project/urls.py file. I've done the same with my GitHub repository.
When I reference that URL in my appName/app/index.html, I do so like this:
<script src="{% static 'djangular/app.js' %}"></script>
But that leads to a 500 response from the server as Angular produces the Module 'djangular' is not available! error. What should be happening is that the URL djangular/app.js in the script tag above, should redirect to urls.py inside the Djangular folder in the Python site-packages, which then points to DjangularModuleTemplateView.as_view(). This seems to work in my GitHub version, but not in the local version I have for some reason.
If I have my script tag without the "{%static '...'%}" part I still get a 500, with the same error:
<script src="/djangular/app.js"></script>
What config could I possibly have overlooked that's causing the app not to find the right Djangular config? I've stared at both configurations so long my eyes are glazing over, and I'm struggling to find any differences. What else could it be?
I'm more than happy to provide more details if needed to answer this question.

I managed to solve this myself by running ./manage syncdb
This creates various tables (the user table, and the session table at least) which are required for Djangular to run.
Then I double checked all my <script> imports/includes.