Use CircleCI version 2.1 at the top of your .circleci/config.yml file.
1
version: 2.1
Add the orbs
stanza below your version, invoking the orb:
1
2
orbs:
react: thefrontside/react@0.2.0
Use react
elements in your existing workflows and jobs.
Opt-in to use of uncertified orbs on your organization’s Security settings page.
Run tests and generate coverage report on every push
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
orbs:
react: thefrontside/react@dev:alpha
version: 2.1
workflows:
push:
jobs:
- react/install
- react/eslint:
requires:
- react/install
- react/stylelint:
requires:
- react/install
- react/test:
requires:
- react/install
- react/coverage:
requires:
- react/install
Build the application in production mode. The built assets are stored in artifacts.
Run the tests and generate coverage reports. The results are stored into artifacts.
Install dependencies. Checkout is called before install. (Optional) To prevent checkout from being called, pass your steps to before_install.
PARAMETER | DESCRIPTION | REQUIRED | DEFAULT | TYPE |
---|---|---|---|---|
before_install | Steps to be executed before restoring cache and running install. Default is to run 'checkout' command.
| No | [sequence of length 1] see source | steps |
Node 10 runtime environment
PARAMETER | DESCRIPTION | REQUIRED | DEFAULT | TYPE |
---|---|---|---|---|
node | - | No | '10' | string |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
# This code is licensed from CircleCI to the user under the MIT license.
# See here for details: https://circleci.com/developer/ja/orbs/licensing
commands:
build:
description: |
Create a production build
steps:
- run:
command: mkdir -p artifacts
name: Ensure artifacts directory is present
- run: NODE_ENV=production yarn build
- run: cp -r build artifacts
coverage:
description: |
Generate coverage report using Jest and Istanbul
steps:
- run: yarn test --collectCoverage --coverageDirectory=./artifacts/coverage
eslint:
description: |
Lint JS
steps:
- run:
command: mkdir -p reports/eslint
name: Ensure artifacts directory is present
- run: yarn eslint --max-warnings=0 --format junit --output-file ./reports/eslint/eslint.xml
install:
description: |
Install dependencies
steps:
- run: yarn install
stylelint:
description: |
Lint style files
steps:
- run:
command: mkdir -p artifacts/stylelint
name: Ensure artifacts directory is present
- run: yarn --silent stylelint --custom-formatter './node_modules/stylelint-junit-formatter'
> ./artifacts/stylelint/stylelint.xml
test:
description: |
Run tests using Jest
steps:
- run:
command: yarn add --dev jest-junit
name: Install JUnit reporter
- run:
command: yarn test --ci --runInBand --reporters=default --reporters=jest-junit
environment:
JEST_JUNIT_OUTPUT: reports/junit/js-test-results.xml
name: Run tests with JUnit as reporter
description: |
Production ready workflow for testing and building React.js applications. Full orb source code: https://github.com/thefrontside/circleci-react-orb
examples:
react-dev-workflows:
description: |
Run tests and generate coverage report on every push
usage:
orbs:
react: thefrontside/react@dev:alpha
version: 2.1
workflows:
push:
jobs:
- react/install
- react/eslint:
requires:
- react/install
- react/stylelint:
requires:
- react/install
- react/test:
requires:
- react/install
- react/coverage:
requires:
- react/install
executors:
default:
description: |
Node 10 runtime environment
docker:
- image: circleci/node:<<parameters.node>>
parameters:
node:
default: "10"
type: string
jobs:
build:
description: |
Build the application in production mode. The built assets are stored in artifacts.
executor: default
steps:
- attach_workspace:
at: ~/
- build
- store_artifacts:
path: ./artifacts
coverage:
description: |
Run the tests and generate coverage reports. The results are stored into artifacts.
executor: default
steps:
- attach_workspace:
at: ~/
- coverage
- store_artifacts:
path: ./artifacts
eslint:
description: |
Run ESLint on the source code. The generated report is stored in artifacts.
executor: default
steps:
- attach_workspace:
at: ~/
- eslint
- store_test_results:
path: reports/eslint
- store_artifacts:
path: reports/eslint
install:
description: |
Install dependencies. Checkout is called before install. (Optional) To prevent checkout from being called, pass your steps to before_install.
executor: default
parameters:
before_install:
default:
- checkout
description: |
Steps to be executed before restoring cache and running install. Default is to run 'checkout' command.
type: steps
steps:
- steps: <<parameters.before_install>>
- restore_cache:
key: v1-node-modules-{{ checksum "yarn.lock" }}
- install
- persist_to_workspace:
paths:
- project
root: ~/
- save_cache:
key: v1-node-modules-{{ checksum "yarn.lock" }}
paths:
- ~/project/node_modules
stylelint:
description: |
Run stylelint command on CSS files. The result is stored in artifacts.
executor: default
steps:
- attach_workspace:
at: ~/
- run:
command: mkdir -p artifacts/stylelint
name: Set up artifacts directory
- stylelint
- store_test_results:
path: ./artifacts
- store_artifacts:
path: ./artifacts
test:
description: |
Run tests and show results in the test summary.
executor: default
steps:
- attach_workspace:
at: ~/
- test
- store_test_results:
path: reports/junit
- store_artifacts:
path: reports/junit
version: 2.1