DEV Community: Abdul Waqar

A React MUI Image Cropper

Abdul Waqar — Wed, 09 Oct 2024 08:02:19 +0000

I have created a simple React image cropping application using React, react-image-crop, and Material UI. This minimal application can be a foundation for building more complex image manipulation tools, or it can be integrated into an existing project that requires image uploads.

Feel free to customize and expand the functionality by adding features like:

Image resizing
Uploading the cropped image to a server

Demo: React Image Cropper
Code: Github

Happy coding! If you have any questions or improvements, leave a comment or share your own implementations!

Introduction to GraphQL for beginners - Apollo Server - part 1

Abdul Waqar — Sun, 09 Jul 2023 07:13:47 +0000

A Beginner’s Guide to GraphQL

👋 In this article, you’re going to learn how GraphQL works. I’m going to show you how to create a very well-designed, efficient, powerful API using GraphQL.

You’ve probably already heard about GraphQL, as a lot of people and companies are using it. Since GraphQL is open-source, its community has grown huge.

Now, it’s time for you to start to learn in practice how GraphQL works and all about its magic.

Introduction to GraphQL

What is GraphQL?

GraphQL is a query language for APIs that was developed by Facebook. It allows clients to define the structure of the data they require, and the server will respond with exactly that data. It provides a more efficient, powerful and flexible alternative to REST APIs.

How does it differ from REST?

GraphQL differs from REST because it allows clients to define the structure of the data they require, and the server will respond with exactly that data. This provides a more efficient, powerful, and flexible alternative to REST APIs, which often require multiple requests to different endpoints to retrieve all the necessary data.

Advantages of using GraphQL
- Provides a more efficient, powerful, and flexible alternative to REST APIs
- Allows clients to define the structure of the data they require, and the server will respond with exactly that data
- Reduces the amount of data transferred over the network by only returning the fields requested by the client
- Simplifies client-side code by reducing the number of API requests needed
- Enables faster development by allowing changes to the API schema without impacting existing clients

Setting up a GraphQL Server

Creating a new project folder
- Create a new folder named graphql-course
- Change directory to newly created folder graphql-course
- create package.json file by running npm init -y
Install the following dependencies using npm:
- graphql
- @apollo/server
Install the following dev dependencies to automatically restart the server when changes are made:
- nodemon

npm install @apollo/server graphql
npm install nodemon -D

Update package.json file with the following code.

{
  "name": "graphql-course",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "start": "node index.js",
    "dev": "nodemon index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2",
    "express-graphql": "^0.12.0"
  },
  "devDependencies": {
    "@apollo/server": "^4.7.5",
    "graphql": "^16.7.1",
    "nodemon": "^2.0.22"
  }
}

Scripts are used to run the server. The start script runs the server using the node command, and the dev script runs the server using the nodemon command. The nodemon package is a development dependency that will automatically restart the server when changes are made.

Creating a GraphQL Server

Now we will create index.js file and add the following code to it.

//index.js
import { ApolloServer } from "@apollo/server"
import { startStandaloneServer } from "@apollo/server/standalone"
import { typeDefs } from "./typeDefs.js"
import { resolvers } from "./resolver.js"
const server = new ApolloServer({
  typeDefs,
  resolvers,
})

const { url } = await startStandaloneServer(server)

console.log(`🚀 Server ready at ${url}`)

We have imported two files typeDefs.js and resolver.js which we will create in the next step.

Creating a GraphQL schema
- Create a new file called typeDefs.js and add the following code to it:
```
export const typeDefs = `#graphql
type Book {
    id: ID!
    title: String!
}
type Query {
    books: [Book]
    book(id: ID!): Book
}
type Mutation {
    addBook(title: String!): Book
    deleteBook(id: ID!): Book
    updateBook(id: ID!, title: String!): Book
}
`;      
```
We have created a simple schema for CRUD operation on the books array. The schema defines the types of data that can be queried and the operations that can be performed on that data. The schema is written in the GraphQL Schema Definition Language (SDL), which is a human-readable syntax for defining GraphQL schemas.
We have created two queries and three mutations. The books query returns an array of books, and the book query returns a single book by its ID. The addBook mutation adds a new book to the array, the deleteBook mutation deletes a book from the array, and the updateBook mutation updates the title of a book.

Creating resolvers for GraphQL schema.

Create a new file called resolver.js and add the following code to it:

let books = [
{ id: "1", title: "Harry Potter and the Sorcerer's stone" },
{ id: "2", title: 'Jurassic Park' },
{ id: "3", title: 'The Lord of the Rings' },
{ id: "4", title: 'The Hobbit' },
{ id: "5", title: 'The Hunger Games' },
{ id: "6", title: 'The Da Vinci Code' }
];
export const resolvers = {
Query: {
    books: () => books,
    book: (parent, args) => {
        return books.find(book => book.id === args.id);
    }
},
Mutation: {
    addBook: (parent, args) => {
        const book = { id: books.length + 1, title: args.title };
        books.push(book);
        return book;
    },
    deleteBook: (parent, args) => {
        const book = books.find(book => book.id === args.id);
        books = books.filter(book => book.id !== args.id);
        return book;
    },
    updateBook: (parent, args) => {
        const book = books.find(book => book.id === args.id);
        book.title = args.title;
        return book;
    }
}
};

The resolvers are functions that resolve the queries and mutations defined in the schema. The books query resolver returns the books array, and the book query resolver returns a single book from the array by its ID. The addBook mutation resolver adds a new book to the array, the deleteBook mutation resolver deletes a book from the array, and the updateBook mutation resolver updates the title of a book.

In this example implementation, we define the GraphQL schema using the #graphql function. We define a Book type with fields for id, and title, and a Query type including fields for getting all books and getting a specific book by its id, as well as a Mutation type including fields for creating, editing, and deleting books.

We then define a books array as a data source and resolver function for each field in the schema. These resolver functions return the appropriate data from the books array based on the query or mutation arguments.

🌟 🌟 We have successfully created a GraphQL server using the Apollo Server library.

run npm start to start the server.

🌟 Finally, we start the server on port 4000 and log a message to the console indicating that the server is running.

The source code for this tutorial is available on GitHub.
apollo-server-tutorial
In part 2 of this tutorial, we will create a React application that uses the Apollo Client library to query the GraphQL server.
In part 3 of this tutorial, we will add authentication to the GraphQL server using the Apollo Server library and how to use it with React.

Gatsby v5+ Image-centric Gatsby template for publishers, portfolio, photographers blogs and more

Abdul Waqar — Sun, 18 Jun 2023 09:49:17 +0000

🌟 Exciting News! Presenting my new Gatsby Framework Template with NetlifyCMS Integration 🎉

I am delighted to announce the release of my latest project, a brand new Template utilizing the powerful Gatsby Framework with seamless integration of NetlifyCMS for content management. 🚀

With this innovative template, You can build static websites specifically Image-centric web apps for publishers, portfolios, photographers blogs, and more.

