
Redux is a global state management javascript library for managing and centralizing an application state.

### Goal:
The goal of this blog post is to ensure that by the end, you will be able to add redux to your NextJs application and manage states within your application.

**Assumptions:**

I assume you have a NextJs application already set up.

**Installation:**

As of 2022, the Redux team strongly recommends the use of the Redux Toolkit as an approach for writing redux logic. Why? Because Redux Toolkit simplifies most Redux tasks, prevents common mistakes, and makes it easier to write Redux applications.

Install the Redux Toolkit library from either npm or yarn depending on the package manager you prefer or use.

```bash
yarn add @reduxjs/toolkit
yarn add react-redux
```

or

```bash
npm install @reduxjs/toolkit
npm install react-redux
```

### Configuring a Store
```typescript
import { configureStore } from "@reduxjs/toolkit"

export const store = configureStore({
  reducer: {
    // reference reducers here
  }
})

// create types for state and dispatch
export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch
```

**Explanation:**
On line 1, we imported a function called configure store that takes in an object as an argument. Here, we pass in the reducers we have created which makes it possible to reference or access other states within other components using the useSelector hook. (we will get to that soon).

On line 3, we create and export a store.

On lines 10 and 11, we create a type for our root state to get better IntelliSense when trying to access the global state.


### Define Typed Hooks
Redux Toolkit makes the following hooks available to us for use. These hooks are **useSelector** and **useDispatch**. While it is still possible to import the types we defined in our store.ts file above which are **RootState** and **AppDispatch** into our components, it is better to create typed versions of the useSelector and useDispatch for our application as well.

**Reasons:**
- For **useSelector**, **useAppSelector** saves us the need to type our state every time ( state: RootState).
- For **useDispatch**, **useAppDispatch** save us from forgetting to import AppDispatch where it is needed.

```typescript
import {TypedUseSelectorHook, useDispatch, useSelector} from "react-redux"
import type {RootState, AppDispatch} from "store"

// use throughout your app instead of useDispatch and useSelector

export const useAppDispatch: () => AppDispatch = useDispatch
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
```

### Create a Slice
```typescript
import {createSlice, PayloadAction} from "@reduxjs/toolkit"
import {RootState} from "hooks"

type Note = {
  id: string;
  heading: string;
  content: string;
}

interface NoteState {
  notes: Array<Note>
}

const initialState: NoteState = {
  notes: [
    { id: '1', heading: 'Todo for the day', content: '' }
  ]
}

export const noteSlice = createSlice({
  reducers: {
    addNote: (state, action: PayloadAction<Note>) => {
      const note = action.payload;
      state.notes.push(note)
    },
    removeNote: (state, action: PayloadAction<string>) => {
      const id = action.payload;
      const notes = state.notes.filter((note) => note.id !== id);
      state.notes = notes;
    }
  }
})

// actions
export const {addNote, removeNote} = noteSlice.actions 

// selectors
export const selectNotes = (state: RootState) => state.notes.notes

export default noteSlice.reducer
```

The code above is an example of how to create a slice in Redux. A slice here means, splitting the Redux state into multiple states. A slice is a collection of reducer logic and actions for a single feature in an application. In this example, the feature is to add and delete notes.

_Below is a detailed explanation of what is happening in the slice file:_

On line 1, we import **createSlice** and **PayloadAction** from @reduxjs/toolkit. **createSlice** is a function that combines the steps of creating an action and a reducer separately. Thus, instead of creating a file to handle action logic and reducer logic by importing **createActions** and **createReducer** respectively, we only import **createSlice**.

On the same line, we are importing **PayloadAction**. PayloadAction allows us to type the parameters of an action payload.

From lines 3 to 17, we are defining the type and interface of our initial state.

From lines 19 to 31, we create our note slice and export it. In between, we write some reducer logic to add and remove notes.

On line 39, we export our note slice reducer. After exporting we have to go back to our store file to add the reducer to our store.

```typescript
import { configureStore } from "@reduxjs/toolkit"
import noteReducer from "slice"

export const store = configureStore({
  reducer: {
    notes: noteReducer
  }
})

export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch
```

### Usage:
Here, we will briefly look at how to use the slice we have created in a React component.

```typescript
import {useAppSelector, useAppDispatch} from "hooks"
import {selectNotes, removeNote} from "slice"

const HomePage = (): JSX.Element => {
  const notes = useAppSelector(selectNotes);
  const dispatch = useAppDispatch();
  
  const deleteNote = (noteId: string) => {
    dispatch(removeNote(noteId))
  }
  
  const renderNotes = notes.map((note) => (
    <div key={note.id}>
      <h1>{note.title}</h1>
      <p>{note.content}</p>
      <button onClick={() => deleteNote(note.id)}>Delete Note</button>
    </div>
  ))
  
  return (
    <div>
      {renderNotes}
    </div>
  )
}

export default HomePage;
```

On Line 1, we import useAppSelector to access our state and useAppDispatch to dispatch actions and modify our state.

On Line 2, we import a selector(selectNotes) to get the notes state from our slice module and an action (removeNote).

For the rest of the code, we render the list of notes in our state. Each note has a button attached to it which when clicked, will dispatch an action to remove that note from our state.

### Summary:
This brings us to the end of this blog post. So far, we have covered:

- how to set up redux in a NextJs application.
- how to define typed hooks.
- how to create a slice.
- how to use redux in a React component.

Unfortunately, I couldn't cover topics such as Redux Thunk, and other middleware which will be part of my next blog. Please watch out.

