ArcGIS Maps SDK · Official Esri CLI

One command gives you a running map app.

npm init @arcgis is Esri's own tool. It generates a complete ArcGIS Maps SDK for JavaScript app — SDK, map components, bundler, and TypeScript already wired — that opens in your browser in about a minute. No manual setup.

See the Commands Open the Live Shell

1 Command to a Running App

5 Framework Templates

0 Config Files to Write

Terminal

$ npm init @arcgis
✓ Project name … my-map-app
✓ Template … vite
✓ Created my-map-app

$ cd my-map-app && npm install
added 214 packages in 12s

$ npm run dev
VITE ready in 486 ms
→ Local: http://localhost:5173/
A live ArcGIS map is now running.

What `npm init @arcgis` Is

It is a scaffolding tool — a command that writes a full starter project for you. Esri publishes and maintains it as part of the ArcGIS Maps SDK for JavaScript.

The Old Way

Make a folder, install the SDK, pick and configure a bundler, set up TypeScript, and write the map boilerplate by hand before you see a single map.

With the Command

One line generates the whole project already wired: SDK, ArcGIS map web components, bundler, and TypeScript. You answer a couple of prompts and it builds the folder.

What You End Up With

Real source code you own on your machine — not a locked black box. Open it in any editor, change it, commit it to git, deploy it anywhere.

How to Run It

You need Node.js 22.21 or newer and git installed. Then it is four short commands from nothing to a map in your browser.

1 · Scaffold npm init @arcgis

2 · Install npm install

3 · Run Locally npm run dev

4 · Deploy vercel --prod

The Sample Map Is On Purpose

Step 3 opens a demo map (often a wheat-production layer). That is Esri proving the SDK loaded and the app runs — your green light. Swap it for your own layer; it was never meant to be your subject.

Pick a Template With `-t`

npm init @arcgis starts the tool.

Run with no flags and it prompts you for a name and template. Add flags to skip the questions.

npm init @arcgis -- -n my-app -t vite

Templates You Can Choose

vite — plain TypeScript app, no framework.
react — the default if you skip -t.
vue and angular — if that is your stack.
cdn — one HTML file, no build step.

Plain English: The Words on Your Screen

You do not need to memorize the terminal. You need to recognize a handful of words when they scroll past — enough to run the demo yourself and supervise an AI agent doing the rest.

vite

The workshop, not the product. While you build, Vite serves your app at localhost and refreshes the browser every time you save a file. When you ship, npm run build packages everything into plain files any web host can serve. Vite is never part of the finished app — it is the kitchen, not the meal.

cd ~/dev

"Go to this folder." The same as double-clicking a folder in Finder.

ls -la

"Show me what is in this folder" — a Finder window, as text. The -la adds detail and hidden files.

cat · wc -l

"Print this file on screen" and "count its lines." Read-only peeks, handy for showing how small the app really is.

npm

The delivery service. npm install downloads the libraries a project needs; npm run dev and npm run build run jobs the project defines.

localhost:5173

Your machine talking to itself. The app runs privately on this computer — nothing is on the internet yet. If 5173 is busy, Vite picks the next number.

Ctrl+C

"Stop the server, give me my terminal back." While the server runs, that terminal window is busy on purpose — it is not waiting for you to type.

①

Know These Cold — Seven Things

cd, ls, npm install, npm run dev, npm run build, Ctrl+C, and "open localhost in the browser." That is the entire live-demo vocabulary. Everything you type on stage is on this list.

②

Let the Agent Drive the Rest

cat, wc, grep, git incantations — you never type those. You recognize them when Claude or Codex runs them, so you can supervise and call nonsense. Reading fluency, not recall — like reading a P&L without being the accountant.

Why Your Peer Will Like It

If you already know ArcGIS but avoid the web-app setup, this is the part that was in your way — handled by Esri. Here is the pitch to hand a colleague.

Skip the setup

"The reason I never built a web map before was all the plumbing — installing the SDK, configuring a bundler, wiring TypeScript. This one command does all of it, so I start from a working map instead of a blank folder."

What the Starter Becomes

This page started as the vite template above. The demo map was swapped for three live public feeds — USGS earthquakes, NIFC wildfires, and NWS severe weather alerts. No API keys, no accounts. Toggle the feeds, click a feature.

Live Public Data