Web server

If developing a traditional web application that is to be accessed via the browser, the recommended approach is to deploy it to a web server and access it via http:// (or https://) rather than file://. Web server software is available free of charge for all operating systems. For Windows, IIS is recommended. On Mac OS and Linux, Apache is a popular option but any web server will do.

As a side note, a web server is not necessary when the ArcGIS API for JavaScript is used in embedded scenarios, for example Microsoft PowerBI, Windows Store app, or Adobe Creative Cloud.

Writing code

JavaScript developers have a wide-range of development environment options. Some individuals prefer text editors that have many keyboard shortcuts for traversing through words, sentences, paragraphs, etc. Others are partial to more robust Integrated Development Environments (IDE) that often have many more tools related to code refactoring, syntax checking, code completion, code formatting, and source code management. Whichever editor you use, we recommend validating your code throughout your development process.

Code validation

The JavaScript team maintains a collection of useful resources for developers using the ArcGIS API for JavaScript. Two popular options for inspecting your source code are JSLint and JSHint. Both are code quality tools that scan your code to identify potential issues such as missing semicolons, trailing commas, implied globals, unreachable code and more. Using a linter can save you debugging time by quickly identifying issues that are easily overlooked. One resource that may improve your code quality is the JavaScript team's JSHint configuration file.

Code assist and IDE configurations

Many of the newer IDEs (e.g. Atom, Sublime Text, Visual Studio Code) support syntax checking with JSHint and code hinting when providing a TypeScript definition file. The JavaScript team maintains a TypeScript definition for the ArcGIS API for JavaScript. Amongst the JavaScript team, the most popular editors are Sublime Text, Visual Studio Code, and WebStorm. Below is a list of some of the more popular options (some are free, some require paid licenses).

• Atom
• Aptana Studio
• Brackets
• Microsoft Visual Studio Code
• Sublime Text
• WebStorm, PyCharm, RubyMine, PhpStorm, IntelliJ IDEA^*

Aptana Studio 3

Aptana is a free IDE that simplifies the process of building Web applications. Aptana provides many features that simplify the coding process such as code assist, color-coding, integration of popular JavaScript libraries and much more.

Download and install Aptana Studio.

After downloading and installing Aptana you can customize it to specify options like custom formatters, tab width and variable highlighting. You can also enable JSLint, a code quality tool.

Tabs are not defined the same way across various editors which can lead to formatting issues when your code is viewed in another enviroment. To avoid this you can replace tabs with spaces, two spaces is a good default option.

1. Click Windows > Preferences.
2. Expand General > Editors.
3. On the TextEditors pane check the Insert spaces for tabs option.
4. Change the Displayed tab width to be 2 spaces instead of 4.

Variable highlighting allows you to select a variable in Aptana to view all the occurrences of selected variable in the file. Enable variable highlighting by checking the Highlight current line option in the General > Editors > Text Editors section of the Preferences dialog.

Aptana provides several options for formatting your code (CSS, HTML, JavaScript). You can customize the formatting to suit your needs using Aptana's Preferences dialog. Once the formatters are applied click CTRL+Shift+f to format the current file.

Install JSLint:

1. Open Aptana, then click Window > Preferences.
2. Using the menu, navigate to Aptana > Validation.
3. Click JavaScript in the Validation Pane. By default the Mozilla JavaScript Validator is enabled. Uncheck this, then check the JSLint JavaScript Validator and click OK.
4. To view issues discovered by the validator, click Window > Show View > Problems.

Microsoft Visual Studio Code

Microsoft Visual Studio Code, is a free development enviroment for building Web applications.

Instructions for installing extensions, such as JSLint, for Visual Studio Code can be found here. For JSlint, review the documentation for more details.

WebStorm

Download WebStorm and take a tour of the Quickstart Guide.

Setup Coding style:

1. Open the project settings > Code Style > HTML
   • Change the values for Tab size, Indent, and Continuation indent to be 2 spaces instead of 4.
2. Open the project settings > Code Style > JavaScript
   • Change the values for Tab size, Indent, and Continuation indent to be 2 spaces instead of 4.
3. Open the project settings > Code Style > CSS
   • Change the values for Tab size, Indent, and Continuation indent to be 2 spaces instead of 4.

For more advanced Code Style formatting, visit the Web Help topic on Code Style.

Setup Code Quality Tools:

1. Make sure you have downloaded the Esri JSHint resource.
2. Open the project settings > JavaScript > Code Quality Tools > JSHint
3. Verify the Enabled and Use config files options are both checked .
4. Enable the Custom configuration file radio option, and set the path to the location on disk where the .jshintrc file is stored.
   • /Users/Account/JavaScript/jsapi-resources/jshint/.jshintrc
   • C:\JavaScript\jsapi-resources\jshint\.jshintrc

For more information on Code Quality Tools, visit the Web Help topic on Code Quality Tools.

Setup JavaScript libraries:

1. Open the project settings > JavaScript > Libraries
2. Add > New Library
   • In the Name input type "esrijs TypeScript".
   • For the Framework type select "<Custom>".
   • Set the Visibility to "Global" so all projects may use this library.
   • Click plus sign "attach files", to select a typescript file.
     • Navigate to the arcgis-js-api.d.ts file on disk. e.g.,
       • /Users/Account/JavaScript/jsapi-resources/typescript/arcgis-js-api.d.ts
       • C:\JavaScript\jsapi-resources\typescript\arcgis-js-api.d.ts
     • Click OK to attach the typescript definition file.
   • In the type list, select "Debug".
3. Click Ok to close the Add > New Library window.
4. Click Apply to confirm the changes.
5. Click Ok to close the project settings.

For more information on Configuring JavaScript Libraries, visit the Web Help topic on Configuring JavaScript Libraries. Also read the JetBrains WebStorm Blog on How WebStorm Works: Completion for JavaScript Libraries.

There are many Plugins for WebStorm, in addition to the built-in functionality. The Needs More Dojo plugin is useful for adding support to import Dojo modules, as well as organizing dojo module imports. For more information on Managing Plugins, visit the Web Help topic on Managing Plugins.