[ PART 11 ] Creating a Twitter clone with GraphQL, Typescript, and React ( Github workflow )
Tags: showdev, javascript, github, graphql
Published: 2021-01-14 12:44:20


Hi everyone ;).

As a reminder, I am doing this challenge ;) : [Tweeter challenge](https://devchallenges.io/challenges/rleoQc34THclWx1cFFKH)

[Github repository](https://github.com/ips-coding-challenge/challenge_twitter)

[Db diagram](https://dbdiagram.io/d/5f75c0243a78976d7b75f7be)



A little while ago, I made a challenge with a teammate. It was my first time doing a project with someone. I talked about it [here](https://dev.to/ipscodingchallenge/doing-projects-to-learn-is-great-doing-it-with-someone-is-a-lot-better-3g31). You can find the challenge [here](https://github.com/Shoppingify/backend). Since this project, I changed the way I work on my projects. There is nothing extraordinary in what I'm about to say, but maybe some of you will find something useful ;).



First, I start by creating a repository on Github. You can do a private repository if you want. Then I will use the Github issues to plan the features I will work on. So here is my simple personal workflow:

- Open a new issue on Github -> Example: "Feat: add some functionality"

- Create a new branch in my local repository

  ```sh
  git checkout -b add_some_functionality
  ```
  
- Once the feature is finished, I push it to the repository
  ```sh
  git push origin add_some_functionality
  ```
  
- Then I will open a pull request and merge it to my main branch



## Github Workflow

That's where *Github Workflow* come into play. I am quite new to Github Workflow so don't expect me to give you a complete explanation. If you want more detailed explanations, you will find plenty of resources on dev.to ;). 

Since I wrote some tests, it could be interesting to run the tests before actually merging the branch to my **main** branch. That's why I'll setup Github to run my tests before merging my new feature branch.

*.github/workflows/pr_tests.yaml*

```yaml
name: Run tests on pull request
on:
  push:
    branches:
      - main
  pull_request:
    types: [opened, synchronize]

jobs:
  test:
    runs-on: ubuntu-latest
    # Service containers to run with `container-job`
    services:
      # Label used to access the service container
      postgres:
        # Docker Hub image
        image: postgres
        # Provide the password for postgres
        env:
          POSTGRES_PASSWORD: root
        options: >-
          --health-cmd pg_isready
          --health-interval 10s
          --health-timeout 5s
          --health-retries 5
        ports:
          # Maps TCP port 5432 on service container to the host
          - 5432:5432

    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: '14.x'
      - run: yarn
      - name: Run the tests
        run: yarn test
        env:
          NODE_ENV: test
          PORT: 3000
          JWT_SECRET: test-secret
          DB_HOST: localhost
          DB_NAME: postgres
          DB_USER: postgres
          DB_PASSWORD: root
```

I will run this workflow when I do a pull request to the **main** branch. I need a **PostgreSQL** database to run the tests so I add a service for that. It will install the docker image. Then I will install node and add my command to run the tests. 

Now, when I will make a pull request, it will run automatically my tests and if there is an error, it will not merge the branch.

![Github workflow result](https://dev-to-uploads.s3.amazonaws.com/i/imae98ktqfw7ab4z1sms.png)

If you go to the **Actions** tab, you will see the action being executed.


Once my feature branch is merged, I go back to my local repository:

```sh
git checkout main
git pull
```

In general I delete my branch too

```sh
git branch -D feature_branch
```

As I say, nothing exceptional here, but working alone, I was solely using the main branch for a long time... Proceeding like this allows me to be a lot more efficient and organized ;). Maybe it will give you some ideas if you are a beginner ;).



That's all for today. 



See you in the next part ;).