Community
Select to view content in your preferred language

SDK + Vite + Typescript with the CDN

153
1
Thursday
mjperez-usgs
by
New Contributor
Thursday

I inherited a web application that uses the Maps Javascript SDK (4.30 currently, will hopefully upgrade once I can get the thing into a usable state again).

The development experience is pretty frustrating as I cannot use Vite's HMR feature as any change triggers a full page reload. The page load takes nearly 90 seconds, mostly due to what appears to be the arcgis core and calcite components being compiled every single time, and it's really frustrating. On an adjacent app we have in our production environment, it is loading the SDK off the server itself, which is far slower than our older version which loads it from the CDN (but it just plain javascript).

 

Are there any samples that use typescript + vite together that load the library from CDN? I would love to not have to have it compile over and over again and take 30+ seconds to load on our production site. I see examples for typescript, I see examples for vite, but I haven't found anything that actually works for vite + typescript and the CDN. I set the script in the header on the initial page, don't configure assets path, but it still loads from the server.

Tags (3)
0 Kudos
1 Reply
ReneRubalcava
by Esri Frequent Contributor
Esri Frequent Contributor
Thursday

I was finishing up for the day, but couldn't pass this up. Yes, you can do this! It's a little different today, then what I would have probably done even a year ago, but here you go.

https://github.com/odoe/arcgis-ts-vite-cdn

We have an $arcgis helper only available on the CDN that you can use. You need to type it yourself though and add the core typings. You'll install core, but not use it except for types.

Edit - may not need this reference type, but you let me know if you can remove it, lol

/// <reference types="@arcgis/core/interfaces.d.ts" />
declare global {
  interface Window {
    $arcgis: { import: <T>(modules: string | string[]) => Promise<T> };
  }
}
export {};

 

Then you can do this.

const [Bookmarks, Expand, MapView, WebMap] = await window.$arcgis.import<
  [typeof __esri.Bookmarks, typeof __esri.Expand, typeof __esri.MapView, typeof __esri.WebMap]
>([
  "@arcgis/core/widgets/Bookmarks.js",
  "@arcgis/core/widgets/Expand.js",
  "@arcgis/core/views/MapView.js",
  "@arcgis/core/WebMap.js",
]);

const webmap = new WebMap({
  portalItem: {
    id: "e691172598f04ea8881cd2a4adaa45ba", // World Topographic Map
  },
});

 

This should work. It works in this sample app, but I have never done this exact scenario until today, so take that for what it's worth. I've done lots of other TS/CDN/AMD stuff, so yeah. This is one of those things I always told myself will work, so yeah, I'm glad to see it does.

0 Kudos