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.
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:
image: cirrusci/flutter:latest
is the docker container that we can utilise as an environment.before_script:
are the commands we want to run as if this is a machine that has not dealt with this deployment.flutter config --enable-web
tells flutter to create what is needed for a web app.flutter pub get
downloads all of the dependencies stated in pubspec.yaml
pages:
is instructing GitLab to run pagesstage: deploy
is what to do with thisscript:
is what to run to start the deployment on Pagesflutter 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.cp -r build/web public
moves the completed app into public to serve.
artifacts:
???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”