Flutter and Gitlab Pages

I am currently working on a project and need to test out some packages for specific functionality.

🧠 Purpose

To create an app without the need to sign up and log in.

👀 Vision

When a user arrives in the app, they can start adding a task without having to onboard.

🥅 Goals

  • We want to have a means of persistence on iOS, Android, and the Web, not to have a barrier to entry or a need to hand over data to gain the functionality available.

💡 Considerations

  • Flutter has the library localstore, which will abstract the storing of data and persist over closing and opening the app.

🏆 Success

  • Tasks can be added to a list without a login

  • Closing the app and returning keeps the list true



I got the app working but wanted to deploy to a branch of the main repository as this was just an experiment, so as my code was going to live in Gitlab anyway, I thought Gitlab Pages was a good place to start.

1️⃣ Sandbox Branch

Firstly as an owner of the project, I opened Gitlab, and on the sidebar, went to “Repository” > “Branch” and clicked on “New Branch”.

I gave it the name “sandbox” and created it from main, then clicked create.

Creating a new branch in Gitlab

In the terminal, I moved to my root project directory, then:

$ git init
$ git remote add origin {gitlab repo URL}

2️⃣ Gitlab Yaml

In the project root I created a file called:

.gitlab-ci.yml

And add the following:

image: cirrusci/flutter:latest

before_script:
  - flutter config --enable-web
  - flutter pub get

pages:
  stage: deploy
  script:
    - flutter build web --base-href /{gitlab project name}/
    - cp -r build/web public
  artifacts:
    paths:
      - public
  only:
    - sandbox

Quick breakdown:

  1. image: cirrusci/flutter:latest is the docker container that we can utilise as an environment.

  2. before_script: are the commands we want to run as if this is a machine that has not dealt with this deployment.

    1. flutter config --enable-web tells flutter to create what is needed for a web app.

    2. flutter pub get downloads all of the dependencies stated in pubspec.yaml

  3. pages: is instructing GitLab to run pages

    1. stage: deploy is what to do with this

    2. script: is what to run to start the deployment on Pages

      1. flutter build web is to compile the app to web, and --base-href /{gitlab project name}/ is the root URL in Pages and is VERY IMPORTANT for all relative paths to work.

      2. cp -r build/web public moves the completed app into public to serve.

    3. artifacts: ???

    4. only: -sandbox runs only for the branch named sandbox.

3️⃣ Commit with CI/CD

Now from the terminal I type:

$ git add *
$ git commit -m "Initial commit"
$ git branch -M sandbox
$ git push -uf origin sandbox

In Gitlab under “CI/CD” > “Jobs” the scripts will run for about 3mins and app will be available at URL in “Settings” > “Pages”

Previous
Previous

Reddit Verification Tool

Next
Next

A Perspective of Product from an Opinionated and Functional Position