DEV Community: Suulola Oluwaseyi

Building a full-stack Typescript project with GraphQL and React Native - Part 1: Setup

Suulola Oluwaseyi — Fri, 27 Jan 2023 09:33:35 +0000

For this series, I will be building a Fund raising app. This application will allow users to request for funds towards a cause and for other users who want to assist to donate a certain amount towards the cause.

Some other use cases are

Users are able to login and signup(Authentication)
Users can create a cause for which they need donation towards and generate a link to share which others
User who create a cause can read and delete the cause but not update unless you're a super admin(authorization)
The link generated should take the invited users to the app if they have the app or direct them to the relevant store to download the mobile application(deep linking/dynamic linking)
Users should be able to upvote and downvote a cause. Once a cause is downvoted up to 10 times, it will be reviewed by a moderator. If downvoted up to 100 times, it's marked as fraudulent and stops receiving funds.
Still considering if I want to include a chat functionality that will include Socket implementation or not
Other users should be able to make payment on the app. The payment will be handled using Paystack SDK.

Let's dive in

Backend Set Up

1. Create your project folder. I will be calling mine fund-raising-backend and navigate into it

mkdir fund-raising-backend
cd fund-raising-backend

2. Initialize the package.json and open in your favorite code editor. I will be using VS Code

npm init --y

3. Now, let's install the necessary dependencies

yarn add graphql @apollo/server @prisma/client 
yarn add -D typescript @types/node prisma

Some quick notes

We will be using Prisma as our ORM to interface with our Postgres database. For creating a Postgres DB on Render, follow the official documentation. At the end, you should have an external connection URL that looks like postgres://USERNAME:PASSWORD@EXTERNAL_HOST_URL/DATABASE. Render offers a free database plan that lasts for 3 months

4. Set up Typescript configuration by creating the tsconfig.json file and specifying the options while configuring the script command

touch tsconfig.json

{
  "compilerOptions": {
    "rootDirs": ["src"],
    "outDir": "dist",
    "lib": ["es2020"],
    "target": "es2020",
    "module": "esnext",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "types": ["node"]
  }
}

In our package.json, update the scripts compile typescript while running the compiled file and ensure the type is specified as module

...
  "type": "module",
  "scripts": {
    "compile": "tsc",
    "start": "npm run compile && node ./dist/index.js"
  }
...

At this point, we've not created any file except for our package.json and the node_modules folder from our dependencies.

The next step will be to

Define a schema
Define a resolver

CICD for React Native - Android and iOS

Suulola Oluwaseyi — Wed, 11 Jan 2023 05:33:27 +0000

When creating a React Native application, it soon becomes evident that generating an APK each time a change is made becomes really tedious. Coupled with the fact that you need to Archive the build on Xcode and Distribute to Appstore for either publishing on Testflight or Appstore.

I used two different approaches for auto deployment on both platforms but both are trigger on pushing to a particular branch.

While in development, I use the dev branch as the active branch all changes are merged into

For Android, I decided to go with GitHub Actions that then pushes the app to Firebase App Distribution and notification sent out to the testers via email
For iOS, XCode Cloud did the job for me which is published to Testflight automatically and notification sent out to the users via push notification and email

Let's get right in

Android using GitHub Action and Firebase App Distribution

Create a .github/workflows folder in the root of the project
Create a build.yml file inside the .github/workflows

Add the code below. Pretty self explanatory and the name explains each action

name: Build And Deploy App To Firebase Distribution

on:
  push:
    branches:
      - dev

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: set up JDK 1.8
        uses: actions/setup-java@v3
        with:
          distribution: temurin
          java-version: 11
      - name: Setup Android SDK
        uses: android-actions/setup-android@v2
      - name: Setup Gradle
        uses: gradle/gradle-build-action@v2
      - name: Get yarn cache directory path
        id: yarn-cache-dir-path
        run: echo "::set-output name=dir::$(yarn cache dir)"
      - name: Restore node_modules from cache
        uses: actions/cache@v2
        id: yarn-cache
        with:
          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn-
      - name: Install dependencies
        run: yarn install
      - name: Make Gradlew Executable
        run: cd android && chmod +x ./gradlew
      - name: build release
        run: cd android && ./gradlew clean && ./gradlew assembleRelease --no-daemon
      - name: Upload artifact to Firebase App Distribution
        uses: wzieba/Firebase-Distribution-Github-Action@v1
        with:
          appId: ${{secrets.FIREBASE_APP_ID}}
          token: ${{secrets.FIREBASE_TOKEN}}
          groups: test-group
          file: android/app/build/outputs/apk/release/app-universal-release.apk

You'll need to specify the FIREBASE_APP_ID and FIREBASE_TOKEN gotten from Firebase when setting up Firebase App distribution