1️⃣ Gatsby Framework: By utilizing the power of Gatsby, we can leverage the latest web technologies like React, GraphQL, and Webpack, resulting in lightning-fast, highly optimized websites. Say goodbye to slow load times and hello to exceptional performance!

2️⃣ NetlifyCMS Integration: Managing website content is a breeze with the integration of NetlifyCMS. This user-friendly and intuitive content management system allows you to easily update, edit, and publish your website content without any coding knowledge.

3️⃣ Customizable Templates: The template comes with a beautiful and responsive design out of the box. However, it's fully customizable to suit your specific branding and requirements.

4️⃣ SEO-Friendly: Search Engine Optimization (SEO) is crucial for driving organic traffic to your website. With the Gatsby Framework, your website is built with SEO in mind from the ground up, giving you a head start in ranking higher on search engine results pages.

5️⃣ Scalability and Security: Gatsby's static site generation enables scalability and ensures your website can handle high traffic volumes without compromising performance. Additionally, the secure build process and static files hosting provided by Netlify offer robust protection against security threats.

Whether you're a freelancer, a small business owner, or an agency, this Gatsby Framework Template with NetlifyCMS integration is a powerful tool to elevate your web development projects. It empowers you to create stunning, lightning-fast, and easily manageable websites.

I invite you to check out the live demo of the template at https://clay-gatsby.netlify.app/ to see its capabilities in action. Feel free to reach out to me with any questions or feedback. I'm here to help!

🔗 Demo : https://clay-gatsby.netlify.app/
🔗 GITHUB : https://github.com/abdulwaqar844/gatsby-clay-template

Let's unlock the full potential of static website development together! 💪

Features

Gatsby v5+
PWA
Netlify/Decap CMS pre-configured
PurgeCSS for bundle size optimization
Netlify settings predefine
Netlify contact form Support
SEO optimized
90+ Lighthouse

Pages

Home
Bio
Work
Sold
News
Contact

Getting Started with Next.js - Typescript

Abdul Waqar — Tue, 26 Jul 2022 21:11:41 +0000

Getting Started with Next.js

A beginner guide Video in Urdu and Hindi for those who want to learn Nextjs :

Getting Started with Next.js - Typescript in Hindi / Urdu

You might want to generate static site with High perfomance and SEO.
Code has to be bundled using a bundler like webpack and transformed using a compiler like Babel. You need to do production optimizations such as code splitting.
You might want to statically pre-render some pages for performance and SEO.
You might also want to use server-side rendering or client-side rendering.
You might have to write some server-side code to connect your React app to your data store.

Next.js, the React Framework.

Next.js provides a solution to all of the above problems. But more importantly, it puts you and your team in the pit of success when building React applications.

Important features of Nextjs are :

File-base routing
Server Side rendering
API Routes
Built-in support for Typescript and SaSS.
Static site generation

We can create a new NextJS project by running following command :
npx create-next-app step01 --ts
Here in our project we use Typescript to create our components.We can start our NextJS application locally by running :

npm run dev

Then we can updated components in pages folder. A component exported from pages folder will be available as route in NextJS Application.

Hello, I'm Abdul Waqar

A Software Engineer using cutting Edge technologies to develop Super fast Software solutions . I like to write about React , NextJS, NodeJS, Cloud Computing and React Native for Hybrid Apps.

How to build and deploy a MERN ( React + Express + MongoDB + Node.js ) Stack Application on AWS EC2?

Abdul Waqar — Tue, 31 May 2022 15:37:55 +0000

In this post we are going to setup a production ready web server from scratch on AWS EC2 instance and deploy MERN Stack application that have registration and goal setting functionality?

What is MERN Stack App ?

A MERN Stack application is made up of a front app built with React and React frontend is connected to backend API built with Node.js + Express.js + MongoDB, hence the name MERN (MongoDB, Express.js , React, Nodejs). Other variations of stack include the MEAN Stack that has uses Angular as frontend and MEVN Stack that uses Vue.js as frontend.

Scope of this tutorial

This tutorial is focused on setting a Cloud server on AWS EC2 then deployment and configuration of frontend and backend part of the MERN App to work. Application that we are going to deploy is available at following address:

MERN Stack Goal Setter Application

Content of Tutorial

Create a new Ubuntu Server on AWS EC2
Connect local Terminal to Ubuntu EC2 instance via SSH
Setup and install Nodejs, MongoDB, PM2, NGINX
Deploy Backend and frontend of application.
Configure NGINX to server APIS.
Test MERN Stack App in a browser

In this tutorial we're going to set up a production ready web server from scratch on the Amazon EC2 (Elastic Compute Cloud) service, then deploy a custom MERN Stack application to it that supports user registration, auth and Goal Setter function.

What is a MERN Stack App?
A MERN Stack application is made up of a front-end app built with React that connects to a back-end API built with Node.js + Express + MongoDB, hence the name MERN Stack (Mongo, Express, React, Node). Other variations of the stack include the MEAN Stack that has an Angular front-end, and the MEVN Stack that has a Vue.js front-end.

Scope of this tutorial

The goal of this is to setting up the server on AWS EC2, then deploying and configuring the frontend and backend pieces of the MERN stack app to work together.

Tutorial Contents
Create a new Ubuntu server on AWS EC2
Connect to Ubuntu EC2 instance via SSH
Setup server with Node.js + MongoDB + NGINX
Deploy Node.js + MongoDB back-end API
Deploy React + Redux Front-end app
Configure NGINX to serve API and front-end
Test the MERN Stack app in a browser

1. How to Create a new Ubuntu Server on AWS EC2

The first thing we need for this tutorial is A virtual server, and then follow these steps to set up a new Ubuntu 18.04 Server instance on AWS EC2.

Sign into the AWS Management Console at https://aws.amazon.com/console/. If you don't have an account yet click the "Create a Free Account" button and follow the instructions.
Go to the EC2 Service section in AWS console.
Click the "Launch Instance" button.
Choose AMI - For learning purpose you can use "Free tier only" , enter name of Your server in Name box and press enter, then select the "Ubuntu Server 18.04" Amazon Machine Image (AMI).
Choose Instance Type -We are using Free Tier so We will Select the "t2.micro" (Free tier eligible) instance type and click "Configure Security Group" in the top menu.
Configure Security Group - Add a new rule to allow HTTP traffic then click "Review and Launch".
Review details and then Click Launch
We need key pair to connect Terminal to Ubuntu Server . Select "Create a new key pair", enter a name for the key pair (e.g. "mern-key-pair") and click "Download Key Pair" to download the private key, we will use this to connect to the server via SSH.
Click "Launch Instances", then scroll to the bottom of the page and click "View Instances" to see details of the new Ubuntu EC2 instance that is launching.

2. How to connect our local Machine's Terminal to Ubuntu EC2 Instance via SSH

