DEV Community: Jonathan Gómez

🧪 Github Actions for Dart package with Environment variables 🧪

Jonathan Gómez — Thu, 20 May 2021 23:34:44 +0000

🎉 I just end the configuration and I'm so happy that it work so I'm just gonna throw it here 😅

I'm currently working on a dar wrapper package for the Notion API so I had to add a secret token for testing. I didn't know how to work with environment variables on flutter until today, and to configure a GitHub Action for the package testing was a good challenge to learn and here are the steps I did if you want to make something similar and don't know how.

💡 Also, as I mentioned, I just do this today and I'm still learning so if you know a better way please let me know. And excuse my English hehe.

Now let's get into it in two points:

🔧 Set Up Flutter Test
🐙 Set Up GitHub Action

🔧 Set up Flutter test

- A): By default my variables are set from Platform

String? token = Platform.environment['TOKEN'];
String? testBlockId = Platform.environment['TEST_BLOCK_ID'];

- B): I have a variable to know when the execution environment is a GitHub Action*

String execEnv =
  env['EXEC_ENV'] ?? Platform.environment['EXEC_ENV'] ?? '';

if (execEnv != 'github_actions') {
  // more code here...
}

- C): If the environment is not a GitHub Action then I try to load the .env file

setUpAll(() {
  // load .env variables for all tests
  load();

  // more code here...
});

tearDownAll(() {
  // clean environment after all tests
  clean();
});

- D): I try to set the value of the variables with the following hierarchy from highest to lowest:

Value from .env file
Value from Platform (initial value by default)
An empty string as last option

token = env['TOKEN'] ?? token ?? '';
testBlockId = env['TEST_BLOCK_ID'] ?? testBlockId ?? '';
// variables declared before, see full example code bellow.

💡 At least the dotenv package only gets the variables from a file and in GitHub actions the secrets are flushed directly into the environment without occupying an .env file.

full example code:

void main() {
  // (A)
  String? token = Platform.environment['TOKEN'];
  String? testBlockId = Platform.environment['TEST_BLOCK_ID'];

  // (B)
  String execEnv = env['EXEC_ENV'] ?? Platform.environment['EXEC_ENV'] ?? '';

  // (B)
  if (execEnv != 'github_actions') {
    setUpAll(() {
      // (C)
      load();

      // (D)
      token = env['TOKEN'] ?? token ?? '';
      testBlockId = env['TEST_BLOCK_ID'] ?? testBlockId ?? '';
    });

    tearDownAll(() {
      clean();
    });
  }

  group('Notion Block Client', () {
    test('Retrieve block children', () async {
      final NotionBlockClient blocks = NotionBlockClient(token: token);

      var res = await blocks.fetch(testBlockId ?? '');
      expect(res.statusCode, 200);
    });
  });
}

full real code click here

🐙 Set up GitHub Action

Now on GitHub I create a new GitHub Action.

First of all I have to add the environment variables to the secrets on Settings -> Secrets -> Click to New repository secret:

And then:
- A) First I add flutter SDK

- uses: actions/setup-java@v1
  with:
    java-version: '12.x'
- uses: subosito/flutter-action@v1
  with:
    flutter-version: '2.0.5'

- B) Then I install the dependencies

- name: Install dependencies
  run: flutter pub get

- C) Finally I run the test passing the secrets as environment variables. Note that I set the EXEC_ENV as "github_actions" like I defined on the tests configuration to avoid to try to load the .env file.

- name: Test package
  run: flutter test
  env:
    TOKEN: ${{ secrets.TOKEN }}
    TEST_BLOCK_ID: ${{ secrets.TEST_BLOCK_ID }}
    EXEC_ENV: 'github_actions'

full example code:

name: Test
on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]
jobs:
  build:
    runs-on: macos-latest
    steps:
      - uses: actions/checkout@v2
      # (A)
      - uses: actions/setup-java@v1
        with:
          java-version: '12.x'
      - uses: subosito/flutter-action@v1
        with:
          flutter-version: '2.0.5'
      # (B)
      - name: Install dependencies
        run: flutter pub get
      # (C)
      - name: Test package
        run: flutter test
        env:
          TOKEN: ${{ secrets.TOKEN }}
          TEST_BLOCK_ID: ${{ secrets.TEST_BLOCK_ID }}
          EXEC_ENV: 'github_actions'

full real code click here

📚 Resources

I found very useful the next resources:
Main source:
https://medium.com/flutter-community/testing-dart-packages-with-github-actions-4c2c671b1e34
Secondary but necessary source:
https://github.com/subosito/flutter-action

Auto register routers on Express app

Jonathan Gómez — Sun, 09 Aug 2020 22:34:35 +0000

The general idea of this post is to present the idea that you just have to create the file with the endpoint, export it in the same file, and it can be register automatically to the app.

