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. The two most 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. For more information, check out the Esri resources on JSHint.

Code assist and IDE configurations

Many of the newer IDEs (JetBrains IDEs^*, Sublime Text, and Visual Studio) 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. For more information, see the Esri TypeScript resource on GitHub. Amongst the JavaScript team, the most popular editors are Aptana/Eclipse, Brackets, Sublime Text 2, and WebStorm. Below is a list of some of the more popular options (some free, some require paid licenses).

• Atom
• Aptana Studio
• Brackets
• Microsoft Visual Web Developer Express
• Notepad++
• Sublime Text 2 or 3
• Vim
• WebStorm, PyCharm, RubyMine, PhpStorm, IntelliJ IDEA^*

Aptana Studio 2

Aptana is a free IDE and provides many features that simplify the coding process such as code assist, syntax highlighting and more.

1. Download and install Aptana Studio.
2. Install the Dojo plug-in using the Help > Install Aptana Features menu option. In the Aptana Features dialog expand JavaScript libraries and select Dojo to install the Dojo libraries.

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 Aptana > Editors.
3. Click the General tab and select the Use spaces option.
4. Click Edit and modify the Displayed tab width to be 2 spaces instead of 4.
5. Enable the Insert spaces for tabs in the General > Editors > Text Editors section of the Preferences dialog.

Variable highlighting allows you to select a variable in Aptana to view all the occurrences of a 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 > Editors > JavaScript > Validation.
3. By default the Mozilla JavaScript Validator is enabled. Uncheck this, then check the JSLint JavaScript Validator and click OK.
4. To display the validator, click Window > Show View > Validation. There are several toggle buttons on the window that allow you to display information, errors, and warnings.

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 Web Developer Express

Microsoft Visual Web Developer Express, is a free development enviroment for building Web applications.

Instructions for installing the JSLint add-in for Visual Studio or Visual Web Developer can be found in this blog post. After installing the add-in, you can open the jslint.wsf file in a text editor and explore the various options set in the defaults section. Review the JSLint documentation for details on each option.

Notepad ++

Notepad++ is a free source code editor that supports several languages including JavaScript.

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 Settings > Preferences to open the Preferences dialog.
2. Select the Language Menu/Tab Settings tab.
3. Click the Tab Size link and define the number of spaces for each tab, two is a good default option.

Variable highlighting allows you to select a variable in the code file which highlights all occurrences of the selected variable in the specified color. Enable this option by clicking the Smart Highlighting check box on the MISC tab of the Preferences dialog.

To enable JSLint in Notepad++, download and install the JSLint Plug-in.

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.