Once that is done and you push, the CICD should kick in. The progress and result can be accessed under the Actions tab.

Some debugging tips

try to run cd android && ./gradlew clean && ./gradlew assembleRelease locally first and ensure it's successful
The GitHub Action event will point out what is wrong if the build fails for you to debug and fix

iOS using XCode and Testflight

Create a .ci_scripts folder in /ios folder of your project
Create a ci_post_clone.sh file inside the .github/workflows

Paste this code in ci_post_clone.sh file

#!/bin/sh

export HOMEBREW_NO_INSTALL_CLEANUP=TRUE
brew install cocoapods
# have to add node yourself
brew install node@16
# link it to the path
brew link node@16

brew install yarn

# Install dependencies you manage with CocoaPods.
yarn
pod install
# the sed command from RN cant find the file... so we have to run it ourselves
sed -i -e  $'s/ && (__IPHONE_OS_VERSION_MIN_REQUIRED < __IPHONE_10_0)//' /Volumes/workspace/repository/ios/Pods/RCT-Folly/folly/portability/Time.h

OPTIONAL: Add this to your Info.plist file to resolve the encryption dialog check required before publishing an app to Testflight

<key>ITSAppUsesNonExemptEncryption</key>
<false/>

Push to the github branch you want to use for deployment. In my case dev
Launch Xcode and go to Product and Select Xcode Cloud
Follow the prompt and connect Xcode cloud to your GitHub project, specifying the dev branch or whatever branch you are working on
The remaining work will be done on the Appstore connect interface. Will update this article with those additional steps later on

Let me know if you have any questions.

Voila

Error Fix: Source "@openzeppelin/contracts/token/ERC721/ERC721.sol" not found: File import callback not supported

Suulola Oluwaseyi — Thu, 31 Mar 2022 08:55:32 +0000

If you've tried to work with @openzeppelin/contracts on VS Code, you might come across this error

The issue above is not with your code but with a particular VS Code extension - Solidity extension by Juan Blanco.

The latest version of v0.0.137 shows that error. To correct this

Go to Extensions and search for Solidity
You should see something like this

Click on the dropdown beside the Uninstall button and select Install Another Version

Select Version 0.0.135 from the list of options
Allow the version to install
Once the installation is done, you will be required to reload VS Code and the error should be gone at this point

Viola🥳🥳🥳🥳🥳🥳

The issue should be gone by now.

Hopefully, this issue is fixed in the next version release of v0.0.138

Change to Test Network on Metamask

Suulola Oluwaseyi — Sun, 20 Mar 2022 09:21:23 +0000

I recently started learning web3 and had to use Metamask. In recent updates of MetaMask, only the Ethereum Mainnet shows by default

In development, I need to change to a Test Network not work with the Ethereum Mainnet - until the application gets to production.

Clicking on Add Network shows you the list of all the test network but clicking on it doesn't change the network you are on. You can only Add an external network here - not one of the predefined ones listed.

So how do i change my network

Simple,

Go to Settings > Advanced
Look for Show test networks

Toggle it ON

Viola🥳🥳🥳🥳 Problem Solved. Now you can switch between the Ethereum Mainnet and the Test Network from the dropdown above.

Simple but can be tricky.

I hope this helps.

Error encountered while setting up React Native using Apple's M1 chip system

Suulola Oluwaseyi — Thu, 23 Dec 2021 22:43:43 +0000

First of all, having read a lot of information online - i knew it was not gonna be an easy ride running my existing project on Apple's M1 chip

The first thing I did was to create an empty project after following the React Native environment setup documentation on https://reactnative.dev/docs/environment-setup

Thereafter, I ran

npx react-native init AwesomeTSProject --template react-native-template-typescript

to create a broilerplate project. The initailization was successful until I ran npm run ios

1st Error: Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65.

Solved that by following this Stackoverflow post at https://stackoverflow.com/questions/65458086/failed-to-build-ios-project-we-ran-xcodebuild-command-but-it-exited-with-erro

At this stage, my project launched successfully.

Funny enough, I have answered a Stackoverflow question before relating to this at https://stackoverflow.com/questions/66062663/react-native-npx-react-native-run-ios-doesnt-work-after-initializing-the-proj/66143494#66143494 but yet my solution didnt come to me at the moment i had the issue.

After applying the fix, I was able to run my app successfully.

The second stage involves bringing in my existing codebas.

Using Netify Redirect

Suulola Oluwaseyi — Sun, 04 Apr 2021 12:07:58 +0000

Recently, I had two annoying errors which I had to deal with on Netlify and the "_redirects" file solved both for me.

The first issue I encountered was

CORS

Access to fetch at blocked by cors policy no 'access-control-allow-origin' header is present

