How do I deploy an AngularDart web page in Git Pages?

Question

By default, Angular deploys pub serve with root/web/ as the root folder for index.html. GitHub (on the gh-pages branch) assumes it is in the root project folder.

Has anyone seen this done with a GitHub page? Would I be forced to convert the code from Dart to JS and use the GitHub folder structure?

Answer 1

So, this wasn't the smoothest, but taking jonrsharpe's advice (GitHub is for static web pages), I made sure to grab a dart2js transformer, throw that in my pubspec.yaml:

transformers: - $dart2js: minify: true

and then ran pub build. That gave me the JS form of the web page in a build folder.

I already had - dart_to_js_script_rewriter in my pubspec, but I think that is used on the fly, using pub serve, to view in JS.

The non-smoothness comes from the fact that I moved those newly-built files into the root project folder (for GitHub) and had to append the project name to any file references in index.html:

• /project/style.css
• /project/main.dart.js

That produced a successful GitHub page (on gh-pages branch, of course).

Side note:
The Location and HashLocationStrategy are in there, but I don't believe they are doing anything, other than compiling properly.

peanut does the dart2js build and copies the files into root without having to switch the gh-pages. Pretty nice. It appears to remove certain files and folders (like the README file) in the process, but it's a decent little pub package.

Answer 2

I've filed https://github.com/dart-lang/angular2/issues/242 to see if we can get a concrete example of how to do this either on the AngularDart site or something similar.

There is a utility by one of our developers called peanut that can help:

https://pub.dartlang.org/packages/peanut

Answer 3

Use peanut.

One-time installation:

pub global activate peanut

Use:

cd path/to/my_angular_project
peanut

Upload the gh-pages branch to github:

git push origin --set-upstream gh-pages

Answer 4

You need to configure HashLocationStrategy

See Location and HashLocationStrategy stopped working in beta.16 to make the router work.

root/web/ is served as the root web folder, therefore there should be no difference. If you add it to GH-Pages so that it's not on root, then you need to set <base href="/someDir"> or provide const Provider(APP_BASE_HREF, useValue: '/someDir') needs to be provided.