topic Running local with separate files using the new CDN in ArcGIS JavaScript Maps SDK Questions

Running local with separate files using the new CDN

AntonioMedrano — Wed, 10 Sep 2025 17:35:16 GMT

Hi there,

I've been teaching the Maps SDK for JS for a while now, but it's been a couple years since I last did so, and boy has a lot changed! I'm used to using the require([],()=>{}) function to bring in the modules that I'll be using, and running my files locally using separate html, javascript, and css files. This seems to no longer be supported by the API reference documentation. I think if I can get a basic web map working locally with separate files, I should be good to go. Any help is much appreciated!

<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>Intro to MapView - Create a 2D map | Sample | ArcGIS Maps SDK for JavaScript 4.33</title>  <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/4.33/esri/themes/light/main.css">  <link rel="stylesheet" type="text/css" href="./style.css" />  <script src="https://js.arcgis.com/4.33/"></script>  <script type="module" src="./script.js"></script> <body> <div id="viewDiv"></div> </body> </html>

// Load the Map and MapView modules // require(["esri/Map", "esri/views/MapView"], (Map, MapView) => { const [Map, MapView] = await $arcgis.import([ "@arcgis/core/Map.js", "@arcgis/core/views/MapView.js", ]); const myMap = new Map({ basemap: "topo-vector", }); const myView = new MapView({ container: "viewDiv", map: myMap, zoom: 4, center: [15, 65], // longitude, latitude }); //});

Re: Running local with separate files using the new CDN

D_Atkins — Wed, 10 Sep 2025 17:22:08 GMT

When I run your files locally, I receive a CORS error (not too surprising). Rather than try and bypass that (you'd want to setup a 'local webhost'), it was just as easy to throw those files out on GitHub: I don't see any errors?

Intro to MapView - Create a 2D map | Sample | ArcGIS Maps SDK for JavaScript 4.33
https://daneatkins-github.github.io/DemoPage/index.html

Re: Running local with separate files using the new CDN

Sage_Wall — Wed, 10 Sep 2025 17:32:55 GMT

Hi @AntonioMedrano

I would start making the transition to the map components API rather than creating the MapView programmatically. Something like this should work and easy to build from.

index.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>CDN APP</title>  <script type="module" src="https://js.arcgis.com/calcite-components/3.2.1/calcite.esm.js" ></script>  <link rel="stylesheet" href="https://js.arcgis.com/4.33/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.33/"></script>  <script type="module" src="https://js.arcgis.com/4.33/map-components/" ></script>  <link rel="stylesheet" href="styles.css" /> </head> <body> <arcgis-map item-id="237b9584339446a0b56317b5962a4971"> <arcgis-zoom position="top-left"></arcgis-zoom> <arcgis-legend position="bottom-right"></arcgis-legend> </arcgis-map>  <script type="module" src="main.js"></script> </body> </html>

main.js

const mapElement = document.querySelector("arcgis-map"); await mapElement.viewOnReady(); console.log("The map view is ready!");

styles.css

html, body { height: 100%; margin: 0; }

Re: Running local with separate files using the new CDN

JeffreyThompson2 — Wed, 10 Sep 2025 18:02:47 GMT

https://developers.arcgis.com/javascript/latest/sample-code/intro-mapview/

ESRI is moving away from it, so maybe it's not the best choice for a new application, but the require() syntax is still valid as of 4.33.

Re: Running local with separate files using the new CDN

AntonioMedrano — Wed, 10 Sep 2025 19:11:54 GMT

Thanks for the reply! Unfortunately this gets a CORS error when run locally. I was taught that it was always good to separate your HTML, JS, and CSS, but I think the <script type="module" ...> seems to make that not work locally. For teaching absolute beginners, is it preferred now to just keep everything in one HTML file?

Re: Running local with separate files using the new CDN

Sage_Wall — Wed, 10 Sep 2025 22:10:10 GMT

You're right, scripts seem to be blocked from local file paths due to a CORS error when you try to open the HTML file directly in a browser. It's now considered best practice to host your files on a local web server, and in many cases, it's necessary.

There are many options available, from using a full-fledged server like Apache or IIS to something more temporary. For quick local hosting, I find these options useful, they are not official esri recommendations or products:

Live Server for VS Code: This is a free extension that makes it easy to host your current directory. It also automatically refreshes the browser when you save your files. You can find it on the Visual Studio Marketplace.
http-server: This is a simple, zero-configuration command-line HTTP server that you can install via npm. You can find the package and installation instructions on the npm website.

Re: Running local with separate files using the new CDN

Sage_Wall — Wed, 10 Sep 2025 22:34:59 GMT

You should also be able to host on github pages, but that's not ideal for development. This is the same app above hosted on github.

https://sagewall.github.io/cdn-app-template/

https://github.com/sagewall/cdn-app-template

Hope this helps 😀