Bare Bones Dart Web App:

This is the most basic, bare-bones Dart project file structure you can have.

There are a few things to note here:

pubspec.yaml is the file that sets up the dart environement, and where you list dependencies. This is required in the root of the directory. pub is the package manager for Dart (much like yarn or npm in JS world). It looks for the pubspec file.

Because Dart can't run natively on browsers, it can't be in <script> tags. It needs to be pulled in. main.dart is the convention for the top-level Dart file.

The web directory is required. This is where pub will look to find your app.

index.html

This is exactly like what you'd be familiar with, you just need to make sure you're pulling in Dart correctly.

main.dart

An important note here is that you have to import the html library. This gives us all the methods we need for DOM manipulation, but they are not part of basis of Dart like in JS. You'll see this a lot in Dart.

import'dart:html';voidmain(){// This should look familiar!querySelector('#output').text ='Your Dart app is running.';}

pubspec.yaml

Finally, we have the pubspec file. As mentioned, pub will look for this file when you spin up a dart project. This file contains dependancies, including the dart_to_js_script_rewritter, without which a Dart app can't run in the browser.