### References
- [Redux Documentation](https://redux.js.org/introduction/getting-started)
-  Header Image by [Ellienore Bradley](https://medium.com/r/?url=https%3A%2F%2Funsplash.com%2F%40ellienoreb%3Futm_source%3Dmedium%26utm_medium%3Dreferral)

Setup Redux in your NextJs Application(with Typescript)


Cypress is a frontend testing tool built for the modern web that allows a developer to **_set up_**, **_write_**, **_run_**, and **_debug tests_**.

With Cypress, you can write all kinds of tests for your project. In short, cypress can test anything that runs in a browser. These tests include:

- End-to-end tests
- Integration tests
- Unit tests

## Setting up Cypress in Your Project

To set up Cypress in your project, all you’ll have to do is to run the command below to install Cypress as a development dependency:

```bash
yarn add -D cypress
npm install cypress --save-dev
```

## Running Cypress

The next step is to run cypress in your project. To run Cypress, run the command:

```bash
yarn run cypress open
```

After running the command above, Cypress will open a window to allow you to configure Cypress based on your preference.

> First, you will be asked the type of test you’ll want to configure with Cypress. Here, you have two options; an **End-to-end test** or a **Component test**.

![choosing a test type](test-type.png)

> Next, you’ll be asked to select a browser you prefer to run Cypress.

![selecting a preferred browser to run Cypress](preferred-browser.png)

## Add a test file

Now, you will be presented with a browser window(**Cypress App**) to create a **spec file**. What is a spec file?

> A spec file is a file where tests are written and can be located in cypress/e2e by default, but can be configured to another directory.

Click on the “create new empty spec” button to add a test file.

![adding at test file](test-file.png)

Upon clicking the button, you will see a dialog where you can change the spec file name or accept the default name.

![create spec file](create-spec.png)

## Write Your First Test!

Type the code below in your **spec file** and see your test run in real time right after saving your changes.

```javascript
describe("My first test", () => {
  it("Does not do much!", () => {
    expect(true).to.equal(true);
  });
});
```

> For further guidance on how to write tests, checkout cypress documentation [here](https://docs.cypress.io/guides/core-concepts/introduction-to-cypress)

## Bonus:

All along, we have been running cypress in the browser. What if we want to run cypress right within our terminal(headless mode)?

To do that, run the command below:

```bash
yarn run cypress run --browser chrome --headless --no-exit
```

![running cypress in headless mode](headless-mode.png)

That will be all for this post. I hope it was helpful one way or the other. Bye!👋


Setting up Cypress in your NextJs project



## Introduction

Software developers have preferences and style conventions when using tools to build software products. These preferences and style conventions escalate into hot arguments and debates in no time.

**Developer A**: I prefer using spaces over tabs.

**Developer B**: Single quotes over double quotes any day, any time!

**Developer C**: Bro! who uses a light theme in this era?

These issues can be prevented by using tools such as **eslint**(ensures code consistency), **prettier**(formats your code), and **husky**(helps you hook into gits’ pre-commit and post-commit lifecycle).

Before committing your code, a set of rules is run against staged files to ensure that your code adheres to the rules defined in your eslint and prettier files. This check is what enforces and ensures “sanity” and maintains consistency throughout a project, especially when working with a group of developers or when people are committing code to your open source project.

## Getting Started

To set up your NextJs or React project with eslint, prettier, and husky, install the following dependencies:

```bash
yarn add --dev eslint prettier husky lint-staged eslint-config-prettier
```

The purpose of each dependency installed:

- **eslint**: to ensure code quality
- **prettier**: to ensure that code is properly formatted according to the rules defined
- **husky**: makes it possible to run scripts in our package.json file on git lifecycle hooks.
- **lint-staged**: runs defined scripts on only staged files(git).
- **eslint-config-prettier**: prevents any code formatting conflicts between eslint and prettier. As we know, eslint handles both code quality and code formatting. This package disables the rule in eslint that formats code so that eslint only focuses on ensuring code quality.

## Prettier Configuration:

1. Create a **.prettier.json** file and paste the following rules in there:

```json
{
  "trailingComma": "es5",
  "bracketSpacing": true,
  "printWidth": 80,
  "tabWidth": 2,
  "singleQuote": true,
  "arrowParens": "always"
}
```

2. Create a **.prettierignore** file. Here, pass in the folders and files prettier should avoid when formatting your code. Below are some of the folders I ignore:

```
node_modules
build
dist
```

## Eslint Configuration:

Projects like _create-react-app_ and _NextJs_ already have eslint preconfigured. The only thing you’ll need to do is to extend **prettier** in the eslint file **.eslintrc.json**

> Reason? We want eslint to focus on code quality issues only and let prettier handle formatting our code. This is where the eslint-config-prettier package we installed earlier comes to play

```json
"extends": ["next/core-web-vitals", "prettier"]
```

But for projects without eslint configured, follow the steps below:

1. Initialize eslint and follow the command line prompts.

```bash
npx eslint --init
```

2. After following the command line prompts, a **.eslintrc.json** file will be created. Extend prettier there.

3. Add **.eslintignore** file to ignore the **node_modules, build,** and **dist** folders.

## Lint-staged Configuration:

Run the command below to install and configure husky and lint-staged

```bash
npx mrm@2 lint-staged
```

Once lint-staged is done, it will create a script inside package.json like this:

```json
"lint-staged": {
  "*.{js, jsx, ts, tsx}": "eslint --cache --fix",
  "*.{js, css, md}": "prettier --write"
}
```

Also, a **.husky** folder will be created. Open the **pre-commit** file and add the line:

```bash
yarn lint-staged
```

The above command will run the lint-staged script in the package.json file when committing which ensures that code is formatted according to the rules defined and that the code is free from any linting issues.


![after lint-staged script runs successfully](lint-staged-success.png)

Setting up Eslint, Prettier, and Husky in your Nextjs project


Analytics is a way to gather metrics about your business in an eye-opening experience. Knowing where your users come from, events users trigger on your web pages, the number of users that return to your site(retention), or the pages and features your users interact with can go a long way to help you build a successful product.

> I wrote this blog for my future self. Navigating through documentation and other resources can take a lot of time. Also, it took me a long time to understand the features provided by Google Analytics so that I could take full advantage of the platform.

## Blog Format

This blog will be in two parts. The first part will cover the technical aspect of setting up Google Analytics in your NextJs project.
The **second part** of this blog post will cover **the questions bothering me** whiles setting up Google Analytics, most of which I found answers to through research.

## Part 1: Technical Aspect of Setting Up Google Analytics in NextJs

1. Visit [analytics.google.com](https://analytics.google.com/) and sign in with your Google account.
2. Navigate to the **admin page** by clicking on the **admin** link at the bottom left section of the side navigation bar.

![Click on the admin link to access the admin page](admin-access.png)

3. Click the **create property button** to create a new Google Analytics 4 property.

![create a new Google analytics 4 property](google-analytics-property.png)

4. Provide a name for your property and fill in your business information to create a Property.

![filling in the property details](property-details.png)

![adding your business information](business-info.png)

5. The next step is to set up a data stream to start collecting data. The data stream lets Google Analytics know where we will be gathering the data from **(_web_, _android app_, or _iOS app_)**. In our case, we will choose the web option. Now, provide all the necessary details.

![selecting a data stream](data-stream.png)

6. Finally, collapse the Global site tag(gtag.js) section and copy the code in a safe place. It will come in handy very soon.

![copy gtag code](copy-code.png)

At this point, you have your **measurement ID** and **Global site tag(gtag.js)** code. Let’s jump into adding Google Analytics to our NextJs project in the next section.

## Adding Google Analytics Global Site Tag(gtag.js) in our NextJs Project

One thing about analytics is that it should be running on every page. In NextJs, any shared layout between all pages is moved to a custom **\_app.js** file. Hence, we will inject the **gtag** script code within this file so that we get data from each page.

But first, let's create some reusable functions. One for getting **page views**, and the other for getting events such as _button clicks_, _video clicks_, etc.

```javascript
// exporting our google analytics measurement id from our .env file
export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS;

// records data on each page visited
export const pageView = (url: string) => {
  window.gtag("config", GA_TRACKING_ID, {
    page_path: url,
  });
};

// handles any custom event we want to track. For eg. how many clicks has our subscribe button
export const event = ({ action, category, label, value }: any) => {
  window.gtag("event", action, {
    event_category: category,
    event_label: label,
    value: value,
  });
};
```

Secondly, let’s add the gtag script code in our \_\_apps.js file.

```javascript
import { useEffect } from "react";
import { useRouter } from "next/router";
import type { AppProps } from "next/app";
import Script from "next/script";

// reusable gtag function
import * as gtag from "config/gtag";

function MyApp({ Component, pageProps }: AppProps) {
  const router = useRouter();

  useEffect(() => {
    // function to get the current page url and pass it to gtag pageView() function
    const handleRouteChange = (url: string) => {
      gtag.pageView(url);
    };

    router.events.on("routeChangeComplete", handleRouteChange);
    router.events.on("hashChangeComplete", handleRouteChange);

    return () => {
      router.events.off("routeChangeComplete", handleRouteChange);
      router.events.off("hashChangeComplete", handleRouteChange);
    };
  }, [router.events]);
  return (
    <>
      {/* gtag script code */}
      <Script
        strategy="afterInteractive"
        src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`}
      />
      <Script
        id="gtag-init"
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: `
        window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
        
          gtag('config', '${gtag.GA_TRACKING_ID}', {
            page_path: window.location.pathname
          });`,
        }}
      />
      <Component {...pageProps} />
    </>
  );
}
```

Now, run your app and navigate to other pages within your application. Head over to your analytics dashboard. You should see some analytics being displayed such as the number of users on your site, the pages you have visited, etc.

![real time analysis](real-time.png)

At this point, you have everything to start gathering and making informed decisions about the data being recorded on your website.

## Part 2: Questions I needed answers to when setting up Google Analytics

During my research in setting up Analytics within my NextJs application, I came across similar terms such as **_Google Analytics, Google Analytics Tag, Google Analytics Tag 4, Firebase Analytics, Google Analytics for Firebase_**, etc.
I wanted to know the difference between each term. Hence, I started searching for answers to those questions.

> What is the difference between Google Analytics, Firebase Analytics, Google Analytics 4, etc.

**Google Analytics** “classic” is a web analytics service offered by Google that tracks and reports website traffic. It was launched in the year 2005 after acquiring Urchin.

Google Analytics is in its **fourth version**. Below is the list of the previous versions:

- The **first version of Google Analytics(GA1)** is the Classic Google Analytics([ga.js JavascriptLibrary](https://developers.google.com/analytics/devguides/collection/gajs)).
- The **second version of Google Analytics(GA2)** is the _Universal Analytics_(analytics.js Javascript Library).
- The **third version of Google Analytics(GA3)** is also _Universal Analytics_ but it uses the gtag.js Javascript Library.

**Note: Google Analytics 4**(the fourth version of Google Analytics “classic”) also uses the **_gtag.js Javascript_** Library but uses a new measurement ID.

**Firebase Analytics** on the other hand is an analytics feature within the Firebase platform that allows data collection of mobile app interactions.

In 2014, Google acquired the independent company, **Firebase**, and up until 2021, **the name Firebase Analytics was deprecated**. Firebase Analytics is now known as **Google Analytics(after being changed to Google Analytics for Firebase)** and is still the only analytics module within the Firebase platform.

_Honestly, if you’re confused as me about the differences in names, it is no fault of yours. Google has been poor when it comes to naming this product. Firebase Analytics, as explained above, was changed to **Google Analytics for Firebase**, then later to **Google Analytics**. And **Google Analytics, as we already know before the Firebase acquisition**, is now called **Google Analytics 4.**_

> Does it mean that Google Analytics for Firebase and Google Analytics(Google Analytics 4) have the same features?

Both Google Analytics for Firebase(aka Firebase Analytics) and Google Analytics 4 allow you to track events on both native/hybrid apps and websites/web apps.

So yes, both products currently have the same features. The only difference is the terminologies used in these environments. For example, what you think of as a Firebase project is generally known as property in Google Analytics 4 environment.

Thank you for getting to this point. If you have any suggestions or questions, kindly leave them in the comment section. Also, for any further reading, check out the resources listed below:

- [Google Analytics vs Firebase Analytics vs Google Analytics by Todd Kerpelman](https://medium.com/firebase-developers/google-analytics-vs-firebase-analytics-vs-google-analytics-97ca645a8aff)
- [Google Analytics 4 vs Firebase vs Firebase Analytics: What’s the difference by Anna Sinitsyna](https://infotrust.com/articles/ga4-firebase-analytics-differences/)
- [Google Analytics 4(GA4) vs Universal Analytics — What is the difference? by Himanshu Sharma](https://www.optimizesmart.com/google-analytics-4-ga4-vs-universal-analytics-what-is-the-difference/)


Setting up Google Analytics in Your NextJs Project


This is part four (final part) of the blog series "Publish your Production-Ready React App To Production". In part 1, we looked at how to prepare a React Native App for production. After, we went through how to manually distribute a React Native app to production using Firebase App Distribution. And in part 3, we looked at how to automate the process of releasing our app to Firebase App Distribution using Fastlane.

In this part, we will continue from where we left off in part 3 and build a CI/CD pipeline using Github Actions and Fastlane.

### Topics to cover:

1. Automatic Versioning
2. Building a CI/CD pipeline to bundle and release our App.

### Automatic Versioning

Working with a cross-platform mobile framework like React Native means that at the end of the day, your javascript code will be transpiled to two native codebases (Objective-c and Java). The **problem** with this when it comes to assigning version numbers to files is that:

1. You will have to open the file **./android/app/build.gradle** to modify the version number.
2. You will have to do the same thing for iOS as well by editing the configurations using Xcode
3. Lastly, you will have to modify your Javascript(package.json ) version number to keep it in sync with the Android and iOS version numbers.

Going through each step above upon every release of a feature of your app is very **repetitive**, **unproductive**, and **error-prone** since the developer might forget to update one of the files.

### The Solution

We need a single file to serve as a source of truth. We want our Android and iOS versions to match whatever package.json version number is set to.
Here, we are going to:

Here, we are going to:

1. Use npm version to handle the Javascript package version.
2. Use fastlane to update the Android and iOS sides by getting the version number set in package.json file.
3. Combine steps one and two into a single npm script.

### Steps:

1. **Install Plugins:**

Inside the root folder of your project, add the plugins below to fastlane.

```bash
# install plugins
fastlane add_plugin increment_version_name increment_version_code load_json
```

- **increment_version_name:** Increases the version name of your project.
- **increment_version_code:** Increases the version code of your project.
- **load_json:** Loads a local JSON file and parses it.

![plugins successfully added](plugins-added-successfully.png)

2. **Add Fastlane Scripts to Fastfile:**

Under this step, we will write a script to increment our android version inside our Fastfile.

```javascript
# --------- Bump Android Version ---------------
desc "Android: Increase versionCode"
package = load_json(json_path: "./package.json")
private_lane :increase_android_version do
  increment_version_code(gradle_file_path: './android/app/build.gradle')
  increment_version_name(gradle_file_path: './android/app/build.gradle', version_name: package['version'])