Once the newly created EC2 instance reaches a running state you can connect to it via SSH using the private key downloaded in the previous step.

Open terminal window where we have downloaded our keys and update the permissions of the private key file with the command chmod 400 e.g. chmod 400 ~/Downloads/my-aws-key.pem,If you have opened terminal in same directory then we don't need to pass path just pass file name of keys otherwise pass complete path to keys. The key must not be publicly viewable for SSH to work.
Select Newly created Server and click the button "connect" at the top and go to SSH Client Tab. Here you can see a command to connect to Server like ssh -i ubuntu@ copy this command and paste in your local terminal change directory if your terminal is not opened in same directory.
Enter yes to the prompt "Are you sure you want to continue connecting (yes/no)?" to add the URL to your list of known hosts.

NOTE: If you're using Windows you can connect to your instance via SSH using the PuTTY SSH client, for instructions see Connect Using PuTTY in the AWS docs.

3. How to setup Server with Nodejs, Mongodb, PM2, Nginx

Now we have to install required packages one by one by passing command of specific packages. In this tutorial will Install Required dependencies on our server by pasting following command in our terminal. This command will install all required packages :



curl https://gist.githubusercontent.com/cornflourblue/f0abd30f47d96d6ff127fe8a9e5bbd9f/raw/e3047c9dc3ce8b796e7354c92d2c47ce61981d2f/setup-nodejs-mongodb-production-server-on-ubuntu-1804.sh | sudo bash

This command will install following packages:

NodeJS 10
MongoDB
PM2
Nginx and other configurations and start MongoDB and NGINX on the server.

Now our server is in running state and required packages are installed successfully. Let's move to our application code that we will deploy.

4. Clone Project on your server by pasting following command



git clone https://github.com/abdulwaqar844/mern-ec-2.git

go to mern-ec-2 directory and install dependencies by running



 sudo npm install

Now change directory and go to frontend folder and install dependencies by running



sh sudo npm install

After installing dependencies make build of React Application by running



sudo npm run build

Note: We will server our static content from build folder using NodeJS API

5. Config NGINX server using following commands

Delete the default NGINX site config file with the command



sudo rm /etc/nginx/sites-available/default

Launch the nano text editor to create a new default site config file with



 sudo nano /etc/nginx/sites-available/default

Paste following data in nano editor and save it.



server {
listen 80 default_server;
server_name _;

# Backend
location / {
  proxy_pass http://localhost:4001/;
}
}

Save the file by pressing ctrl + x and selecting Yes to save.
Restart NGINX with the command
```
systemctl restart nginx
```

6. Starting the server using pm2 module

We have already installed required packages including pm2. Follow these instructions to start pm2 process to run Nodejs application:

Go to your project root directory. Install dependencies if you have not installed by running sudo npm install - In this project main server file is exists in root folder. Run the following command in root directory of project :



sudo pm2 start server.js

This command will start backend of our Nodejs application and show the list of running processes and you can access you application using EC2 instance's endpoint http://ec2-xx-xx-xx-19.xx-xx-1.xx.amazonaws.com/

You have deployed your MERN app successfully . Moreover you can add Elastic IP to your EC2 instance. your can add Domain name to your app using route53 service in Aws . You can protect you app form attacks using AWS Waf ( web application firewall).

I'm A Web Developer working as Full stack Engineer. You can hire me on Fiverr and Upwork. I love to share thing about technologies , I use in my daily life like GraphQL , AWS , Typescript and React :

React+Express Tutorial - How to Uploads Image & File Using ReactJs and experss-fileupload

Abdul Waqar — Wed, 06 Apr 2022 10:11:57 +0000

How we can upload a file with Reactjs App using expressjs and express-fileupload?

In this tutorial we will learn how we can set up expressjs Server and React Application to upload images and then save that image in a folder.

You need basic knowledge of :

ReactJS for the frontend
expressjs for backend.

I have divided this tutorial into two parts. In part 1 we will set up express server which will accept image and save it in a folder. And in part 2, We will create React Application and by using axios we will send image data to our API endpoint.

Part : 01

Let's set up our express server which will provide an API endpoint and accept images as parameter then save for later use.

Make an empty directory "react-express-fileupload"
Create a packege.json file

Type the following command in the terminal :

npm init -y

This command will create a package.json file with default options in your root directory.

Install required dependencies.

npm i express express-fileupload

This command will install express and express-fileupload these are libraries that we will use in our application. Express is an application framework for the backend and express-fileupload is used to accept a file as a parameter and save it at some location.

Install Dev dependency (Optional)

npm i nodemon concurrently -D

nodemon is used to restart our application when we are working in development mode. concurrently is used to run multiple scripts with a single command in our application we need two servers one for the backend and the second for React Application. Using concurrently we will run both servers at the same time.

Create a server.js file in the root directory. In this file, we will write our code that will provide an endpoint and accepts a file as a parameter. Use the following code in server.js file :



const express = require("express");
const fileUpload = require("express-fileupload");
const app = express();
app.use(fileUpload());
// Upload Endpoint That will accept files
app.post("/upload", (req, res) => {
  // Check if file is not available return message with status 400.
  if (req.files === null) {
    return res.status(400).json({ msg: "No file uploaded" });
  }
  const file = req.files.file;
  // We need unique file name to save it in folder and then use filename to access it. I have replace space with - and concatinated file name with Date String. We can also used uuid package as well.
  const UFileName = `${new Date().getTime()}-${file.name.replaceAll(" ", "-")}`;
  // This line of code will save our file in public/uploads folder in our
  //appliction and will retrun err if any error found if no error found then return pathname of file.
  file.mv(`${__dirname}/client/public/uploads/${UFileName}`, (err) => {
    if (err) {
      console.error(err);
      return res.status(500).send(err);
    }
    res.json({ fileName: UFileName, filePath: `/uploads/${UFileName}` });
  });
});
// Create an express server which will listen requests at port 5000
app.listen(5000, () => console.log("Server Started..."));

Now Updated script in packege.json file to run our server.js file.



"scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js",
  }

Create React application by running create-react-app client in root folder and create uploads folder in the public directory of client application.

After the creation of React application starts our application with npm run dev command. Now we can test our Endpoint using postman.

When we test application we will get filename and pathname in response.

Part: 2

In this section we will upload our code of client application which we created using create-react-app 1. Create A from where we will submit our file.



// Import axios to post Request
import axios form 'axios'
// Create State for variables
 const [file, setFile] = useState("");
  const [filename, setFilename] = useState("Choose File");
  const [uploadedFile, setUploadedFile] = useState({});
  const [message, setMessage] = useState("");
 // Create OnSubmit function
 const onSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append("file", file);
    try {
      const res = await axios.post("/upload", formData, {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      });
      const { fileName, filePath } = res.data;
      setUploadedFile({ fileName, filePath });
      setMessage("File Uploaded");
    } catch (err) {
      if (err.response.status === 500) {
        setMessage("There was a problem with the server");
      } else {
        setMessage(err.response.data.msg);
      }

    }
  };
  // Create OnChange Event for Input Box
 const onChange = (e) => {
    setFile(e.target.files[0]);
    setFilename(e.target.files[0].name);
  };
