Set up your Story Maps development environment

Esri Story Maps
Oct 28, 2015 · 2 min read

Clone an app’s Github repository or download a copy of the repository as a zip file.

To build a production version of the application from the source code, you first need to install Node.js.

Then initialize the environment by running the following commands in the Apps folder:

  • npm install
  • npm install –g grunt-cli

This will create a new node-modules folder in your project root with all the tools required to build the application. If you have trouble running the second command, see this documentation on how to install grunt-cli locally.

How to use the application from the source code

  • Make accessible the app’s folder on a web server. Use your favorite server or run one with grunt server, this will start a server on port 8080
  • If using a Portal for ArcGIS instance configure the sharing url app/config.js (last property)
  • Use the URL parameter appid to specify the web item to be loaded, e.g.: http://localhost:8080/?appid=ABCD (configuring index.html > configOptions.appid is not supported in development mode)

How to build application from the source code

  • Open a terminal and navigate to the app’s folder
  • Run the following command: grunt

The deploy folder now contains the built application that you can deploy to your web server.

Issues building the application

The build script perform code validation through JSHint, you can disable those validations by editing Gruntfile.js and look for the following comments /* Comment out to disable code linting */.

Story Maps Developers' Corner

Learn best practices, read quick tips, and discover new ways to make your story map stand out from the crowd. Start creating your story at: http://storymaps.arcgis.com

Esri Story Maps

Written by

The Story Maps team at Esri makes tools that enable you to tell digital stories harnessing the power of geography, maps & GIS. And we use the tools too!

Story Maps Developers' Corner

Learn best practices, read quick tips, and discover new ways to make your story map stand out from the crowd. Start creating your story at: http://storymaps.arcgis.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade