Generics in typescript

iamndeleva — Wed, 08 Mar 2023 05:35:52 +0000

when building react applications , writing reusable components is one of the key concept that is highly prioritized But most a times this components only receive a specific type that allows them to be reliable .Using Typescript allows you to write components that can have several types which makes it more flexible than opposed to the single type they had before .The concept of generics then comes in to bridge this gap
What are generics
In summary from the typescript official docs , generics let you write components that can take multiple types instead of one type .You define generics using <T> but in real sense you can name it whatever you like .
example in ES6
const myGeneric = <T>(params:T):T =>{}
for ES5
function myGeneric<T>(params:T):T{}

where T can be string ,array ,boolean etc
_lets define some interface here for IAnimal _
interface IAnimal{ type: string; age:number; eat: () => void; }
class Dog implements IAnimal{ type = 'dog'; age=10; eat(): void { console.log('eating') } } const results = <T extends IAnimal>(value:T):void=>{ console.log(value) } results(new Dog())

Deploying a react application to Amazon s3 and github actions

iamndeleva — Wed, 20 Jul 2022 00:10:11 +0000

Github actions were introduced by GitHub in mid-december 2020, which is a platform to automate developer workflows. Some of these workflows are CI/CD which involves continuous integration, continuous delivery, and continuous deployment.CI/CD pipeline enables developers to ship software efficiently & easily and less risky.

The process of GitHub actions is sub-divided into several components which are

1.Event
We can define event as any specific activity that happens to repository to trigger a workflow .Literally it can a pull request ,push ,contribution or even a issue
2.Job
This are steps in a workflow that run once a event has been triggered
3.Action
Actions are individual tasks that you can combine to create jobs and customize your Workflow
4.Runners
A runner is a server that runs your workflows when they're triggered.Each runner can run a single job at a time
5.Workflow
A workflow is an automated procedure that can be configured to execute one or more operations. Workflows are defined by a YAML file that is checked into your repository and run when prompted by an event there, manually, or according to a set schedule.

To get started ,We will do a demo using a react app .
Follow this steps to create a basic react app

Then proceed to your github account and create a repository from github as shown below.Fill the fields as required

To set up a github actions you can create directly from the action tab on github as shown below or in the root of your project create a folder called .github , inside it create another folder called workflows and in this folder create a yml file
Once your done creating your repository ,select action tab

Pick a template you would like to use ,Since we are working on a react application, we are choosing the node js as shown below

Once you selected ,Click configure to setup and the click to Start commit in the far top right corner.By the end of this you would have set up your github action as required.

Lets discuss the content of this YML file created **
It has the following parts as shown in the figure below
**Name:
This defines the name of your workflow that is displayed on the github action field.You can call your workflow the name of your choice .

On:
It defines the events that trigger the workflow.It can be a single event or a array of events.

Jobs
Jobs define the functionality that will run the workflow
Note
By default , jobs run in parallel

Runs-on:
Its a keyword that defines the OS **your workflow should run on.
Examples of runs-on you can define here are **ubuntu-latest ,self-hosted etc
Build matrix
Allows you to test across across multiple platforms and languages
Example of a sample yml file

Now you have successfully configured your yml file.

Lets connect with aws for deployment

Prerequisites for AWS s3 **
Amazon Web Service Account
You can create one at AWS if you haven’t and follow the **steps
Step one . Creating a s3 bucket

Click on the create bucket account and fill the details as shown here

Your bucket will be available here

Click you bucket (mine is called foodiesbucket-react) , select the permissions tab
And make your object public

make sure you edit the object ownership to appear as shown here to avoid getting the error AccessControlListNotSupported:
Having setup your bucket successfully , its time to update our yml file by adding some env variables to connect our bucket with github repository.
Back to your github repository , click on settings the select secrets,in the dropdown select actions

Click on new repository secrets and we are going to add three secrets ie AWS_ACCESS_KEY_ID **,AWS_S3_BUCKET,AWS_SECRET_ACCESS_KEY.**
These keys will be generated directly from your** aws account** by heading to the top right corner of your account then selecting security credentials
Copy the secrets and add them as shown on the above

We are going to use jakejarvis/s3-sync-action which is a simple action to sync a directory (either from your repository or generated during your workflow) with a remote S3 bucket.
Update your yml file as shown here

After updating the yml re-run your workflow .This syncs your github repository with aws s3 bucket and it updates the changes on your dashboard.

You have successfully deployed your app.
Click on the index.html to visit and click the object link which is the url of your deployed app

Congrats!!!Lets keep building!.

Forem: iamndeleva

Generics in typescript

Deploying a react application to Amazon s3 and github actions