//Form Code
<form onSubmit={onSubmit}>
  <div className="custom-file mb-4">
    <input
      type="file"
      className="custom-file-input"
      id="customFile"
      onChange={onChange}
      required
    />
    <label className="custom-file-label" htmlFor="customFile">
      {filename}
    </label>
  </div>

  <input
    type="submit"
    value="Upload"
    className="btn btn-primary btn-block mt-4"
  />
</form>
// Display message using Conditional Statement
  {message ? <p> msg={message} </p> : null}
  //Display Uploaded File on Web pages
  {uploadedFile ? (
        <div className="row mt-5">
          <div className="col-md-6 m-auto">
            <h3 className="text-center">{uploadedFile.fileName}</h3>
            <img style={{ width: "100%" }} src={uploadedFile.filePath} alt="" />
          </div>
        </div>
      ) : null}

From here, you should be able to build complete application (Fronend+Backend ) and test as we have

From here, you should be able to build the complete application (Fronend+Backend ) and test as we have done in the previous steps.

The code for this project is located Here

I am Abdul Waqar

A Fullstack Developer with Experience of More than 3 Years.
I am available at :

I am at:

How to send emails using form data in React application without a backend ( server ).

Abdul Waqar — Mon, 07 Mar 2022 10:54:52 +0000

How to Send Email From React Client using Emailjs Library

If you have contact form in your Website and you want to receive email when user submit data via contact form then you can learn in this tutorial how to send email with data received from contact form.

Video Tutorial in Hindi / Urdu

To Follow this tutorial you need to familiar with ReactJS a Javascript Lirbary to build UI and we will need EmailJS account if you are not familiear with EmailJS then no problem we will also learn about Emailjs.

Step: 01

Create a simple React Application so we will use create-react-app to create a react application.


 create-react-app email-client

Step: 02

Create a simple form to get data from user. I am using Bootstrap CDN to create contact form.

Create 4 Text Fields FirstName ,LastName , Adress and Message. Copy this code in your App.js file.



  import React, { useRef } from "react";
  import emailjs, { init } from "@emailjs/browser";
  function App() {
    const handleSubmit = (e) => {
      e.preventDefault();
    };
    return (
      <div className="container">
        <form onSubmit={handleSubmit}>
          <h1 className="text-center">Registration Form</h1>
          <div className="form-row">
            <div className="form-group col-md-6">
              <label htmlFor="First Name">First Name</label>
              <input type="text" className="form-control" name="firstname" />
            </div>
            <div className="form-group col-md-6">
              <label htmlFor="Last Name">Last Name</label>
              <input type="text" className="form-control" name="lastname" />
            </div>
            <div className="form-group col-12">
              <label htmlFor="inputAddress">Address</label>
              <input
                type="text"
                className="form-control"
                id="inputAddress"
                placeholder="1234 Main St"
                name="user_address"
              />
            </div>
            <div className="form-group col-md-6">
              <label htmlFor="message">message</label>
              <textarea
                type="text"
                className="form-control"
                id="inputmessage4"
                name="user_message"
              />
            </div>
          </div>

          <button type="submit" className="btn btn-primary">
            Sign in
          </button>
        </form>
      </div>
    );
  }
  export default App;

Step: 03

After saving this file run your dev server by running


 npm start

Now we have created our form component. Now Create EmailJS account , create email template and get USERID , TEMPLATEID and USERID.

Goto https://www.emailjs.com and register your account. After registration goto Email Templates
from navigation menu and create Email Template and update it according your requirements. We are sending FristName , LastName , Address and user_message from contact form. We will use these variables in our template using double curly braces like this {firstname}. See ScreenShot =>

Now get Email template ID from Email Templates option:

Get Service ID from Email Service option :

Get UserID and User ID which we will use with init method of emailjs :

Now update our code in ./App.js

import emailjs and { init } at top of component and create a ref to our form. Using ref we will access data of text fields.
and update onSubmit method of form to send Email like this :



import React, { useRef } from "react";
import emailjs, { init } from "@emailjs/browser";

function App() {
  init("user_xxxxxxxxxxxxxxxxxxx");
  const form = useRef();

  const handleSubmit = (e) => {
    e.preventDefault();
    emailjs.sendForm("SERVICE_D", "TEMPLAE_ID", form.current, "USER_ID").then(
      (result) => {
        alert("Message Sent Successfully");
        console.log(result.text);
      },
      (error) => {
        console.log(error.text);
      }
    );
  };
  return (
    <div className="container">
      <form onSubmit={handleSubmit} ref={form}>
        <h1 className="text-center">Registration Form</h1>
        <div className="form-row">
          <div className="form-group col-md-6">
            <label htmlFor="First Name">First Name</label>
            <input type="text" className="form-control" name="firstname" />
          </div>
          <div className="form-group col-md-6">
            <label htmlFor="Last Name">Last Name</label>
            <input type="text" className="form-control" name="lastname" />
          </div>
          <div className="form-group col-12">
            <label htmlFor="inputAddress">Address</label>
            <input
              type="text"
              className="form-control"
              id="inputAddress"
              placeholder="1234 Main St"
              name="user_address"
            />
          </div>
          <div className="form-group col-md-6">
            <label htmlFor="message">message</label>
            <textarea
              type="text"
              className="form-control"
              id="inputmessage4"
              name="user_message"
            />
          </div>
        </div>

        <button type="submit" className="btn btn-primary">
          Sign in
        </button>
      </form>
    </div>
  );
}

export default App;

Now Start your application and Try submitting from. You will receive an email that we defined email template.

Congratulations ! Now You Can receive Emails when a user submit A Contact Form.

You can find Complete code of this tutorial at Github Email-Sending-Tutorial

TWITTER

Facebook

How to create AWS Serverless Lamba Function and Appsync API with DynamoDB

Abdul Waqar — Tue, 11 Jan 2022 20:17:45 +0000

How to use AWS Lambda Function as backend and deploy to AWS Cloud. (Part 1)

In this tutorial, we will learn the following things

How to write Lamda Function code for CRUD operations.
How to Use Appsync and :
- Types
- Mutation
- Query

In Part 2 We will connect Appsync Graphql Api with React Frontend

AWS Account is required for this tutorial. If you don't have a premium AWS account you can use AWS with Free tier for the deployment of AWS-CDK application to AWS Clouds. Then we need to configure AWS at a local PC or Laptop, If you did not configure AWS-CDK, you can follow the below-given post to configure AWS-CDK on your local machine. How to configure AWS-CDK .

If you are interested in how to Deploy static pages to the AWS S3 bucket and deliver these pages with Cloud fron You can Follow this Guide How to Deploy Static pages to AWS S3 bucket and connect with Cloudfornt.

