[ PART 11 ] Creating a Twitter clone with GraphQL, Typescript, and React ( Github workflow )

Hi everyone ;).

As a reminder, I am doing this challenge ;) : Tweeter challenge

Github repository

Db diagram

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. You can find the challenge here. 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
  

  git checkout -b add_some_functionality

• Once the feature is finished, I push it to the repository

  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

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.

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:

git checkout main
git pull

In general I delete my branch too

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 ;).