Are you new to Dart, Angular2, or Bootstrap but want to hang out with all the cool kids making single page applications using bleeding edge software? As a newcomer, combining that stack and turning it into your first Dart web app can be a pain in the ass or really easy. Let’s follow our dreams and shoot for the latter! Here’s my take on AngularDart web development using AngularDart 2.
The Dream
At our organization, I was recently tasked with making a simple single page web application and I was allowed to approach the problem as I saw fit. Aqueduct has been in development, and I had a yearning to play with the Dart programming language when a coworker suggested AngularDart 2. After playing with it, I discovered that you could easily deploy an app to a Github Pages site directly from your repository.
Related: Read more about Aqueduct
Before we begin, I am going to make some wild assumptions that if you aren’t using macOS like me, you can still follow along. Unfortunately for you, that means I have no intention of testing platform-specific instructions. Or as I like to say, we’ll leave that as an exercise to the reader.
Chasing the Dream
Your first step is going to be creating your first angularDart web application. For the sake of brevity, you can either follow this guide, use Webstorm’s built in new Angular project template, or just clone the starter app.
bash git clone https://github.com/angular-examples/quickstart.git
Once you have your starter app, you can run it using pub serve but hold your horses for a second and hear me out. Bootstrap is a great collection of well-tested, mature CSS and Javascript styles to bootstrap a responsive web app. What does that mean? It makes it so you can have a website that looks good on your phone or computer with ease, it’s been around forever, and if you work in web development and haven’t heard of it, I assume you live in a cave somewhere. Since Dart compiles to Javascript and Bootstrap is just a little Javascript and CSS thrown on top, you might presume that it could all work happily together. Of course, you’d be wrong, but only kind of. The CSS will work fine, but if you want to use handy dandy Dart bindings to bootstrap effects, it’s not going to be quite so easy as just throwing that JS in there.
Related: Dart: A Simple, Elegant Language Programmers Will Love
Bootstrap your Dream
ng_bootstrap is a Github repository maintained by the dart-league. These guys are doing God’s work porting over Bootstrap into Dart land. Whether or not you can use this as a dependency in your application is your choice, but I’d just list it as probably okay and I am writing this article.
Before installing ng_bootstrap you are going to need to install the sass gem using the ruby gems package manager.
gem install sass
Next, you are going to need to modify your pubspec.yml to tell pub about how to get Bootstrap so you can use it your components’ CSS:
...
dependencies:
...
ng_bootstrap: any
sass_transformer: any
...
transformers:
...
- sass_transformer A tricky little step that may change in the coming weeks or months as all of this comes in to maturity is getting the dependencies. ng_bootstrap relies on the sass_transformer to transform the .scss(pronounced sass as in sassy) Bootstrap uses into .css which your browser uses. You can learn more about Sass, but for the sake of this article all you need to know is that Sass is a part of how Bootstrap performs its magic in making a responsive web app. Onto downloading our dependencies:
pub get --packages-dir
sass_transformerrelies on how pub used to store Dart’s dependencies and this step is liable to change wheneversass_transformeris updated next. Consider yourself warned. Check out their documentation.
After this, you can begin your deploy process. Basically, what we need to do here is build the Dart app using pub which will compile all your Dart code, their dependencies, etc. into a neat ball of JS and CSS which you can then put on a server to be downloaded whenever anyone hits your Github pages site. In order to do this using Github Pages, we need to create an orphaned branch named gh-pages off current repository containing the compiled version of your app located in your build/web/ directory.
pub build
cd build/web/
git init
git remote
add gh-pages <your git repository URI here>
git checkout --orphan gh-pages
git add .
git commit -m "deploy commit"
git push --set-upstream gh-pages gh-pages Now you should be able to navigate in your browser to your Github Pages site and see your app in action! Don’t forget to check the code out and view the live example.
