2

I can't host flutter web application on github pages. The workflow file looks like this:

name: Build & Deploy weathunits_configurator

on:
  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

jobs:

  build-and-deploy:
    name: 'Build & Deploy web app'
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3

      - name: 'Install Flutter and Dart SDK'
        uses: subosito/flutter-action@v2
        with:
          channel: stable
          flutter-version: 3.3.9
          cache: true

      - name: 'Flutter enable Web'
        run: flutter config --enable-web

      - name: 'Get dependencies'
        run: flutter pub get
        working-directory: example/weathunits_configurator

      - name: 'Build web app'
        run: |
          cd example/weathunits_configurator
          flutter build web --web-renderer=canvaskit --base-href='/weathunits_configurator/' --release
      
      - name: 'Deploy web app'
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: example/weathunits_configurator/build/web

What I'm trying to do: my project lies in the example/weathunits_configurator folder, after building it will be in the example/weathunits_configurator/build/web folder.

The web project is placed in the gh-pages branch and looks like this link. Settings GitHub Pages in project

We open the application through the https://packruble.github.io/weather_animation/ (I'd like to see another path. Not /weather_animation/, but /weathunits_configurator/.) and see a blank screen. I see the following in the console brave: in console brave

What I tried:

  1. Use JamesIves/github-pages-deploy-action@v4 instead of peaceiris/actions-gh-pages@v3
  2. Use different `flutter build web' parameters
  3. Changed the input and output folder in settings deploy action.

I think the problem is that because my project, which needs to be deployed, is in a subfolder, it cannot be built normally. Either there is a problem with the --base-href='/weathunits_configurator/' tag. Or the problem is somewhere else.

How to launch this project on Github Pages?

Improve this question
2
  • Can you try with --base-href /weathunits_configurator/ Commented Jan 6, 2023 at 11:54
  • @Yeasin Sheikh, Unfortunately, it doesn't help. Commented Jan 8, 2023 at 11:02

2 Answers 2

Reset to default
1

In the end, the problem was solved by using the --base-href='/weather_animation/' flag which specifies the repository name. It is the name of the github repository that should be specified in this flag and nothing else!

Recall that the file on the path web/index.html has the following line <base href="$FLUTTER_BASE_HREF">.

And yes, sometimes github pages are not lightning fast. You need to wait some time for the changes to take effect after your deploy.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

You need to wait some time for the changes to take effect after your deploy. How much time are we talking about here?
@ShahoodulHassan, After a deploy to github pages
Well I got it working within 10 minutes...
Yes, and you will agree that it is not instantaneous. (¬_¬ ) Sometimes it takes even longer
0
+50

Consider the error message:

Loading failed for the <script> with source 
“https://packruble.github.io/weathunits_configurator/flutter.js”.   
  weather_animation:40:1

That means a base-href set to /weathunits_configurator/ cannot work because a project GitHub Page is based on the repository name.
Here, it is weather_animation, not weathunits_configurator.

The simplest option would be to rename the repository into weathunits_configurator, and remove the base-href, since a project site is hosted at http(s)://<username>.github.io/<repository>.

That seems easier than configuring a custom domain for your GitHub Pages site.

The OP Ruble confirms in the comments it is working, but keeping --base-href='/weather_animation/', using the name of the repository though.

Improve this answer

2 Comments

Thank you for your comprehensive response. If I use --base-href='/weather_animation/' it still doesn't work on github, but if I copy all the files from the gh-pages branch and run it locally, it works fine. I understand that it is important that the project itself has the same name as the repository?
It worked with the --base-href='/weather_animation/' flag after some time waiting. Thank you again for your reply.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.