In this post we will learn the advanced topic of AWS Services .

Let's get Started and Create a simple AWS-CDK Application using the terminal.

Step No .01

initialize AWS-CDK app with typescript

cdk init app --language typescript

We are using Typescript if you have not installed typescript install typescript globally first by running this command

npm -g install typescript

Step No. 02

Install required Dependencies. All dependencies can be installed with a single command and one by one also. copy this command to install the required dependency

npm i @aws-cdk/aws-appsync @aws-cdk/aws-lambda @aws-cdk/aws-dynamodb

Why AppSync?

Organizations choose to build APIs with GraphQL because it helps them develop applications faster, by giving front-end developers the ability to query multiple databases, microservices, and APIs with a single GraphQL endpoint.

AWS AppSync is a fully managed service that makes it easy to develop GraphQL APIs by handling the heavy lifting of securely connecting to data sources like AWS DynamoDB, Lambda, and more. Adding caches to improve performance, subscriptions to support real-time updates, and client-side data stores that keep off-line clients in sync are just as easy. Once deployed, AWS AppSync automatically scales your GraphQL API execution engine up and down to meet API request volumes. You can also get help from this post :

Building Real-time Serverless APIs with PostgreSQL, CDK, TypeScript, and AWS AppSync

We will be using AWS Appsync in our application so the first thing to do when working with Appsync is to define our Types, Query, and Mutation in graphql format.

type Todo {
  id: ID!
  title: String!
  done: Boolean!
}

input TodoInput {
  id: ID!
  title: String!
  done: Boolean!
}

type Query {
  getTodos: [Todo]
}

type Mutation {
  addTodo(todo: TodoInput!): Todo
  updateTodo(todo: TodoInput!): Todo
  deleteTodo(todoId: String!): String
}

Copy this code and paste in .graphQL/schema.gql\
Here we have defined one Query to get all Todos and 3 mutations to add , update and delete Todos. We have also declared arguments which we will pass when we need to call our lambda function.

Next import Appsynct at top of /lib/todo-stack.ts like this :

import * as appsync from '@aws-cdk/aws-appsync';

Then declared our Appsync configrations like below :

 const api = new appsync.GraphqlApi(this, "GRAPHQL_API", {
      name: 'todo-api',
      schema: appsync.Schema.fromAsset('graphQL/schema.gql'),       ///Path specified for lambda
      authorizationConfig: {
        defaultAuthorization: {
          authorizationType: appsync.AuthorizationType.API_KEY,     ///Defining Authorization Type  
        },
      },

    })

In the above code, we have created an Appsync API and passed required arguments like name of API then schema which we will use in our application then Authentication configuration.

Lamda Function as Datasrource

We need a datasource to respond when a GraphQL query is called. In this post, We will use Lambda Function as datasource for Appsync API to save todos in the database and retrieve records. Let's create an instance of the AWS lambda function. Use this code for Lambda Function. Import * as lambda at top

import * as lambda from '@aws-cdk/aws-lambda';

Then write this code

 ///Lambda Fucntion
    const todoLambda = new lambda.Function(this, "TodoFucntion", {
      functionName:"todoHandler",
      runtime: lambda.Runtime.NODEJS_12_X,            ///set nodejs runtime environment
      code: lambda.Code.fromAsset("functions"),          ///path for lambda function directory
      handler: 'main.handler',                       ///specfic fucntion in specific file
    })

Let's explain this code, We created an instance of lambda function and passed required configuration 1. Function name you can use any unique name(Unique in sense of your existing Lambda Function)2. Declared Nodejs version to use for our Lambda Function, 3. Directory, where is our main code of the function, is written. We have written our code on the functions folder at root. Then handler is the name of the function in our lambda function codes.

Next we will write code for our lambda function.

const AWS = require('aws-sdk');
const docClient = new AWS.DynamoDB.DocumentClient();
// Function Declation to add New Todo
async function addTodo(todo: Todo) {
    const params = {
        TableName: process.env.TODOS_TABLE,
        Item: todo
    }
    try {
        await docClient.put(params).promise();
        return todo;
    } catch (err) {
        console.log('DynamoDB error: ', err);
        return null;
    }
}

// Function Declation to Get all todo list
async function getTodos() {
    const params = {
        TableName: process.env.TODOS_TABLE,
    }
    try {
        const data = await docClient.scan(params).promise()
        return data.Items
    } catch (err) {
        console.log('DynamoDB error: ', err)
        return null
    }
}
// Function Declation to Delete Todo
async function deleteTodo(todoId: string) {
    const params = {
        TableName: process.env.TODOS_TABLE,
        Key: {
            id: todoId
        }
    }
    try {
        await docClient.delete(params).promise()
        return todoId
    } catch (err) {
        console.log('DynamoDB error: ', err)
        return null
    }
}

// Function Declation to Update Todo

type Params = {
    TableName: string | undefined,
    Key: string | {},
    ExpressionAttributeValues: any,
    ExpressionAttributeNames: any,
    UpdateExpression: string,
    ReturnValues: string
}

async function updateTodo(todo: any) {
    let params: Params = {
        TableName: process.env.TODOS_TABLE,
        Key: {
            id: todo.id
        },
        ExpressionAttributeValues: {},
        ExpressionAttributeNames: {},
        UpdateExpression: "",
        ReturnValues: "UPDATED_NEW"
    };
    let prefix = "set ";
    let attributes = Object.keys(todo);
    for (let i = 0; i < attributes.length; i++) {
        let attribute = attributes[i];
        if (attribute !== "id") {
            params["UpdateExpression"] += prefix + "#" + attribute + " = :" + attribute;
            params["ExpressionAttributeValues"][":" + attribute] = todo[attribute];
            params["ExpressionAttributeNames"]["#" + attribute] = attribute;
            prefix = ", ";
        }
    }

    try {
        await docClient.update(params).promise()
        return todo
    } catch (err) {
        console.log('DynamoDB error: ', err)
        return null
    }
}
type Todo = {
    id: string;
    title: string;
    done: boolean;
}
type AppSyncEvent = {
    info: {
        fieldName: string
    },
    arguments: {
        todoId: string,
        todo: Todo
    }
}
exports.handler = async (event: AppSyncEvent) => {
    switch (event.info.fieldName) {
        case "addTodo":
            return await addTodo(event.arguments.todo);
        case "getTodos":
            return await getTodos();
        case "deleteTodo":
            return await deleteTodo(event.arguments.todoId);
        case "updateTodo":
            return await updateTodo(event.arguments.todo);
        default:
            return null;
    }
}

Now will add Lambda As Datasource to Appsync

This code will add lambda as Datasource with Appsync

 ////Set lambda as a datasource
    const lambda_data_source = api.addLambdaDataSource(
      "lamdaDataSource",
      todoLambda
    );

Next We will create Resolvers for our Datasource.