The Almighty CORS issues - The annoying thing about CORS for me is the fact that I test all the APIs on Postman, tell the backend developer it's working - only for me to start the integration and viola - nothing works because of CORS.

The normal approach will be to tell the backend developer to make the necessary adjustment - but in my case, this was a public API I have no control over.

My first solution was to use https://cors-anywhere.herokuapp.com/corsdemo. Works fine in production but highly restricted on production.
The second solution that came to mind was to write a quick API - call the endpoint in my API which then serves my front-end. That's a longer but secure route which I unfortunately didn't implement.
The third solution was using redirects which is what I used eventually

Here are the steps using React

Create a _redirects file in your public directory. i.e your_project_folder/public/_redirects
Using the format below, redirect to the endpoint

/api/fetchCorsEndpointData https://corsendpoint.com/data 200

Now anytime you want to fetch data from https://corsendpoint.com/data, make an api call to https://yoursubdomain.netlify.app/api/fetchCorsEndpointData and viola - you get your data.

The second issue was

Mixed Content

Mixed Content: The page at was loaded over HTTPS, but requested an insecure resource ''. This request has been blocked; the content must be served over HTTPS.

The public API I was accessing was deployed on HTTP and not HTTPS - using the method specified above, I was able to access resources on the endpoint on Netlify. Specify in your _redirects file

/api/unsecureRoute http://unsecureendpoint.com/data 200

In your codebase, simply call https://yoursubdomain.netlify.app/api/unsecureRoute and it will fetch the resource on http://unsecureendpoint.com/data

BONUS

The third use case for me is

Page Refresh

Looks like you've followed a broken link or entered a url that doesn't exist on this site.

I get "Page Not Found" on refresh of a page on Netlify - the fix for me was to add the snippet below as the last line in my _redirects file