end

# --------- Bump iOS Version ---------------
desc "iOS: Increment versionCode and set versionName to package.json version"
private_lane :increase_ios_version do
	increment_build_number(xcodeproj: './ios/' + package['name'] + '.xcodeproj')
	increment_version_number(xcodeproj: './ios/' + package['name'] + '.xcodeproj', version_number: 		package['version'])
end

desc "Bump build numbers, and set the version to match the pacakage.json version."
lane :bump do
  increase_android_version
  increase_ios_version
end
```

3. **Npm scripts for automatic version bump.**

Under this step, we will write some npm scripts that will automatically bump our version number (major, minor, or patch) inside our **package.json** file

```bash
"scripts": {
  "bump-patch": "npm version patch --no-git-tag-version && bundle exec fastlane bump",
  "bump-minor": "npm version minor --no-git-tag-version && bundle exec fastlane bump",
  "bump-major": "npm version major --no-git-tag-version && bundle exec fastlane bump"
}
```

Below is the current version number of our package.json file (v0.0.1)

![the current version of our app](current-app-version.png)

We will update our code and test our script by bumping the patch number from 0.**0.1** to **0.0.2** by running the command npm **run bump-patch** . If you want to bump the minor or major number, replace the command with **npm run bump-minor** and **npm run bump-major** respectfully.

![successfully bump version numbers](successful-bump.png)



![version number updated](version-number-update.png)

### Building a CI/CD pipeline using Github Actions with Fastlane

Under this section, we will use Github's workflow automation tool Github Actions to run test suites, scripts, deploy code, etc based on certain Github Events such as a **pull_request**, **push**, **merge**, etc on a particular branch of our repository.

**We will:**

1. Set up Github Actions in our repository
2. Create a workflow to deploy code and tag each release

### Set up Github Actions 

_Prerequisites: A GitHub repository_.

There are two ways of setting up Github Actions, either remotely or locally. In this tutorial, we will look at how to set up Github actions locally in your project. The actions will be triggered if it meets a particular **Github Event Type** once pushed to Github.

#### Steps:

1. Inside the root of your project, create a folder called .github

2. Within the .github folder, create a folder called **workflows**. Here, we will define our workflow files using YAML syntax. Multiple workflow files can be created in the workflows folder. We will start by creating a **CI** workflow file.

3. Create a continuous delivery workflow file **cd.yml**.

![set up Github actions inside the project](github-actions-setup.png)

### Create a workflow to deploy code and tag each release

- **Inside the cd.yml file put a name for the workflow.**

```javascript
name:  Deploy To Firebase App Distribution And Bump Tag Version
```

- **Define which Github Event Type should trigger our actions**

Below, when there is a push event on the master branch of our repository, our code will be deployed to Firebase App Distribution.

```javascript
on: push: branches: [master];
```

- **Create Jobs and Define Steps**

```javascript
jobs:
  build-production:
    runs-on: macos-latest

    steps:
    - name: Checkout Repository in Github VM
      uses: actions/checkout@v2
    - name: Run Node in Github VM
      uses: actions/setup-node@master
    - name: Install Dependencies
      run: |
        npm install

    - name: Install Ruby
      uses: ruby/setup-ruby@v1
      with:
        ruby-version: 2.6
    - name: Install Fastlane
      run: |
        bundle install
        bundle update fastlane
    - name: Build and Publish Mobile App
      run: |
        bundle exec fastlane android distribute
```

In the script above, we did the following:

- added a job "**build-production**" to run a series of steps in other to build our app for production.
- run the job on a **macOS** virtual machine. I had issues running this workflow on an ubuntu virtual machine.
- **actions/checkout@v2:** Checkout the current repository inside our Github virtual machine
- **actions/setup-node@master:** Install node in our virtual machine
- **npm install:** Install NPM package dependencies
- **ruby/setup-ruby@v1:** Install ruby with version number 2.6 to run Fastlane.
- **bundle install:** Install Fastlane
- **bundle update fastlane:** Update Fastlane.
- **bundle exec fastlane android distribute:** build and release code to Firebase App Distribution.

At this moment, I can say we have come very far in getting close to complete our Continuous Delivery workflow. But unfortunately, when we run our workflow, it will fail.

### The Problem.

In part 3 of this series, we kept all of our sensitive information needed for Fastlane to build our code in a .env file and hid it in a **.gitignore** file so that such secrets won't be pushed to our version control system(Github).

Now, we are no longer running Fastlane on our local machine like we did in part 3 but rather in a Virtual Machine on Github. And this virtual machine has no access to these secrets we have kept away from our repository on Github.

We need to find a way of making these secrets accessible to the virtual machine inside Github and at the same time not exposing these secrets.

#### The Solution

The ideal solution is to encrypt the secrets using a tool called **gpg**. Then inside of our **.github** folder, create a folder **scripts** and a file **decrypt.sh** inside of the scripts folder to decrypt our encrypted file. This will make our secrets available inside our GitHub virtual machine without exposing any secrets.

**Note:** check out gpg official documentation site on how to install it on your local machine here.

![create scripts file](scripts-folder.png)

### Modifying Fastlane Folder

We will make some changes to our .env file. We will move the secrets in there into keys.properties file.

![create a keys.properties file](keys-properties-file.png)

### Encrypt the key and keystore file using gpg tool.

Inside the root of your project folder, run the command:

```
gpg -- symmetric -- cipher-algo AES256 fastlane/keys.properties
```

When prompted, enter a passphrase to complete the encryption process. Remember to keep the password safe inside your Github Actions secretes on Github.

![enter a passphrase to complete the processe](passphrase.png)

**Note:** An encrypted file **keys.properties.gpg** file will be created afterward.

![encrypted file keys.properties.gpg](encrypted-file.png)

Repeating the same steps, encrypt the keystore file.

```
gpg -- symmetric -- cipher-algo AES256 android/app/your-keystore.keystore
```

An encrypted file your-keystore.keystore.gpg will be created afterward.

### Ignoring files inside .gitignore

- Remove **.env** file from .gitignore file. This is because we want to populate the secrets inside the .env file after the decrypt.sh script has run in Github's virtual machine.

- Add keys.properties to .gitignore to protect sensitive information.

#### Script to decrypt the encrypted files

- Open **decrypt.sh** file inside **.github/scripts/** folder
- Add the code below:

```bash
#!/bin/sh