Now create resolvers for our Query and Mutations to our lambda datasource.


    ///Describing resolver for datasource

    lambda_data_source.createResolver({
      typeName: "Query",
      fieldName: "getTodos",
    });

    lambda_data_source.createResolver({
      typeName: "Mutation",
      fieldName: "addTodo",
    });

    lambda_data_source.createResolver({
      typeName: "Mutation",
      fieldName: "deleteTodo",
    });

    lambda_data_source.createResolver({
      typeName: "Mutation",
      fieldName: "updateTodo",
    });

Create DynamoDB Instance

In last we need to create an instance of DynamoDB. We will use DynamoDB from our main function code to save , edit, delete and updated records.

//Import this line at top of file 
import * as ddb from "@aws-cdk/aws-dynamodb";
/*
Other Code
...
...
...*/
// Createing DynmoDB instance
 const todosTable = new ddb.Table(this, "CDKTodosTable", {
      tableName: "13ATodotable",
      partitionKey: {
        name: "id",
        type: ddb.AttributeType.STRING,
      },
    });
    // Granting Full acces to our Lambda Function to read and write records.
    todosTable.grantFullAccess(todoLambda);
    // Adding  our DynamoDB Table as Envoirnemnt Variable to our lambda Function
    todoLambda.addEnvironment("TODOS_TABLE", todosTable.tableName);

Useful commands

After creating our stack and function declaration and Graphql Schema definition, We will make a build of our application Then run

npm run build

This command will compile typescript to javascript code which can be deployed to AWS.
Once You have successfully compiled and created a build of your application, You can deploy it to AWS Clouds by running this command

cdk deploy

This Command will deploy your application on AWS.

How To Test that our Application working properly

Login to your AWS Account and Goto Appsync Service. AWS provides a GraphQL playground to test Graphql Queries and Mutation. Here you can test your Queries and Mutation.

*Completed Code of this application available at:
Github Code *

In the Next Tutorial We will learn how to connect our Graphql API with React Frontend.

You can connect with me on Social Media.

Twitter

Facebook

Github

How to upload Static Website content To AWS S3 + CloudFront Using TypeScript AWS CDK

Abdul Waqar — Mon, 29 Nov 2021 13:19:16 +0000

How to deploy static site To AWS S3 + CloudFront Using The TypeScript AWS CDK

In this post, we're going to learn in steps deployment of a static website to an S3 bucket that has CloudFront setup as the global CDN.

In this post I have used AWS CDK with Typescript You can use your preferred language.

Before going to the application code you have to configure your local environment. if You have already had a prerequisite then move to the next step. If you have not configured it you can go to my previous post about Configuration AWS CDK

Getting Started

What is S3 bucket?

Ans: Amazon Simple Storage Service (Amazon S3) is an object storage service offering industry-leading scalability, data availability, security, and performance. Customers of all sizes and industries can store and protect any amount of data for virtually any use case, such as data lakes, cloud-native applications, and mobile apps. With cost-effective storage classes and easy-to-use management features, you can optimize costs, organize data, and configure fine-tuned access controls to meet specific business, organizational, and compliance requirements.

### What is CloudFront?

Ans: Amazon CloudFront is a web service that speeds up the distribution of your static and dynamic web content, such as .html, .css, .js, and image files, to your users. CloudFront delivers your content through a worldwide network of data centers called edge locations. When a user requests content that you're serving with CloudFront, the user is routed to the edge location that provides the lowest latency, so that content is delivered with the best possible performance.

CloudFront distributions deliver your content from one or more origins; an origin is a location where you store the original version of your content. We will use S3 bucket as the origin. If the bucket is configured as a website endpoint, the distribution can use S3 redirects and S3 custom error documents.

Let's write code for our application.

Step. 1:

Make directory

mkdir deploy_static_page_with_aws

Step. 2:

Goto New directory

cd deploy_static_page_with_aws
Step. 3:

Run this command to init an AWS-CDK project.

Note: We will be using typescript in this project if you are using another language you have to choose here

cdk init app --language typescript
Step. 4 :

Install required dependency which we are going to use in our application. I have used NPM package but you can also use Yarn as well.

Run this command to install dependencies:
npm install @aws-cdk/aws-s3 @aws-cdk/aws-s3-deployment @aws-cdk/aws-cloudfront @aws-cdk/aws-cloudfront-origins

We will use S3 bucket to host or static pages and use S3 bucket as an origin to CloudFront distribution. Cloudfront will deliver static content over CDN.

Step. 5:

Goto /lib folder and update existing code to initialize our AWS service.
At the top of file import these methods

import * as cloudfront from "@aws-cdk/aws-cloudfront";
import * as origins from "@aws-cdk/aws-cloudfront-origins";
import * as s3 from "@aws-cdk/aws-s3";
import * as s3deploy from "@aws-cdk/aws-s3-deployment";

Now initialized S3 bucket as follow:

   // create a bucket to upload your app files

    const websiteBucket = new s3.Bucket(this, "WebsiteBucket", {
      versioned: true,
    });

Let's connect our S3 bucket to CloudFront distribution and add S3 as an origin to CloudFront distribution to deliver content from S3 bucket.

    // create a CDN to deploy your website

    const distribution = new cloudfront.Distribution(this, "Distribution", {
      defaultBehavior: {
        origin: new origins.S3Origin(websiteBucket),
      },
      defaultRootObject: "index.html",
    });

In the following code we are describing that where is our static content is exits that we are going to deploy on S3 bucket. We have put our static pages in the website folder at the root directory of our application.

   // housekeeping for uploading the data in the bucket 

    new s3deploy.BucketDeployment(this, "DeployWebsite", {
      sources: [s3deploy.Source.asset("./website")],
      destinationBucket: websiteBucket,
      distribution,
      distributionPaths: ["/*"],
    });

We can get CDN link from the CloudFront console. But I have written code to print the CloudFront CDN URL in the console. Put the following code in your code after the distribution code.

   // Prints out the web endpoint to the terminal

    new cdk.CfnOutput(this, "DistributionDomainName", {
      value: distribution.domainName,
    });

🥰 👏 Congratulation; You have successfully deployed your first static websites to AWS Clouds.
You can Follow me on Twitter and connect on LinkedIn

How to Create and deploy Lambda function on AWS with CDK and API endpoint to Lambda

Abdul Waqar — Fri, 26 Nov 2021 08:10:35 +0000

1.What is AWS and CDK ?

Amazon Web Services (AWS) is the world’s most comprehensive and broadly adopted scalable cloud platform. AWS offering over 200 fully featured services from data centers globally. Millions of customers—including the fastest-growing startups, largest enterprises, and leading government agencies—are using AWS to lower costs, become more agile, and innovate faster.
The AWS Cloud Development Kit (AWS CDK) is an open source software development framework to define your cloud application resources using familiar programming languages.CDK is used to define structure of our application as Code. We can call it Infrastructure as Code which is best for scalable

2.Lambda Function

