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?

GH Pages is for serving *static* sites, you will need to compile your app to serve it there. — jonrsharpe, Dec 23 '16 at 21:13

score 2 · Answer 1 · answered Dec 24 '16 at 05:16

2

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

answered Dec 24 '16 at 05:16

filiph

2,673
2
26
33

matanlurey pointed that out as well, but I didn't see how that would get things working on GitHub. What am I missing there? – Lorax Dec 24 '16 at 05:26
I tried it out. It runs the *pub build* and copies the files into root. That's cool. For some reason I still need to alter the references to include the github project folder. It appears that the gh-pages branch lags behind a bit, is slow to update, or something a little off. – Lorax Dec 24 '16 at 05:49

score 1 · Answer 2 · edited May 23 '17 at 12:32

1

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.

edited May 23 '17 at 12:32

Community

1
1

answered Dec 23 '16 at 22:02

Günter Zöchbauer

623,577
216
2,003
1,567

That lead me to an up-to-date way to access those libraries: https://stackoverflow.com/questions/39097037/how-to-use-hashlocationstrategy-for-router-in-angular2-beta-20-in-dart I'm still figuring out how to tell GitHub to listen. – Lorax Dec 24 '16 at 02:55

score 1 · Answer 3 · answered Dec 24 '16 at 02:21

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

Lorax · Accepted Answer · 2016-12-24T05:52:51.940

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.

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

4 Answers4