# Decrypt the file
# --batch to prevent interactive command
# --yes to assume "yes" for questions
gpg --quiet --batch --yes --decrypt --passphrase="$KEYS_KEYSTORE_PASSPHRASE" \
--output android/app/release-key.keystore android/app/release-key.keystore.gpg

gpg --quiet --batch --yes --decrypt --passphrase="$KEYS_KEYSTORE_PASSPHRASE" \
--output fastlane/keys.properties fastlane/keys.properties.gpg
```

### Recap of what we've done under this section

- created a keys.properties file
- moved all the secrets in .env file into keys.properties
- encrypted keys.properties and release-key.keystore files and store a passphrase inside Github Actions secrets on Github.
- Ignored keys.properties file and removed .env file from .gitignore
- Wrote a script inside .github/scripts/decrypt.sh to decrypt the encrypted files.

### Updating the Workflow file:

Below is a script that will decrypt our encrypted files when our workflow is triggered and running inside a Github virtual machine.

```bash
- name: Decrypting
  run: sh ./.github/scripts/decrypt.sh
  env:
    KEYS_KEYSTORE_PASSPHRASE: ${{secrets.KEYS_KEYSTORE_PASSPHRASE}}
- name: Make fastlane/keys.properties executable
  run: |
    chmod +x fastlane/keys.properties
- name: Dump fastlane/keys.properties into .env file
  run: |
    cat fastlane/keys.properties > fastlane/.env
```

If you've followed each step, you should have the same code below:

```bash
name: Deploy To Firebase App Distribution And Bump Tag Version

on:
  push:
    branches: [master]

jobs:
  build-production:
    runs-on: macos-latest

    steps:
      - name: Checkout Repository on Github VM
        uses: actions/checkout@v2

      - name: Run Node in VM
        uses: actions/setup-node@master

      - name: Decrypting
        run: sh ./.github/scripts/decrypt.sh
        env:
          KEYS_KEYSTORE_PASSPHRASE: ${{secrets.KEYS_KEYSTORE_PASSPHRASE}}

      - name: Make fastlane/keys.properties executable
        run: |
          chmod +x fastlane/keys.properties

      - name: Dump fastlane/keys.properties to .env file
        run: |
          cat fastlane/keys.properties > fastlane/.env

      - name: Install Ruby
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: 2.6

      - name: Install Dependencies
        run: npm install

      - name: Install Fastlane
        run: |
          bundle install
          bundle update fastlane

      - name: Build and Publish Mobile App
        run: |
          bundle exec fastlane android distribute
```

### Tag Version Release:

We are left with the last piece of the puzzle and that is tagging each release with a tag number. After every successful deployment of our code to Firebase App Distribution, we want to tag the latest commit(head) with the App's version number.

Tagging is very important because it allows developers to mark important checkpoints in the course of their project development and essentially give your commit a special name.

We will add another job to tag our latest release when the build-production job has run and completed successfully.

### Updating the Workflow

```bash
tag-version-release:
  needs: build-production
  runs-on: ubuntu-latest
  steps:
    - uses: actions/checkout@v2
    - uses: actions/setup-node@master
    - name: Install Dependencies
      run: |
        npm install
    - name: Get Version Number
      run: |
        git config --local user.email "youremail@domain.com"
        git config --local user.name "username"
        export PACKAGE_VERSION=$(node -p -e 'require("./package.json").version')
        git tag -a "$PACKAGE_VERSION" -m "latest version"
        git push origin --tags
```

Below is an explanation of the script above:

- **needs: build-production**: this line means that the **tag-version-release job** should only run when the **build-production job** has completed successfully.

- **get version number block:**

1. we configure git with our username and email so that we can run git commands inside the virtual machine.
2. We also get the version number from **package.json** and stored it in a variable called $PACKAGE_VERSION
3. Lastly, we created a tag and pushed it to our repository.

### Workflow Live in Action

![build production job completed successfully](production-build-successful.png)

![code published to Firebase App Distribution automatically.](published-code.png)

💡Pro Tip: In case you find this error **Plugin 'firebase_app_distribution' was not properly loaded** update your plugin by running the command bundle exec fastlane update_plugins

### Recap:

✅ Build a CI/CD pipeline that deploys our code to Firebase App Distribution when a Github Event Type gets triggered using Github Actions and Fastlane.

✅ Tag each release version automatically.

✅ Learned how to encrypt and decrypt files using the tool gpg.

### Resources:

- [Github Repo: rn-production](https://github.com/victorbruce/rn-production)


Distribute React Native Apps by Building a CI/CD Pipeline Using Fastlane and Github Actions (Android)


[EmailJs](https://www.emailjs.com/) makes the entire process of sending messages to your **email service**(Gmail, Yahoo, etc.) or **transactional service**(Mailgun, Mailjet, Sendgrid, etc.) a breeze. In my previous post, [“How to send emails using React through EmailJs”](https://victorbruce82.medium.com/how-to-send-emails-using-react-through-emailjs-no-server-code-needed-8e1453ef8796). I touched on how to send emails to personal services, specifically, **Gmail**. In this blog post, I will talk about how to send emails to a custom SMTP server using EmailJs.

In case you’re wondering what SMTP is, **SMTP**(Simple Messaging Transfer Protocol) is a communication protocol for electronic mail transmission ([Wikipedia](https://en.wikipedia.org/wiki/Simple_Mail_Transfer_Protocol)). Mail servers and other mail transfer agents use SMTP to send and receive mail messages.

Recently, I worked on a project built with React and hosted on HostGator. After creating a new email under the registered domain(info@mywebsite.com), I needed a way to send messages to the newly created email account via a contact form I built with React.

I was happy when I found out EmailJs supports SMTP-server because of their easy to understand documentation and API integration. In no time, I was able to complete the task of connecting a custom SMTP-server using EmailJs to a contact form. Hence, I decided to write a tutorial on the topic.

Below are the simple steps you will need to follow to connect your website form to a custom SMTP server and send emails using EmailJs service.

### Step 1: Adding an Email Service(SMTP server)

Assuming you have an account and have signed in to your dashboard. Click on the email services link on the left sidebar. You should see a button with the inscription **Add Email Service**. A pop-up modal will open, select the SMTP server as the preferred email service to add.

![add smtp server as email service](smtp-server-as-email-service.png)

### Step 2: Configuring the SMTP server

![configure service form](config-form.png)

A pop-up **config service form** will appear. Fill the input fields with the appropriate values. This step is the most important of all hence ensuring that the information you are providing is accurate check your mail configuration settings file. In my case, HostGator sent a mail client configuration settings to my mail after creating it. If you’re using a different hosting platform, yours might be a little bit different. But the most important thing of all is that you should know what values to provide. Below is an explanation with examples of what each field should hold.

- **Name:** Provide a name for your SMTP server. For example mypersonalsite

- **Service ID:** The service ID could be anything meaningful. For example smtpmail

- **Host:** You can find this information from your hosting mail client configuration settings file. In my case, hostgator sent this information to me right after creating an email account under my domain. Mostly, it should be in this format: **mail.myemail.domainName.com**.

Lastly, don't forget to check the **Use SSL** option if your SMTP server supports SSL.

> Note: I’m going to skip the step on how to create an EmailJs email template for your contact form. The reason being that I have a blog tutorial on EmailJs that goes into detail on how to create an email template.

### Step 3: Connecting EmailJs to a React contact form.

Now, it’s time to connect EmailJs with our React contact form.

Install EmailJs via npm

```bash
npm i emailjs-com
```

The next step is to copy the sample code on how to connect EmailJs in a React app from their easy to read [documentation](https://www.emailjs.com/docs/examples/reactjs/).

```javascript
import React from "react";
import emailjs from "emailjs-com";