AWS Lambda is a serverless, event-driven compute service that lets you run code for virtually any type of application or backend service without provisioning or managing servers. You can trigger Lambda from over 200 AWS services and software as a service (SaaS) applications, and only pay for what you use.

3.Amazon API Gateway

AWS API Gateway is a fully managed service that makes it easy for developers to create, publish, maintain, monitor, and secure APIs at any scale. APIs act as the main communication gateway for applications to access data,apply business logic, or functionality from your backend services. Using API Gateway, you can create RESTful APIs and WebSocket APIs that enable real-time two-way communication applications. API Gateway supports containerized and serverless workloads, as well as web applications.

API Gateway handles all the tasks involved in accepting and processing up to hundreds of thousands of concurrent API calls, including traffic management, CORS support, authorization and access control, throttling, monitoring, and API version management. API Gateway has no minimum fees or startup costs. You pay for the API calls you receive and the amount of data transferred out and, with the API Gateway tiered pricing model, you can reduce your cost as your API usage scales.

Lets write code for Lambda Function

Before deploying code to AWS Clouds we need to configure our AWS profile with our development environment. I have written step by step guide how to configure AWS profile and deploy simple helloWorld Application. If you are beginner then before writing lambda code Read basic Guide here

Note : In this article we will use Typescript language to write Application Code

Steps to write & compile the code

step 1

make a new folder for your cdk project

mkdir hello_lambda_with_apigatway

step 2

initialize your cdk project in typescript by running the following command

cdk init app --language typescript

step 3

run the following command to build your ts files in real-time. This process needs to keep running in the background so it is best if you run it in a separate terminal. If you don't want to watch application build process at real time you can skip this step and after writing code make a build before deploying.

npm run watch

step 4

Initialize your lambda function

import * as cdk from "@aws-cdk/core";
import * as lambda from "@aws-cdk/aws-lambda";
import * as apigw from "@aws-cdk/aws-apigateway";

export class HelloLambdaStack extends cdk.Stack {
  constructor(scope: cdk.Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);
    const hello = new lambda.Function(this, "HelloHandler", {
      runtime: lambda.Runtime.NODEJS_10_X,
      code: lambda.Code.fromAsset("lambda"),
      handler: "hello.handler",
    });

  }
}

Let me explain this code. we have created a class HelloLamdaStack in which we have initialized our lambda function and API Gateway. In this code we have declared that we will use Nodejs 10 version and code of our lambda function is exist in lambda folder at root directory and name of our lambda function is hello.
Also update code of /bin/ . Code in this file will create a New Stack for lambda function.

import "source-map-support/register";
import * as cdk from "@aws-cdk/core";
import { HelloLambdaStack } from "../lib/step01_hello_lambda-stack";

const app = new cdk.App();
new Step01HelloLambdaStack(app, "HelloLambdaStack");

typescript

step 5

add the handler code for your lambda in lambda/hello.ts

import { APIGatewayProxyEvent, APIGatewayProxyResult, Context } from 'aws-lambda';

export async function handler(event: APIGatewayProxyEvent, context: Context): Promise<APIGatewayProxyResult> {
  console.log("request:", JSON.stringify(event, undefined, 2));

  return {
    statusCode: 200,
    headers: { "Content-Type": "text/plain" },
    body: `Hello, CDK! You've hit ${event.path}\n`
  };
}

When we call endpoint to this lambda function our function will return "Hello, CDK! You've hit ${event.path}".

step 6

Installing Bootstrap Stack.
For Lambda functions we will need to do bootstrapping because they require assets i.e. handler code that will be bundled with the CDK library etc. and stored in S3 bootstrapped bucket:

cdk bootstrap

Step 7 (optional)

Run the following command to see the cloud formation template of your cdk code.

cdk synth

Step 8 (optional)

Run the following command to see the difference between the new changes that you just made and the code that has already been deployed on the cloud.

cdk diff

Step 9

Run the following command to deploy your code to the cloud.

cdk deploy

if you did not run "npm run watch" in the step 4 then you need to build the project before deployment by running the following command. npm run build will also compile typescript files of the lambda function

npm run build && cdk deploy

step 10

Now test the function in AWS Lambda Console (make sure you are in the correct region):
https://console.aws.amazon.com/lambda/home#/functions

step 11

Next step is to add an API Gateway in front of our function. Install the dependency: npm install @aws-cdk/aws-apigateway

new apigw.LambdaRestApi(this, "Endpoint", {
      handler: hello,
    });

step 12

deploy again

cdk deploy

step 13

Get the URL from the output and test it using curl or paste the url in browser:

curl https://xxxxxx.execute-api.us-east-2.amazonaws.com/prod/
😊 Congratulation ! You have successfully deployed your first Lambda Function and API Gateway to call Lambda Function on AWS Cloud.

A Beginner's Guide to Configure AWS CDK and deploy Hello World App.

Abdul Waqar — Wed, 18 Aug 2021 17:07:22 +0000

Prerequisite:

To work with the AWS CDK, you must have an AWS account and credentials and have installed Node.js and the AWS CDK Toolkit. See AWS CDK Prerequisites.
If you do not have AWS Account Reister now for New Account. You can use AWS Free Tier for 12 months for free. There are some services which are not available in AWS Free Tier. For pricing details See here

AWS Educate

AWS Free Tier

In this Post we have used TypeScript. Because TypeScript consider the best language for CDK
If you don't already have it, you can install it using npm.

npm install -g typescript

Note :
If you get a permission error, and have administrator access on your system, try

sudo npm install -g typescript

This post covers how to set up AWS CDK for development and create Hello World project using CDK .

What is AWS CDK?

AWS CDK is an open source software development framework to model and provision your cloud application resources using familiar programming languages. With AWS CDK, you can define your infrastructure as code and provision it through AWS CloudFormation. AWS CDK is available to use in all AWS regions. In this learning repo we will use CDK with TypeScript.

We expect that Open Source AWS CDK will become the defacto standard for Infrastructure as Code (IAC) not just for AWS but other clouds as well. Thus becoming the standard IAC multicloud tool. It is already available for Terraform and Kubernetes. CDK has already become the de facto software development framework internally at AWS. AWS CDK is DevOps for Developers and is the Ultimate DevOps tool.

STEP: 1 Install the AWS CDK

Install the AWS CDK Toolkit globally using the following NPM command.

npm install -g aws-cdk

After running the above command aws-cdk will be installed. Run the following command to verify correct installation and print the version number of the AWS CDK.

cdk --version

Before createing an application we need to configure our CDK CLI
Run the following command to configure AWS in console.

aws configure

If you don't have AWS access key ID, secret access key follow the below given instruction :

To get your access key ID and secret access key

Open the IAM console at IAM Console.
On the navigation menu, choose Users.
Choose your IAM user name (not the check box).
Open the Security credentials tab, and then choose Create access key.
To see the new access key, choose Show. Your credentials resemble the following:

Access key ID: AKIAIOSFODNN7EXAMPLE
Secret access key: wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY

To download the key pair, choose Download .csv file. Store the .csv file with keys in a secure location.

Create first AWS CDK app

Now You have set up your development environment for writing AWS CDK apps. Great! Now let's see how it feels to work with the AWS CDK by building the simplest possible AWS CDK app.

Each AWS CDK app should be in its own directory, with its own local module dependencies. Create a new directory for your app. Starting in your home directory, or another directory if you prefer, issue the following command

mkdir hello-cdk
cd hello-cdk

Now initialize the app using the cdk init command, specifying the desired template ("app") and programming language, We are using TypeScript.Run the following command:

cdk init app --language typescript

The cdk init command creates a number of files and folders inside the hello-cdk directory to help you organize the source code for your AWS CDK app. Take a moment to explore. The structure of a basic app is all there; you'll fill in the details in this tutorial.

If you have Git installed, each project you create using cdk init is also initialized as a Git repository. We'll ignore that for now, but it's there when you need it.

Build the app

In most programming environments, after making changes to your code, you'd build (compile) it. This isn't strictly necessary with the AWS CDK—the Toolkit does it for you so you can't forget. But you can still build manually whenever you want to catch syntax and type errors. For reference, here's how.

npm run build

List the stacks in the app

Just to verify everything is working correctly, list the stacks in your app.

cdk ls

Add an Amazon S3 bucket

At this point, your app doesn't do anything because the stack it contains doesn't define any resources. Let's add an Amazon S3 bucket.

Install the Amazon S3 package from the AWS Construct Library.

npm install @aws-cdk/aws-s3

Next, define an Amazon S3 bucket in the stack using the Bucket construct.

In lib/hello-cdk-stack.ts:

import * as cdk from '@aws-cdk/core';
import * as s3 from '@aws-cdk/aws-s3';

export class HelloCdkStack extends cdk.Stack {
  constructor(scope: cdk.App, id: string, props?: cdk.StackProps) {
    super(scope, id, props);

    new s3.Bucket(this, 'MyFirstBucket', {
      versioned: true
    });
  }
}

Bucket is the first construct we've seen, so let's take a closer look. Like all constructs, the Bucket class takes three parameters.

scope: Tells the bucket that the stack is its parent: it is defined within the scope of the stack. You can define constructs inside of constructs, creating a hierarchy (tree).
Id: The logical ID of the Bucket within your AWS CDK app. This (plus a hash based on the bucket's location within the stack) uniquely identifies the bucket across deployments so the AWS CDK can update it if you change how it's defined in your app. Buckets can also have a name, which is separate from this ID (it's the bucketName property).
props: A bundle of values that define properties of the bucket. Here we've defined only one property: versioned, which enables versioning for the files in the bucket.

Synthesize an AWS CloudFormation template

Synthesize an AWS CloudFormation template for the app, as follows.

cdk synth

Make Build of App

Now Make build of our App by runni command :

npm run build

Deploying the stack

To deploy the stack using AWS CloudFormation, issue:

cdk deploy

You can go to the AWS CloudFormation console and see that it now lists hello-cdk:

https://console.aws.amazon.com/cloudformation/home

You'll also find MyFirstBucket (hello-cdkstack-myfirstbucketb8884501-r3g3as4wff5f) in the Amazon S3 console.

https://s3.console.aws.amazon.com/s3/home?region=us-east-2#

Congratulations !

You app is successfuly deploy to AWS.

What is useEffect Hook in ReactJS?How useEffect works and where to use it?

Abdul Waqar — Mon, 16 Aug 2021 02:45:28 +0000

Prerequisite: Knowledge of JavaScript and Basic knowledge of ReactJS.

This post covers about useEffect hook of ReactJS. What is the uses of

useEffect? What is syntax ? How does it work? When to use it ? And Some common use cases of useEffect Hook.

What is React?

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.

What is useEffect() ?

Our React Application interact with outside world with functions. useEffect is ReactJS Hook which is used to handle side effect functions(side effect function are those function that communicate with outside world or just out of ReactJS ecosystem ) and by using useEffect we can separate them into other function.
useEffect hook must be declared inside the React component at top level of function. it gives several advantages :
*It will have access to those data that is required in useEffect hook.

It cal also update the data later base on the dependency and updates. ## What is Syntax of useEffect hook? It accepts a function that interact with outside world of React components and array of dependency. If we want to execute useEffect after a specific event or state change we will pass our variables in array of dependency . Every time a variable passed to useEffect dependency arrayk is updated useEffect hook will be re-called.

useEffect(function sideeffect(){
.....
}, [array_of_dependency ])

About hook

if we don’t pass dependency variable then useEffect hook will only called when our component is rendered .
If we pass an empty array to useEffect then our component will be rendered for first time when a component is rendered. To re-call useEffect hook we have to refresh our page.
If we pass dependencies to useEffect hook, then useEffect will executed every time when the variables which we passed to dependency array .

How does it work?

Every time a React components finish rendering, useEffect run unless you specified dependencies in the dependencies array.

When to use useEffect()?

There are several cases where we should consider using useEffect hook. Most import of them are :

If we want to hit an API endpoint to fetch data and display data on client side. When our component is rendering, function or handler passed to useEffect hook called and data fetched in component states. Then these states are used in UI components.
When we want to fetch data based on passed parameter, we can updated this parameter from client side. Once the parameter is updated to new data , useEffect hook will be re-called.
We should useEffect, when your component depends on the outside world data, and we can not guarantee that data will come or not (maybe the server is down there). So, Instead of throwing errors and stop other components from being rendered, move them into useEffect hook.
When you are using browser API including Timer function, fetch API, local storage and for more browser API, please refer : MDN Browser API.

Some use cases of React useEffect hook

Always run whenever component renders/re-renders

import React, { useEffect } from "react";
const UseEffectHookExmaple = () => {
  useEffect(() => {
    document.title = "UseEffect called when a component Rendered";
  });
  return (
    <div>
      <h1>UseEffect Hook Called every time a component is rendered</h1>
    </div>
  );
};

export default UseEffectHookExmaple;

2.Run once after that if component re-renders, then it will not run.

import React, { useEffect } from "react";
const UseEffectCalledOnce = () => {
  useEffect(() => {
    document.title = "UseEffect called Once when component Rendered";
  }, []);
  return (
    <div>
      <h1>UseEffect called Once when component Rendered</h1>
    </div>
  );
};

export default UseEffectCalledOnce;

3.Run once by default after that if prop values changes, then run

import React, { useEffect } from "react";
const UseEffectCalledOnce = ({ PageTitle }) => {
  useEffect(() => {
    document.title = PageTitle;
  }, [PageTitle]);
  return (
    <div>
      <h1>UseEffect called when PageTitle is updated</h1>
    </div>
  );
};

export default UseEffectCalledOnce;

If you have any suggestion please let us know in comment section.
GITHUB
Twitter