Getting started with App Insights and Squido?

[SeaDude]

Hello,

I use App Insights all the time with Azure Functions and PowerApps and would like to integrate with Squido as well. Squido is a static site generator that takes very little customization to get started. As such, you don't have to peek under the hood much, it just works.

Could someone point me to a version of the App Insights Javascript SDK that would best fit with a static sit generator like this?

[MSNev]

To me it sounds like you would need to drop the snippet onto the page as per the documentation https://github.com/Microsoft/ApplicationInsights-JS#snippet-setup-ignore-if-using-npm-setup

[SeaDude]

Hm.

1. The snippet method looks as though it places the INSTRUMENTATION_KEY in plaintext on every screen, no?

• Would it be visible with Right click / view source?

2. Since Squido is installed with npm install -g squido, does this mean I could use the npm method instead of the snippet method?

• I ran npm i --save @microsoft/applicationinsights-web to install App Insights locally
• Its unclear to me where to put this import code:

import { ApplicationInsights } from '@microsoft/applicationinsights-web'

const appInsights = new ApplicationInsights({ config: {
  instrumentationKey: 'YOUR_INSTRUMENTATION_KEY_GOES_HERE'
  /* ...Other Configuration Options... */
} });
appInsights.loadAppInsights();
appInsights.trackPageView(); // Manually call trackPageView to establish the current user/session/pageview

Do you have any insights on this one?

[MSNev]

1. Yes, it does but so does any other solution as we are talking about JavaScript here so anyone can take a peak and identify it.
2. If your using NPM packages then the block of code above should be located somewhere in your application JavaScript initialization steps, depending on when you want to spin it up and start sending events -- the recommended point in time is as soon as possible because it's not until after initialization (the loadAppInsights() call) that the standard hooks (XHR, fetch, document events, etc) are wired in and therefore it can start tracking events / requests.

[SeaDude]

Thanks for the details.

RE: 2: When you say ...in your application JavaScript initialization steps..., where exactly is this?

• Aside from setting up a Github repo, locally I ran:

1. npm install -g squido
2. mkdir test
3. git clone https://github.com/mrvautin/squido-docs test; cd test
4. squido serve -b -w -c

• I then replaced the sample posts with my own markdown, etc.

5. git add . , git commit -m "test", git push origin

• This (obviously :) ) pushes the code to my Github repo where Azure DevOps takes over

On DevOps side, the pipeline script is very simple:

trigger:
  - main

pool:
  vmImage: ubuntu-latest

steps:
  - checkout: self
    submodules: true
  - task: AzureStaticWebApp@0
    inputs:
      app_location: '/'
      output_location: '/build'
      azure_static_web_apps_api_token: $(deployment_token)

Where is the app JS init step you're referring to?

Thanks for the continued engagement! I'm very stoked on this tool and would like to integrate App Insights to get some analytics.

[MSNev]

Ok, I've now looked at this in a little more detail (as I had never heard of Squido before -- also fixed the link in your initial post) and it looks like your only option (without creating your own plugins) would be to add the code to one or more templates (didn't dig in to see if there is a common one -- but I would expect there would be).

From these the easiest option would be to use the snippet and just add it to a common template (*.hbs), beyond that you would need to "create" your own script (using the NPM approach above) to effectively re-create the snippet and then again including your custom script (<script href="..." /> -- which would include the contents of the ApplicationInsights npm bundle) into a template and on loading this script could then initialize AI using the loadAppInsights() (this last step is the JS init step I was referring to )

[SeaDude]

Ok. That makes sense to me. I'll go with the snippet method you originally recommended.

Looks like Azure Static Web Apps doesn't allow App Insights for static web sites (odd). They want an Azure Function in there somewhere in order to enable it:

No biggie, just odd. I spun up a stand-alone App Insights resource and placed the instrumentation key in the snippet. Then placed the snippet in all .hbs files in the project:

Lets see if it builds!...

[SeaDude]

Sweeeeeet! Thank you for being patient and guiding me through that @MSNev. I appreciate it very much :)

Builds and I now have some telemetry coming in!

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.