/* /index.html 200

I hope this helped fix whatever issue you have when deploying your React App on Netlify - let me know your thought in the comment section.

Viola✨✨✨✨

Building with Vue 3 with tailwindcss

Suulola Oluwaseyi — Sat, 26 Dec 2020 19:17:08 +0000

This tutorial will be building a full project using Vue 3 and combining it with the magic of Tailwindcss to produce a responsive multipage website

Below is the landing page of the webpage that will be built

Some of the concepts that will be learnt in the process include

Setting up a Vue project with tailwindcss
State management with vuex
Routing, Composition API in Vue 3
Creating reusable components
Persisting state in Vue application
Interacting with APIs

It promises to be an interesting an exciting journey.

The codebase can be accessed on GitHub Here. Give it a star if you find it helpful and your pull requests are definitely welcomed.

The choice of tailwind is become of the flexibility the utility library gives - especially for responsiveness and dark/light mode which is something we will implement across the application.

You can check the final product here as hosted on Netlify.

Drop your comment in the comment box and I hope you are as excited as I am to embark on this quest.

Your questions and comments are welcomed in the comment section.

Cheers

Hello Testing with Cypress and Selenium

Suulola Oluwaseyi — Thu, 02 Jan 2020 14:08:56 +0000

This article will test a simple log in page. Consider it the Hello World of testing using two frameworks.
I'll be writing using two different languages.

Selenium using Java
Cypress using JavaScript

For the sake of brevity, the article will be divided into three sections

Setting up and Testing with Cypress
Testing with Selenium
Comparison between Cypress and Selenium and use case scenarios

Setting up and Cypress installation

Let’s call the web app we will work on NASS Protector Launch. Anytime there is an alien attack on the planet, we can always login into the web app and click the “Rescue” button to wade off the incoming attacks. As such we need to monitor our login page to ensure it never malfuncions – and even if it does, for us to know on time

Since is a grand app,our engineers need to keep working round the clock to add additional more functionality to save the world but our concern here is to ensure the login always works regardless of the changes being made and for us to detect as fast as possible if any major functionality is broken And this is where automation test comes in

Let's setup the page first before we embark on automating testing

Here is a simple codebase for the login page and the dashboard with plain html, a little css and javascript.

Now that our login and dashboard pages are setup. It is time to move on to Cypress Installation

We start by creating a package.json to manage the cypress dependency that will be installed later.

npm init

I prefer using npm init -y then make any edit from there. Its faster that way. The next thing is to install cypresss. I will be using npm

npm install cypress –only=dev

If you prefer yarn

 yarn add cypress

When its done, you will get something like this

At this stage, your project structure should resemble this

to run cypress, simply run

npx cypress open

This pops up the above test modal suite you will get very familiar with very soon and if you look closely a folder will be created in your project directory named cypress.

If you got here, you’ve successfully set up cypress and you’re good to start writing code using Cypress. You will be writing most of your test code inside the cypress/integration folder. There are some examples in the example folder to familiarize yourself with Cypress syntax.

I normally delete the example folder but its a good place to start learn the workings of Cypress.

The first thing is to create a file within the integration folder, I will call it protector_launch and it will contain all the tests that has to do with this particular application while deleting the example folder.

Inside the protector_launch, create a test script. I will call mine login.spec.js

the ‘spec’ in-between is to show this is a test file and not a typical JavaScript file.

We start with a basic outline

the first line which is the reference line indicates that this is a cypress file and this aids in bringing auto-suggestion of cypress syntax while typing. Without it, you wont have auto-suggest.

If you’ve ever worked with mocha/chai or similar testing frameworks, you will be familiar with the describe and it syntax used in cypress.

The describe block is a way to group our test.It takes two argument

a string name describing what the test group is about
a callback function where we write each of our it statements that execute the test

Inside the describe block callback, let's start writing our test.

  before(() => {
    cy.visit("./../../../index.html")
  })

The first thing we want to do before we run our test is to visit the url. In this case, it is a relative path on the local machine. Assuming, i want to test my facebook login url

cy.visit("https://web.facebook.com/login")

Now, this is where the fun begins. We are set to write our first test here after visiting the web page.

  it("checks that the input fields are visible", () => {
    cy.get('#mail').should('be.visible')
    cy.get('#pass').should('be.visible')
  })

The it block also takes the same arguments as the describe block except that the content of the callback are usually actual tests.
Here we use cy.get() to locate the email input field that has an id of mail. You can use your developer tools to check the selector of the element you want to target. cy.get() in cypress acts like document.querySelector() in javascript. Just specify the selector and it does the magic.

After selecting the elements with id of mail and pass. We use the should method to check if it is visible on the page, if it is visible then the test will pass else the test fails.

  it("a user cannot login with incorrect credentials", () => {
    cy.get('#mail').type('user@alien.com')
    cy.get('#pass').type('frompluto')
    cy.contains('Log').click()
    cy.url().should('include', '/index.html')
    cy.get('#mail').should('be.visible')
    cy.get('p').should('not.have.text', 'Now you can save the world')
  })

The next test is to check if a user can login in with incorrect credentials. type is used to type the details in the input field selected.
cy.contains() searches for an element on the page that contains the text, then .click() clicks on that element.

The assertion here tests that the user is still on the same page with

cy.url().should('include', '/index.html')

A successful login will have changed the page to dashboard.html so if that passes, then the login failed. The other assertions ensures the input field with an id of mail is still present on the page and that the page does not contain the text present on the dashboard.

  it("logins into the application with the correct credentials", () => {
    cy.get('#mail').type('test@test.com')
    cy.get('#pass').type('tester')
    cy.contains('Log').click()
    cy.url().should('include', '/dashboard.html')
    cy.get('p').should('have.text', 'Now you can save the world')
  })

This next test code does the same thing as above except that it checks if a user with the correct credentials is able to login to the application and move to the dashboard where you can save the world.

Apart from web page testing, cypress can also be used for

API testing
Performance/Load testing

Using the current application, we can write a simple GET request

  // a simple api request mock
  it("checks if the app is up and running when called", () => {

    // the request body contains the method(whether GET, POST, PUT, DELETE), the endpoint/url and the necessary header options
    cy.request({
      method: 'GET',
      url: './../../../index.html',
      headers: {
        accept: 'text/html',
      }

    })
    .then(response => {
      // this is where the response gotten from the server is tested
      // 200 response means its okay and good
      // when not sure, you can always console.log(response)
      expect(response.status).to.eq(200)
      expect(response.statusText).to.eq("OK")
      expect(response).to.have.property("headers");
      expect(response.body).to.have.length.greaterThan(500);

    })
  })

A simple performance test with the current web page will look like this

  it('check page load time', () => {
    cy.visit('./../../../index.html', {
      onBeforeLoad: win => {
        // marks the start time when the request is launched
        win.performance.mark("start-loading")
      },
      onLoad: win => {
        // marks the time when the page is displayed
        win.performance.mark("end-loading")
      }
    }).its("performance").then(perf => {
      // when not sure, you can always console.log("this is perf",perf)

      // this is where the measure takes place. it subtracts the end-loading from the start-loading and stores it in pageLoad
      perf.measure("pageLoad", "start-loading", "end-loading")
      const load = perf.getEntriesByName("pageLoad")[0]
      // checks if the load duration is more than 10ms
      assert.isAtMost(load.duration, 10)
    })


  })

I added comments to the code to make it explanatory enough to understand.

The full codebase can be found on

mySuulola / hello_test

hello_test

View on GitHub

Comments, Questions and Observations are welcomed.

Next is writing our Selenium test