Note

This is just to show my approach and to receive feedback about what I just had done 😬

I'm new with the use of frameworks (and writing on english… and writing here on dev) and coding in general but the times that I use Express I didn’t like his openness and all the work that is around to configure everything. I’m still new so maybe there are some ways to do it in an easy way. But I don’t know that’s why I’m open to seeing others ideas just for fun.

Also this post it’s to remember the process and to start posting more stuff. So if you just want to know about the auto register it's on the Resumé part. But anyway, let's jump to the code.

Main

Here is the main stuff for what I want to show you.

>> But you can find the rest of the project configuration here <<

Endpoint

I created the first endpoint on a file called main.endpoint.js with the basic configuration for and endpoint:

// src/_endpoints/main.endpoint.js
import express from "express";
const router = express.Router();

const path = "/";

router.get("", (req, res) => {
  res.json(
    {
      hello: "Hello",
      world: "World",
    }
  );
});

export { path, router };

Autoregister

I created a file called src/routing-register.js and here is where the magic happens (at least to me that I feel so happy to see when it worked):

// src/routing-register.js
import path from "path";
import fs from "fs";

export const autoregisterEndpoints = (app, pathEndpoints = "_endpoints") => {
  const endpointsPath = path.join(__dirname, pathEndpoints);
  fs.readdirSync(endpointsPath).forEach((file) => {
    let include = includeFile(file);

    if(include){
      let { path, router } = require(`./${pathEndpoints}/` + file);
      app.use(path, router);
    }
  })
}

const includeFile = (file) => {
  const file_splited = file.split('.');
  let extension = file_splited[file_splited.length - 1]
  return extension == "js"
}

I exclude files that do not end with .js because the builded project contains files with .map extension for every .js file.

Execution

I had to execute the function on the src/app.js file passing the main app as the parameter:

// src/app.js
import express from "express";
import { registerEndpoints } from "./routing-register";

const app = express();

autoregisterEndpoints(app); // << here

export default app;

Ready 🎉

And it was done! The rest is just the configuration with Babel and is just a plus ultra (I hope you get it).

Extra

(Project Configuration)

First of all I had to install Node... I will skip this step because I think there are different ways to install it. But as a note, I use nvm on zsh with oh my zsh on Linux.

1.- Dependencies

I installed the dependencies:

mkdir autoregister && cd autoregister
npm init -y
npm i -D express 
npm i -D @babel/core @babel/node @babel/preset-env @babel/cli

The first command is to create a directory called autoregister/ and move into it.
The second command is to initialize and Node project in the current directory and it will have the default configuration.
The third and four command install the dependencies:
- express
- @babel /core
- @babel /node
- @babel /preset-dev
- @babel /cli

I used babel to work with ES6 modules and to build the project to deploy on Heroku.

This is the first time that I use Babel so don't expect so much hehe and I use it here just as an excuse to try it on something.

Using Babel I have to exclude some files from the _endpoints/ directory on the builded project.

2.- Project Structure

After that I created a directory named src/ and another one inside this called src/_endpoints/:

node_modules/
src/
  _endpoints/
package.json
package-lock-json

3.- Code Structure

Having that I created a file called src/app.js and write the next code:

// src/app.js
import express from "express";

const app = express();

export default app;

And another one called src/index.js with the code to start the app:

// src/index.js
import app from "./app.js";

const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Listening to requests on http://localhost:${port}`);
});

4.- Scripts for build & run

I had to add the scripts needed to build and start the project on the package.json inside the "scripts" property:

{
  "scripts": {
    "start": "npm run build && node ./build/index.js",
    "build": "npm run clean && npm run build-babel",
    "build-babel": "babel -d ./build ./src -s",
    "clean": "rm -rf build && mkdir build"
  }
}

5.- ES6 Modules support

At this point, the code will not only run but compile and try to run the compiled version of the project that will be inside of an auto generated directory called build/.

But still not worked because the ES6 imports/exports and I had two options:

Add "type": "module" property on my package.json.
Add Babel (or other tool like these).

I chose the second one because I had so much curiosity on how to work with these tools.

To configure Babel to use ES6 modules I had two options again:

Create a file called .babelrc with the next code:

{
  "presets": [
    "@babel/preset-env"
  ]
}

Add the next property to the bottom of my package.json:

{
  "babel": {
    "presets": ["@babel/preset-env"]
  }
}

I chose the second one but I think it's the same for both cases.

🎉 After doing this the project worked. Now I had to add the endpoints and the autoregister 🎉

If you follow these steps and run the app I hope that you will be able to see this on http://localhost:3000/:

{
  "hello": "Hello",
  "world": "World"
}

Now if I want to add a new endpoint I just have to create a new file on the src/_endpoint/ like the main.endpoint.js file and modify the path constant.