React App and Build Pipeline with Task and Gitness

Task is a task runner/automation tool written in Go and distributed as a single binary.

A Taskfile is written in YAML, which may provide a shorter learning curve than alternative tools, like GNU Make. Task can also leverage Go's robust template engine.

Task can be useful in build and test pipelines. Logic for running builds and tests can be written once in Taskfile.yml (or other supported filenames), then used in both local development workflows and under automation.

Gitness is an open source development platform from Harness that hosts your source code repositories and runs your software development lifecycle pipelines.

In this guide, we'll craft a Taskfile.yml for a sample React app, suitable for both local development and integration with your pipelines powered by Gitness.

Prerequisites

Install Task and verify you can run task in your terminal.

This guide was tested with Task version 3.35.1.

$ task --version
Task version: v3.35.1 (h1:zjQ3tLv+LIStDDTzOQx8F97NE/8FSTanjZuwgy/hwro=)

Install Docker and verify you can run docker in your terminal.

This guide was tested with Docker version 24.0.7.

$ docker --version
Docker version 24.0.7, build afdd53b

Install Node and verify you can run node in your terminal.

This guide was tested with Node version 20.12.0.

$ node --version
v20.12.0

Create React Application

Use the Create React App project to automatically generate the application.

npx create-react-app my-react-app

Your my-react-app directory structure will look like this.

my-react-app/
├── README.md
├── node_modules/
├── package-lock.json
├── package.json
├── public/
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src/
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── reportWebVitals.js
    └── setupTests.js

Change to the application directory.

cd my-react-app

Start the application.

npm start

Open http://localhost:3000 in your browser.

You now have a working React application! 🎉

In your terminal, type Ctrl-C to stop the process.

Create Taskfile.yml

Create a Taskfile.yml file in your my-react-app directory with this configuration.

version: '3'

tasks:

  npm-install:
    cmds:
      - npm install

  build:
    deps: [npm-install]
    cmds:
      - npm run build

  test:
    deps: [npm-install]
    cmds:
      - npm test

The build task runs npm run build, which creates a production build of your application.

The test task runs npm test, which runs unit tests. There is only one unit test in src/App.test.js.

Note that npm-install task is a dependency of the build and test tasks.

Build and Test

Run task build in your terminal.

By default, npm test will run tests interactively. To simulate running tests under Continuous Integration, set the CI environment variable.

Run CI=true task test in your terminal.

Note that task passed the CI=true variable to the npm test command.

Setup Gitness

1. Install Gitness
2. Create a project named demo
3. Either create a repository named my-react-app and push your sample app code, or import the repository jimsheldon/my-react-app, which I created for this guide

Create Pipeline

Open http://localhost:3000/demo/my-react-app/pipelines in your browser and select New Pipeline.

Enter build-and-test in the Name field (this will automatically populate the YAML Path field), then select Create.

Enter this Gitness pipeline in the YAML editor.

kind: pipeline
spec:
  stages:
    - name: task example
      type: ci
      spec:
        steps:
          - name: install task
            type: run
            spec:
              container: alpine
              script: |
                apk add curl
                sh -c "$(curl --location https://taskfile.dev/install.sh)" -- -d
                ./bin/task --version

          - name: build
            type: run
            spec:
              container: node:20
              script: |
                ./bin/task build

          - name: test
            type: run
            spec:
              container: node:20
              script: |
                ./bin/task test

This Gitness pipeline has a single stage with three steps. The install task step uses the alpine Docker image to install the task binary into the workspace, where it can be reused by the following build and test steps, which run in the node Docker image.

Select Save and Run.

Observe the pipeline execution.

Conclusion

This workflow improves the separation of concerns between local development and pipeline execution.

As long as the application can be built and tested with task build and task test commands, developers always keep the same workflow, and the pipeline does not need to be modified.

For example, the developers could switch to yarn by changing Taskfile.yml to use yarn commands rather than npm commands. This change would be transparent to developers, who would continue to run task build and task test, and the Gitness pipeline yaml would not need to be changed.

Next steps:

• See more examples of using Task with Gitness
• Create triggers to automatically run the pipeline when commits are pushed to the repository
• Learn how Gitness manages your data
• Learn how to manage Gitness projects and roles