export default function ContactUs() {
  function sendEmail(e) {
    e.preventDefault();

    emailjs
      .sendForm("YOUR_SERVICE_ID", "YOUR_TEMPLATE_ID", e.target, "YOUR_USER_ID")
      .then(
        (result) => {
          console.log(result.text);
        },
        (error) => {
          console.log(error.text);
        }
      );
  }

  return (
    <form className="contact-form" onSubmit={sendEmail}>
      <input type="hidden" name="contact_number" />
      <label>Name</label>
      <input type="text" name="user_name" />
      <label>Email</label>
      <input type="email" name="user_email" />
      <label>Message</label>
      <textarea name="message" />
      <input type="submit" value="Send" />
    </form>
  );
}
```

### Explanation of the code above.

The magic in this code happens in three places. The first one being the `import emailjs from emailjs-com` statement. This piece of code is very important because it allows us to have access to methods to connect our contact form with EmailJs service.

Another important piece of code in the example above is the sendEmail function. This function is attached to the form element <form onSubmit={sendEmail}></form>. It is then triggered when the submit button on the form is clicked.

Lastly, within our **sendEmail()** function, we access the **sendForm** method from **emailjs** which we imported on line 2 . The **emailjs.sendForm()** takes in four(4) arguments.

- **Service ID:** In this blog tutorial, we used _smtpmail_.

- **Template ID:** On your dashboard, click on email templates. You will see a list of email template created. Copy the template id on the email template card.

- **e.target:** The values from the input fields.

- **User ID:** You can obtain your user id from the **integration page** by under **API keys**.

> Note: You can be creative with how you output messages when the promise resovles or fails. It could be through alerts or pop-up messages.

That’s it, guys!. Thanks for sticking and staying around up till this point. You can send your feedback to me in the comments below.😉

How to send emails to a custom SMTP server using emailJs


Send messages to your email account using a third-party email service provider called **EmailJs**. EmailJs allows you to create a free account. The free plan comes with **200 monthly requests** for testing purposes and **two(2) email templates**. All you need to do is to head over to [emailjs.com](https://emailjs.com/) to register or create an account.

> I recommend EmailJs because I have used it many times throughout my development journey, and I am confident in their services(sending emails). Also, I am not sponsored by EmailJs to write this.

### Getting Started

**Step 1: Log in**

Log in to your newly created account with the email you registered the account with and a password. On your dashboard, navigate to **Email Services** to add an email service. EmailJs supports a variety of email services, both transactional and personal email services. Examples of personal email services supported are **Gmail, Outlook, Yahoo, iCloud, SMTP server**, etc. For transactional email services, EmailJs supports services such as **SendGrid, Mailgun, Mailjet, Amazon SES,** etc.

**Step 2: Connect to an Email Service**

The next step is to select an email service. In this blog, I will use Gmail. Follow the steps below to connect your email:

1. Click on the Add New Service button.
2. Select your email service (as I said earlier, I will use Gmail).

![add a new service](add-new-service.png)

3. Configure the services by providing a name and a service id. In this example, I used **Gmail** for the name and **gmail** for the service id.

![configure service](configure-service.png)

4. Next, click on the **connect** button to choose a Gmail account to connect with and grant EmailJs permission to send an email on your behalf.

![connect account](connect-account.png)

![choose an account](choose-an-account.png)

5. Finally, click on **Create Service** to add the email service.

![create service](create-service.png)


**Step 3: Create an Email template**

An email template is defining the structure of how your email should be sent. The **subject, sender name, message,** etc. EmailJs comes with a default template. You can choose to create your template to suit how your contact form has been designed.

1. Click on Email Templates on the left sidebar.

![create an email template](create-email-template.png)

2. Click on the create new template button.

![create a new template](create-a-new-template.png)

3. Modify the default template provided by EmailJs to suit the contact form you have created.

![modify default template](modify-default-template.png)

4. Save the template.


### Send email from React. 🚀

Connecting your React form to EmailJs is very straight forward and simple. Fortunately, EmailJs has an [example code](https://www.emailjs.com/docs/examples/reactjs/) for Reactjs. All you will need to do is to copy the code in the example and paste it into your Reactjs project.

```javascript
import React from "react";
import emailjs from "emailjs-com";

import "./ContactUs.css";

