Build quickly with npm create @mapbox/web-app

#javascript #webdev #tooling #npm

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, run the command in your terminal.

$ npm create @mapbox/web-app

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 to 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 Mapbox access token and the tooling will pass this into the appropriate local .env file
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. 🔥