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

Issue

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?

Solution

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.

Answered By – Lorax

Answer Checked By – Gilberto Lyons (FlutterFixes Admin)

Leave a Reply

Your email address will not be published.