export default function ContactUs() {
  function sendEmail(e) {
    e.preventDefault();

    emailjs
      .sendForm("YOUR_SERVICE_ID", "YOUR_TEMPLATE_ID", e.target, "YOUR_USER_ID")
      .then(
        (result) => {
          console.log(result.text);
        },
        (error) => {
          console.log(error.text);
        }
      );
  }

  return (
    <form className="contact-form" onSubmit={sendEmail}>
      <label>Name</label>
      <input type="text" name="name" />
      <label>Email</label>
      <input type="email" name="email" />
      <label>Message</label>
      <textarea name="message" />
      <input type="submit" value="Send" />
    </form>
  );
}
```

### Explaining the code above

First of all, install EmailJs SDK using npm.

```bash
npm i emailjs-com
```

Next, we import EmailJs to get access to certain methods that will help us connect our React application to EmailJs.

```bash
import emailjs from 'emailjs-com'
```

Create a function to send the email. In this example, I created a function called **sendEmail**.

```javascript
function sendEmail(e) {
  e.preventDefault(); // prevents the default behaviour of the form
}
```

Within the **sendEmail** function, we will now use **emailjs.sendForm()** to send our message. The **sendForm()** takes in 4 arguments and they are:

![service id](service-id.png)

- **Template ID:** A template Id is provided to you after creating an email template. The ID can be found right under the name of the email template

- **Target:** The values from the form input fields

- **User ID:** The User ID can be obtained from the Integration page, under the API token section.

```javascript
function sendEmail(e) {
  e.preventDefault(); // prevents the default behaviour of the form

  emailjs.sendForm("gmail", "tmp_1235", e.target, "user_1234").then(
    (result) => {
      console.log(result.text);
    },
    (error) => {
      console.log(error.text);
    }
  );
}
```

**Note:** One important thing to note when naming your input fields is to make sure the input name values match with the EmailJs template placeholders.

```javascript
<form onSubmit={sendEmail)>
  <label>Name</label>
  /* Input name must correspond with EmailJs
     template placehoder variables */
  <input type="text" name={name} />
  <label>Email</label>
  <input type="email" name="email" />
  <label>Message</label>
  <textarea name="message" />
  <input type="submit" value="Send" />
</form>
```

Finally, add the **sendEmail** function to the form.

### Conclusion

I hope you find this blog tutorial useful and also give EmailJs a try!😊

How to send 🚀 emails using React through EmailJs(No server code needed!)


You have started learning [TypeScript](https://www.typescriptlang.org/) and may have even applied it to a [react](https://reactjs.org/) project by using the npx create-react-app — typescriptflag or set up a react project from scratch using tools such as [webpack](https://webpack.js.org/), [babel](https://babeljs.io/), etc.

Now you feel comfortable using the typescript language and want to go back to some oldcreate-react-app and add some types to your code using typescript but don’t know how to go about it?

This was actually the main reason for writing this blog. Enough of the storytelling, let’s get busy!

### Setup and Installation
First of all, I assume you have node and npm already installed as well as a text editor of your choice(preferably: [vscode](https://code.visualstudio.com/))

1. The first step is to open your create-react-project (created with javascript) with any text editor of your choice.
2. Next, open the terminal(Mac and Linux users) or command line(window users) and make sure you’re in your project’s directory.
3. Install the following packages by running: **npm i typescript @types/node @types/react @types/react-dom**

![install typescript](install-typescript.png)

4. In the end, you should have the following packages in your package.json file:

![dependencies](dependencies.png)

> The reason for installing @types/react @types/react-dom is, it gives us access to some type definitions out of the box, defined by developers at React for building their components.

### Adding Typescript to your Javascript code
- Change a javascript extension file **.js** to a typescript extension **.ts** or if the file extension is **.jsx**, change it to **.tsx**. In my case, I’m going to change my **App.jsx** file to **App.tsx**

- Start the development server by running npm start. A prompt will show in your terminal notifying you that a **tsconfig** file has been set up and populated with default values.

![typescript configuration](tsconfig.png)

- Finally, you should see a tsconfig.json file in your project structure. You can modify the values in this file to suit whatever that you’re doing.

### Cons

This approach is not suitable for large projects with several javascript files. I’m not saying it’s not possible but this approach is tedious and error-prone.

### Final Words

If you have any suggestions to improve this blog, kindly comment below. Also, you can reach me on twitter at [victorbruce3](https://twitter.com/Victorbruce3)



Use Typescript in an already existing create-react-app Project


Install **react-native-dotenv** library/package by running the command:

```bash
npm i react-native-dotenv
```

### For iOS,

1. `cd /ios`
2. `pod install`

Configure your **babel.configure.js** to allow you to inject your environment variables into your **react-native environment** using dotenv for multiple environments.

### Basic Setup:

Inside your babel.configure.js file, add the code below:

```javascript
module.exports = {
  plugins: [
    [
      "module:react-native-dotenv",
      {
        moduleName: "@env",
        path: ".env",
        blacklist: null,
        whitelist: null,
        safe: false,
        allowUndefined: true,
      },
    ],
  ],
};
```

### Usage:

Create a **.env** file in the root of your project folder and add your environment variables.

```javascript
CLIENT_ID = 1234;
```

Next, import the environment variable and use it within your code like this:

```javascript
import { CLIENT_ID } from "@env";
console.log(CLIENT_ID);
```

### For Projects using Typescript:

- Create a **types** folder
- Within the types folder create a file for example **env.d.ts**
- Open the **tsconfig.json**`** file and add the line below inside the _“compilerOptions”: {}_ object:

```javascript
"typesRoots": ["./src/types"]
```

- Now back to the **env.d.ts file**, declare an ‘@env’ module, add all your environment variables, and export like so:

```javascript
declare module '@env' {
  export const CLIENT_ID: string;
}
```

### Wrap Up:

In this blog post, we looked at how to use environment variables in our **react-native** project by installing the npm package react-native-dotenv and after, configure our babel.config.js file. Finally, we created an **env** file and imported the environment variable in the file/source code we want to use.

That will be it for now. Kindly give me your feedback in the comments section below. Thank you!