add test flutter on drone post + css tweaks
This commit is contained in:
parent
894eb4b9dd
commit
297c6dbf5d
44
content/posts/2020-03-17-test-flutter-on-drone-ci.md
Normal file
44
content/posts/2020-03-17-test-flutter-on-drone-ci.md
Normal file
|
@ -0,0 +1,44 @@
|
||||||
|
+++
|
||||||
|
date = "2020-03-17"
|
||||||
|
title = "Test Flutter on Drone CI"
|
||||||
|
tags = ["drone", "flutter", "ci"]
|
||||||
|
description = "This is a short post that shows how to use cirruslabs' flutter docker image to run your flutter tests on Drone CI."
|
||||||
|
+++
|
||||||
|
|
||||||
|
_This post is specific to [Drone CI][drone], but is probably easily adoptable to other CI systems, like Gitlab._
|
||||||
|
|
||||||
|
[Flutter][flutter] is UI library based on [Dart][dart] to create beautiful, natively compiled applications for mobile. Web and desktop targets are also in the works.
|
||||||
|
|
||||||
|
Recently I've been playing around with Flutter and Dart. As a backend engineer I have to say I quite like it. Dart is a breeze to work with, the static typing helps a lot. Flutter itself offers a react-like way of structuring your app, but it runs natively on Android and iOS. At [Kabisa][kabisa] we're in the process of adopting Flutter as our go-to solution for cross platform mobile apps.
|
||||||
|
|
||||||
|
Anyway, one of the first things I do is hook a new project up with my CI, currently [Drone CI][drone]. I started looking for
|
||||||
|
an already published docker image that contains the latest flutter-stable installation. I soon found [cirruslabs/docker-images-flutter][cl-flutter],
|
||||||
|
but ran into an permission error. Turns out [I'm not the only one][cl-issues], but with a few simple steps you can test your flutter app with this image on Drone CI without issue.
|
||||||
|
|
||||||
|
`.drone.yml`:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
kind: pipeline
|
||||||
|
name: default
|
||||||
|
|
||||||
|
steps:
|
||||||
|
- name: test
|
||||||
|
image: cirrusci/flutter:stable
|
||||||
|
commands:
|
||||||
|
- sudo chown -R cirrus:cirrus .
|
||||||
|
- flutter doctor
|
||||||
|
- flutter test
|
||||||
|
```
|
||||||
|
|
||||||
|
The magic is the `sudo chown -R cirrus:cirrus .`. The flutter docker images are based on Cirrus Labs' android SDK images, which runs
|
||||||
|
commands as the `cirrus` user. This will change permissions and the flutter commands can now run without issue.
|
||||||
|
|
||||||
|
Any next steps in your pipeline will encounter files owned by `cirrus`. Since most drone plugins and images run as `root` anyway, this is not much of and issue. You could add another command to the snippet above to reset permissions back to `root`.
|
||||||
|
|
||||||
|
Note that I'm using `cirrusci/flutter:stable`. They've also got images available for `beta` and `dev`, just use the appropriate tag.
|
||||||
|
|
||||||
|
[flutter]: https://flutter.dev/
|
||||||
|
[drone]: https://drone.io/
|
||||||
|
[dart]: https://dart.dev/
|
||||||
|
[cl-flutter]: https://github.com/cirruslabs/docker-images-flutter
|
||||||
|
[kabisa]: https://www.kabisa.nl
|
|
@ -20,19 +20,32 @@ html, body {
|
||||||
pre, code {
|
pre, code {
|
||||||
font-family: 'IBM Plex Mono', monospace;
|
font-family: 'IBM Plex Mono', monospace;
|
||||||
font-size: $font_size;
|
font-size: $font_size;
|
||||||
|
color: $footer;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre > code {
|
||||||
|
overflow-wrap: normal;
|
||||||
|
white-space: pre;
|
||||||
|
color: $text;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
background-color: $background !important;
|
background-color: $background !important;
|
||||||
margin-left: 2rem;
|
margin-left: 2.5rem;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
line-height: 1.25rem;
|
line-height: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre code {
|
pre::before {
|
||||||
overflow-wrap: normal;
|
display: block;
|
||||||
white-space: pre;
|
content: "```";
|
||||||
|
color: $footer;
|
||||||
|
}
|
||||||
|
pre::after {
|
||||||
|
display: block;
|
||||||
|
content: "```";
|
||||||
|
color: $footer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
|
|
Loading…
Reference in New Issue
Block a user