flutter web app deployed on github.pages cannot access SOME assets

Question

[UPDATED checkout the issue with steps on github ]

running my flutter web app locally

flutter run -d chrome --dart-define=FLUTTER_WEB_USE_SKIA=true --release

works as intended (video), but building it and deploying it to github pages (here)

flutter_master build web --dart-define=FLUTTER_WEB_USE_SKIA=true --release

doesn't access some asset, but successfully access others.

I've tried these solutions (one, two)

'about.json' works as expected locally but fails to load when deployed

while 'assets/about.json' doesn't work in either cases

the code in use can be simplified as

rootBundle.loadString('about.json');

I double-checked pubspec.yaml

flutter:
  uses-material-design: true
  assets:
    - background_portrait.jpg
    - background_landscape.jpg
    - yf_icon_black.png
    - yf_logo.png
    - about.json
    - apps.json
    - news.json
    - opensource.json

and the assets in the build folder

everything checks out, but the issue still persists

in these logs you can see that those files are present

This is a known issue when that switch/flag is used for building release build. I've read it on one of GitHub issue but can't remember the which one. — Tirth Patel, Oct 07 '20 at 19:15

score 3 · Accepted Answer · edited Oct 07 '20 at 19:35

3

What worked for me was to eliminate the assets folder completely. I created a folder for each of my asset types in the root dir (same level as lib) and referenced them as directories in pubspec.yaml:

  assets:
    - json/
    - avatars/

Then when loading them I used a relative path as:

await rootBundle.loadString('json/structure.json');

Flutter creates an assets folder during build and copies all my asset directories into it. This way it worked for me to load the assets both in debug and in release mode on GitLab Pages.

EDIT: I include the gitlab.ci.yml file I use for gitlab pages build pipeline

image: registry.gitlab.com/famedly/containers/flutter-dockerimages:beta
pages:
  script:
    - flutter clean
    - flutter config --enable-web
    - flutter pub get
    - flutter build web --release
    - ls build/web
    - cp -r build/web public
    - ls public
  artifacts:
    paths:
      - public
  only:
    - master

The ls commands you do not need these were just for logging the output during development of the script. I left them there because they do no harm and could come handy sometime.

edited Oct 07 '20 at 19:35

Dharman

30,962
25
85
135

answered Oct 07 '20 at 19:05

Daniel Leiszen

1,827
20
39

I already use a very similar structure, instead of "json" I called it "data", but otherwise is identical... I have the feeling that build just does not copy the assets in the build folder... – Francesco Iapicca Oct 07 '20 at 19:08
you can check that locally with flutter build web --release command, I edited my answer and included the gitlab.ci.yml I use for build – Daniel Leiszen Oct 07 '20 at 19:18
shouldn't flutter run -d chrome --release provide the same experience of running the deployed version? – Francesco Iapicca Oct 08 '20 at 13:16
I've updated the question, now it shows the logo, but doesn't load json assets – Francesco Iapicca Oct 08 '20 at 13:48
glad to hear – Daniel Leiszen Oct 09 '20 at 14:16

score 0 · Answer 2 · answered Nov 11 '20 at 12:55

The official flutter documentation explains that the assets should be added relative to the path of pubspec.yaml

For your example of pubspec.yaml, you should either move the asset files in the root of you project folder or if they are located in an assets sub folder add the name of that sub folder in pubspec.yaml

E.g. if your files are located under project_path/assets/, the assets section of your pubspec.yaml should look something like:

flutter:
  uses-material-design: true
  assets:
    - assets/background_portrait.jpg
    - assets/background_landscape.jpg
    - assets/yf_icon_black.png
    - assets/yf_logo.png
    - assets/about.json
    - assets/apps.json
    - assets/news.json
    - assets/opensource.json

In your dart code, assets should be accessed by their specified key, for the above example use 'assets/about.json' and not 'about.json'

score 0 · Answer 3 · answered Jun 09 '22 at 15:14

0

Its an old thread - just in case someone stumbles upon...you have to ensure that a valid certificate is in place. Otherwise the service worker will not start.

answered Jun 09 '22 at 15:14

Sascha Contes

1

flutter web app deployed on github.pages cannot access SOME assets

3 Answers3