Bootstrap Your AngularDart App With Github Pages
November 7, 2016
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.
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
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.
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 whenever
sass_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
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