DEV Community

Cover image for React App and Build Pipeline with Task and Gitness
Jim Sheldon for Harness

Posted on

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=)


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode
ℹ️ Note
Installing Node also installs npm and npx binaries.

Create React Application

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



npx create-react-app my-react-app


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

Change to the application directory.



cd my-react-app


Enter fullscreen mode Exit fullscreen mode

Start the application.



npm start


Enter fullscreen mode Exit fullscreen mode

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

Sample React application running in a 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


Enter fullscreen mode Exit fullscreen mode

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.

Animated gif of the build task output

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.

Animated gif of the test task output

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.

Create Gitness pipeline

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


Enter fullscreen mode Exit fullscreen mode

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.

Gitness pipeline yaml editor

Observe the pipeline execution.

Gitness 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:

Top comments (0)