documentation/docs/react/ci/github-actions.md
---
id: github-actions
title: Github Actions
sidebar_label: Github Actions
description: Deploy React Apps using Github Actions
---
Automate, customize, and execute your software development workflows right in your repository with GitHub Actions. You can discover, create, and share actions to perform any job you'd like, including CI/CD, and combine actions in a completely customized workflow.
[Refer to official documentation for detailed usage. →](https://docs.github.com/en/actions)
The following YAML workflow file created into the `.github/workflows/ci.yml` as a default by superplate, if GitHub Actions selected as a CI plugin.
```bash title=".github/workflows/ci.yml"
name: ci
on:
push:
branches:
- main
- master
pull_request:
branches:
- main
- master
jobs:
ci:
runs-on: ${{ matrix.os }}
strategy:
matrix:
os: [ubuntu-latest]
node: [14]
steps:
- name: Checkout
uses: actions/checkout@master
- name: Setup node env
uses: actions/setup-node@v2.1.2
with:
node-version: ${{ matrix.node }}
- name: Cache node_modules
uses: actions/cache@v2
with:
path: ~/.npm
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
${{ runner.os }}-node-
- name: Install dependencies
run: npm ci
- name: Run tests
run: npm run test
```
:::tip
The following commands are added to `.github/workflows/ci.yml` by superplate if any of plugins listed below is selected during project creation phase.
:::
:::note
You can use the following commands in case of adding Github Actions to existing project later.
:::
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
### Package manager
---
<Tabs
defaultValue="npm"
values={[
{label: 'npm', value: 'npm'},
{label: 'yarn', value: 'yarn'},
]}>
<TabItem value="npm">
```
- name: Cache node_modules
uses: actions/cache@v2
with:
path: ~/.npm
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
${{ runner.os }}-node-
```
</TabItem>
<TabItem value="yarn">
```
- name: Get yarn cache directory path
id: yarn-cache-dir-path
run: echo "::set-output name=dir::$(yarn cache dir)"
- name: Cache node_modules
uses: actions/cache@v2
id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
with:
path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
restore-keys: |
${{ runner.os }}-yarn-
```
</TabItem>
</Tabs>
<br/>
### Install dependencies
---
<Tabs
defaultValue="npm"
values={[
{label: 'npm', value: 'npm'},
{label: 'yarn', value: 'yarn'},
]}>
<TabItem value="npm">
```
- name: Install dependencies
run: npm ci
```
</TabItem>
<TabItem value="yarn">
```
- name: Install dependencies
run: yarn
```
</TabItem>
</Tabs>
<br/>
## Testing
---
### Run tests
<Tabs
defaultValue="npm"
values={[
{label: 'npm', value: 'npm'},
{label: 'yarn', value: 'yarn'},
]}>
<TabItem value="npm">
```
- name: Run tests
run: npm run test
```
</TabItem>
<TabItem value="yarn">
```
- name: Run tests
run: yarn test
```
</TabItem>
</Tabs>
### Run Cypress E2E Testing
<Tabs
defaultValue="npm"
values={[
{label: 'npm', value: 'npm'},
{label: 'yarn', value: 'yarn'},
]}>
<TabItem value="npm">
```
- name: Run e2e test
run: npm run cypress:test
```
</TabItem>
<TabItem value="yarn">
```
- name: Run e2e test
run: yarn cypress:test
```
</TabItem>
</Tabs>
### WebdriverIO E2E Testing
<Tabs
defaultValue="npm"
values={[
{label: 'npm', value: 'npm'},
{label: 'yarn', value: 'yarn'},
]}>
<TabItem value="npm">
```
- name: Run e2e test
run: npm run webdriver:run
```
</TabItem>
<TabItem value="yarn">
```
- name: Run e2e test
run: yarn webdriver:run
```
</TabItem>
</Tabs>
:::tip
We recommend using **[Meercode](https://meercode.io)**, if you are using Github Actions. **[Meercode](https://meercode.io)** is the monitoring dashboard for your CI/CD builds.
:::