Build quickly with npm create @mapbox/web-app

#tooling #npm #javascript #webdev

The Mapbox Developer Relations team recently released a new developer tool to help web developers quickly scaffold Mapbox GL JS into their favorite frontend frameworks. You can now go from zero to hero with a map in your app in about 10 seconds. 🚀

To get started, ensure you have npm installed and run the command in your terminal.

$ npm create @mapbox/web-app

(Requires Node.js v20+.)

Why this is helpful

If you work with Mapbox GL JS in modern JavaScript frameworks, you'll know that spinning up a map in your app can take more time and effort than you'd like. This tool abstracts away project configuration, dependency management and lets developers get a simple map running very quickly. This allows you to test ideas & features fast, without having to clone a local repo or project as a starting point.

`npm create @mapbox/web-app`

The npm create @mapbox/web-app package is a CLI tool that uses Vite templates to quickly build a project into the following frameworks:

Vanilla JS (with & without a bundler)
React
Vue
Svelte
Angular

You can also also add interactive search to your map by adding Mapbox Search JS via the install prompts.

The CLI tooling asks 4 questions:

Which framework do you want to use?
Choose a project name..
Access Token - Insert your public Mapbox access token and the tooling will pass this into the appropriate local .env file. Get yours from your developer console
Add Search JS (or not)

After answering those questions you'll have a full-screen Mapbox GL JS map loading in the browser within seconds, ready for you to customize. 🔥

Next Steps

Now that you have a full screen map loaded, where do you want to go next? If you are a new developer using Mapbox, you can expand this simple application by following one of these tutorials:

The tutorials above demonstrate state management best practices for these frameworks, how to track & display map state into the application UI and how to trigger map events from the UI.

If you are an experienced developer and are familiar with Mapbox products, you can browse our tutorials for inspiration or search them for your use case.