Getting Started with Dart and Atom

So you want to start writing web apps, progressive web apps, server apps, command-line utilities, mobile apps, and IoT programs with Dart, right? Of course you do! It's a fantastic developer experience. But first you need to set up your development environment, and I'm here to show you how you can do that for the low, low price of free, using the planet's most hackable code editor, Atom.

Dart

Dart is an open-source, scalable, object-oriented programming language, with robust libraries and runtimes, for building web, server, and mobile apps. It was originally developed by Google, but has since become an ECMA standard.

Dart Primers

Check out the Dart Language Tour for a crash course in the Dart language. If you already know JavaScript, Java, PHP, ActionScript, C/C++/C#, or another "curly brace" language, you'll find Dart to be familiar, and you can be productive with Dart within an hour or so.

If you like learning from videos, take a look at Learn Dart in One Video.

Get Dart

Before you can get into the exciting world of writing Dart code, you need to download the Dart SDK and, for web apps, a special browser called Dartium:

Update Your System PATH

A whole lot of things will go more smoothly for you if you complete this step. With the Dart SDK's bin directory in your system PATH, Atom will be able to auto-locate Dart, and you'll be able to use Dart's command-line tools, such as Pub, more easily. With Pub's cache/bin directory in there, you'll be able to use other Dart command-line tools more easily.

To add paths to your system PATH environment variable, refer to the appropriate section for your operating system.

Windows

If you're on Windows and afraid of or averse to the command line, check out How to Edit Your System PATH for Easy Command Line Access in Windows for a thorough guide to making this adjustment with the Windows UI.

Example Paths

Dart SDK: C:\Program Files\dart\dart-sdk\bin
Pub Cache: C:\Users\<user>\AppData\Roaming\Pub\Cache\bin (insert system user name in place of <user>)

Command Line
> set PATH=%PATH%;path\to\dart-sdk\bin;path\to\pub\cache\bin

Mac OS

Example Paths

Dart SDK: See Installation locations at Installing Dart on Mac
Pub Cache: ~/.pub-cache/bin

Command Line
$ export PATH=$PATH:path/to/dart-sdk/bin:path/to/pub/cache/bin

Linux

Example Paths

Dart SDK: See Installing Dart on Linux
Pub Cache: ~/.pub-cache/bin

Command Line
$ export PATH=${PATH}:path/to/dart-sdk/bin:path/to/pub/cache/bin

Note: You may need to restart to gain the benefits of the new system PATH settings.

Atom

According to its site, Atom is a text editor that's modern, approachable, yet hackable to the core—a tool you can customize to do anything but also use productively without ever touching a config file. Sounds like exactly what we need.

Get Atom

Head to the Atom site to download and install the editor.

Install the dartlang Atom Package

The dartlang package for Atom supports features like auto-discovery of the Dart SDK, errors and warnings shown as you type, code completion, refactoring, debugging, and integration with Pub and other tools. Follow these steps to get it installed:

  1. Run Atom.
  2. On Atom's Welcome Guide panel, select Install a Package, then select the Open Installer button. (NOTE: If you do not see the Welcome Guide panel, bring it up by selecting Help -> Welcome Guide in the application menu.)
    • Alternatively, you can get to the same view by selecting File -> Settings and choosing Install in the Settings navigation column.
  3. In the Install Packages view, type dartlang into the Search packages input box and click the Packages button next to it.
  4. The dartlang package should be among the search results (probably first). Select the Install button for that package.
  5. During the installation, you should briefly see a popup indicating that the package has located the Dart SDK. If not, that may mean you didn't properly complete the Update Your System Path step above.
    • If you need to set the Dart SDK path manually, you can do so by selecting Packages -> Dart -> Package Settings... from Atom's menu.

For lots, lots more, read the Getting Started Guide for Atom's Dart plugin.

Creating Dart Projects

At the time of this writing, Atom's Dart plugin doesn't yet have the ability to create Dart projects from the UI, though there has been a feature request filed. So for now, you'll need to use Dart's command-line project creation tool, Stagehand.

If your system PATH variable has been updated correctly, you should be able to install Stagehand from your system terminal with the following command:

pub global activate stagehand

For up-to-date, simple instructions on Stagehand's use, take a look at the Stagehand homepage. There, you will see that the tool can create different types of projects from templates, including console applications, web applications, and Polymer or Angular 2 projects.

Opening Dart Projects

Once you've used Stagehand to create a functioning Dart project, you're ready to open it in Atom. As noted in the Getting Started Guide, you should open existing Dart projects with the File -> Add Project Folder... menu option.

Getting Dependencies

A Dart project's dependencies are managed in the pubspec.yaml file, which resides in your project's root folder. To download dependencies, right-click pubspec.yaml in Atom's project view and select Pub Get. Alternatively, you can navigate to your project's directory in a terminal and type:

pub get

Running Dart Projects

As of this writing, Atom can launch only console applications from within the UI. Web applications should be run using Dart's Pub Serve tool.

Running a Console Application

If your project is meant to run on the command line, all you have to do is click Run in the Atom toolbar (it looks like a typical Play button for media). Make sure the correct Dart file is displayed in the dropdown. This example shows Atom ready to run my Secret Santa application.

A screen shot Atom's toolbar.

Once you've run it, you should see any output from your app at the bottom of the Atom interface. Atom's Dart plugin even offers integrated debugging for console apps!

Running a Web App with Pub Serve

On the command line, navigate to your project's root directory and run:

pub serve

By default, Pub Serve runs on localhost:8080.

Run Dartium

To launch Dartium, navigate to its directory in your finder or file explorer and double-click the Chromium executable file.

Note: While this tool is referred to as Dartium, the executable on Mac/Linux is named Chromium, and on Windows it's named chrome.exe. For instance, if you used Dart for Windows to install the Dart SDK and Dartium, the default path to Dartium would be something like C:\Program Files\dart\chromium\chrome.exe. Since you'll be running this often, it might be a good idea to create a desktop shortcut for Dartium (on Windows, right-click your Desktop and select New -> Shortcut).

Enter localhost:8080 into the address bar. If it's your first execution of a new project, be patient as Dart runs transformers on your build. Before long, you should see your running project appear.

Conclusion

The Dart plugin for Atom is being very actively developed, and new features appear regularly. I will try to update this guide as they become available. In the meantime, Atom is a great way to get started with Dart without breaking the bank, and it gives you many of the features of big, costly IDEs.