Wednesday, April 29, 2020

Reactjs


Hello and Welcome to this tutorial on Reactjs . Here , we are going to learn Reactjs and also create a simple application .


Table of Contents

  • Getting Started
  • Components
  • JSX
  • props
  • state



1. Getting Started

Finish up all the required software installation (nodejs , vscode..) and start with creating a simple application using the following command .

npx create-react-app your-app-name
start your app using the following command

npm start

2. Components

Components are basic building blocks of a React application . Let's create one .
Create a new  file , here is an example of a sample component . 


import React from 'react';
import './App.css';

function App() {
  return (
    <div  >
       Hello World !
    </div>
  );
}

export default App;

2.1  render()

returns the HTML part of the component .


3. JSX

JSX stands for Javascript XML . You would have notice that in the render function we return an HTML element , that's actually a JSX . A JSX should be a valid XML .It is translated to Javascript at runtime .You can use an expression {} in JSX .


4. props

We can access the data passed to a component using props .


5. state

A state can have multiple properties which will be used within an application . If any state property is changed the component is re rendered .



  6.LifeCycle : Mounting 

  • Constructor
  • static getDerivedStateFromProps
  • render
  • componentDidMount



AWS CloudFormation

CloudFormation is used to save the configuration ( as a JSON )which can be used to create a new service .

Service to provision resources using templates .

 CloudFormation Template is a JSON document .

CloudFormation Stack : Services that are created using CloudFormation Template .

CloudFormation Designer : used to create a CloudFormation Template using a drag and drop .

CloudFormer : creates a cloudFormation template based on existing infrastructure .

Elastic Beanstalk

Elastic Beanstack can be used to automate deployment and scaling .

Amazon Aurora and Dynamo DB

DynamoDB will throttle or deny requests that exceed the table's provisioned throughput capacity .

Provisioned Throughput Capacity
Read/Write Operations per second provisioned for your DynamoDB table .


1 Read /Write Unit is 4kb item .

AI

Workflow of a Machine Learning Project .

Example : Amazon Echo
1.collect data
2.Train Model : Iterate many times until good enough .
3. Deploy Model : get data back , maintain update model .

Workflow of a Data Science Project .
1.Collect Data
2. Analyze Data : Iterate many times to get good insight
3. Suggest hypothesis /action : Deploy changes / reanalyze new Data periodically .


Monday, April 27, 2020

Aws ElasticCache

Web application
Database type : radis

Aws database services

Aws database migration service

Redshirt data warehouse solution.

Petabyte scale .

Wide column storage
Graph database.
Neptune

RDS database snapshot is placed to S3.
This is an increment backup.

Aurora : reduce cost by 90%
Dynamo db runs on top of s3

Aws CloudFront

CDN

User will go to edge location rather than origin.


Amazon S3




Simple Storage Service


      • Files can be stored and retrieved from  anywhere on the web .

      • Used for live streaming . Netflix, Hotstar use it for hosting.


      • Used for content distribution , big data analytics , backup etc .


      • Files are stored in buckets , a max of 100 buckets can be created by a developer .
      • Replica of the file is available in 3 different Availability Zones , all in the same region . AWS also supports cross region replication which can be configured manually .
      • Supports periodic automatic archival/deletion , using lifecycle rules.

Storage class
Standard available in 3 availability zone
Glacier : cold data.
Archival data ..
Glacier deep
Long data retention

Requester pays
The one who download pays

Object lifecycle management
Move file automatically to glacier after 50 days
Cannot move back from glacier to S3 via lifecycle

Retreival options

EFS : multiple EC2 share same storage .
Nfs : network file system.

Snowball.
Hardware device to migrate a data .
Like a briefcase .
Device will be shipped.

Aws elastic block storage




IaaS


Infrastructure as a Service  :


 provides access to virtual or physical hardware .






EBS

     Elastic Block Storage


  • Similar to a hard drive
  • Block storage for EC2 and other services
  • Automatic replication within its AZ
  • Snapshot backup to Amazon S3
  • Restore a snapshot to a new EBS volume
  • Multiple volumes can be attached a single EC2
  • Volumes can be shared between multiple EC2



SSD
HDD

Aws lambda

Serverless

Function as a service
I want to shut down my services at 6 pm.
Integrated with Database.

Build in fault tolerance.
Pricing: only when it is executed.

Create thumbnail function



Amazon ECS

ECS supports docker

Eliminate need to install operate your cluster.

Fleet of docker container

Fargate : managed ECS .
Next step to ECS.

Container as a Service


Aws Technical Professional Bootcamp



Edge location :
Route 53 : navigate to a certain site via edge location.
Regional Cache:
Amazon Elastic Container services
Virtualization to container
Lambda : serverless

Types of EC2
Memory Optimised
Compute optimised
Storage Optimised
GPU optimised
General Optimised

Size : large small xtra large

AMI : bootable operation system and additional software.You can take snapshot.

Families : types .









Saturday, April 25, 2020

AWS Auto Scaling



  Before getting start , lets revisit the following topics .


s

 a



a


a



s


a

s


a

s


a
s


s


 a



 a



a


Saturday, April 11, 2020

Error: Objects are not valid as a React child



Error Blog 

This blog is about the error Error: Objects are not valid as a React child 

Problem Statement

error on start of reactjs application

Error Details 

error Log

ERROR DETAILS 

Error: Objects are not valid as a React child (found: object with keys {TASK_ID, TASK_DESC, TASK_REF, TASK_STATUS, UPDATED_ON}). If you meant to render a collection of children, use an array instead. in div (at task-list.js:22) in TaskList (at App.js:10) in div (at App.js:9) in App (at src/index.js:9) in StrictMode (at src/index.js:8)



Error Code 

You will face this error if you try to convert an array response to json .



router.get('/', function (req, res) { Task.getAllTask(function (err, task) { console.log('controller') if (err) res.send(err); console.log('res', task); res.send( task); }); });





  

Solution

change the code so that the array is handled .

Code Changes 

wrap the array inside a json .

  
        
    
router.get('/', function (req, res) { Task.getAllTask(function (err, task) { console.log('controller') if (err) res.send(err); console.log('res', task); res.send({'resp':task}); }); });

         

OUTPUT
works 



Thanks for reading . Let me know your thoughts in the comments below    .

Sunday, April 5, 2020

TypeError: Class extends value undefined is not a constructor or null



Error Blog 

This blog is about the error TypeError: Class extends value undefined is not a constructor or null

Problem Statement

unable to start reactjs application

Error Details 

error Log

ERROR DETAILS 

Uncaught TypeError: Class extends value undefined is not a constructor or null
    at Module../src/task/task-list.js (task-list.js:5)
    at __webpack_require__ (bootstrap:784)
    at fn (bootstrap:150)
    at Module../src/App.js (App.css?4433:45)
    at __webpack_require__ (bootstrap:784)
    at fn (bootstrap:150)
    at Module../src/index.js (index.css?f3f6:45)
    at __webpack_require__ (bootstrap:784)
    at fn (bootstrap:150)
    at Object.1 (task.js:11)
    at __webpack_require__ (bootstrap:784)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1




Error Code 

You will face this error if you have improper syntax in extends React.Component.




import React from 'react';



class TaskList extends React.Component() {
  constructor() {
    super();
    this.state = {
      name: 'React',assetName:"asset name"
    };
  }
 
  render() {
     return (
    <div  >
       Task List
    </div>
  );
  }
}


export default TaskList;



  

Solution

change the code so that the syntax is proper for extends  . .

Code Changes 

add the following import in your component.ts file .

  
        
     class TaskList extends React.Component  {
         

OUTPUT
works 



Thanks for reading . Let me know your thoughts in the comments below    .

Saturday, April 4, 2020

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client



Error Blog 

This blog is about the error Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client

Problem Statement

unable to start node js express application

Error Details 

error Log

ERROR DETAILS 

\node_modules\mysql\lib\protocol\Parser.js:437
      throw err; // Rethrow non-MySQL errors
      ^

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
    at ServerResponse.setHeader (_http_outgoing.js:470:11)
    at ServerResponse.header (F:\ \study\gitRepo\new\learn\nodejs\expressjs\node_modules\express\lib\response.js:771:10)
    at ServerResponse.send (F:\ \study\gitRepo\new\learn\nodejs\expressjs\node_modules\express\lib\response.js:170:12)
    at ServerResponse.json (F:\ \study\gitRepo\new\learn\nodejs\expressjs\node_modules\express\lib\response.js:267:15)
    at F:\ \study\gitRepo\new\learn\nodejs\expressjs\service\users.js:24:11
    at Query.<anonymous> (F:\ \study\gitRepo\new\learn\nodejs\expressjs\service\task.service.js:20:21)
    at Query.<anonymous> (F:\ \study\gitRepo\new\learn\nodejs\expressjs\node_modules\mysql\lib\Connection.js:526:10)
    at Query._callback (F:\ \study\gitRepo\new\learn\nodejs\expressjs\node_modules\mysql\lib\Connection.js:488:16)
    at Query.Sequence.end (F:\ \study\gitRepo\new\learn\nodejs\expressjs\node_modules\mysql\lib\protocol\sequences\Sequence.js:83:24)
    at Query._handleFinalResultPacket (F:\ \study\gitRepo\new\learn\nodejs\expressjs\node_modules\mysql\lib\protocol\sequences\Query.js:149:8)




Error Code 

You will face this error if you res.send twice in an express js application.




var express = require('express');
var router = express.Router();
var Task = require('./task.service.js');

router.get('/'function(reqres){
   Task.getAllTask(function(errtask) {

      console.log('controller')
      if (err)
        res.send(err);
        console.log('res'task);
      res.send(task);
    });
});
router.post('/create'function(reqres){
   console.log(req.body);
   var new_task = new Task(req.body);
   console.log(new_task);
   Task.createTask(new_taskfunction(errtask) {
    
      if (err)
        res.send(err);
      res.json(task);
    });
   res.send('success.');

});

//export this router to use in our index.js
module.exports = router;



  

Solution

change the code so that res.send is not called twice . .

Code Changes 

add the following import in your component.ts file .

  
        
      if (err)
        res.send(err);
      res.json(task);
    });
  // res.send('success.');

         

OUTPUT
works 



Thanks for reading . Let me know your thoughts in the comments below    .

TypeError: app.configure is not a function



Error Blog 

Hi Guys ,
This blog is about the error TypeError: app.configure is not a function

Problem Statement

unable to start node js express application

Error Details 

error Log

ERROR DETAILS 

app.configure(function(){
    ^

TypeError: app.configure is not a function
    at Object.<anonymous> (F:\\study\gitRepo\new\learn\nodejs\expressjs\app.js:5:5)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:623:3)



Error Code 

You will face this error if you are using app.configure in an express js application.






var express = require('express'),
    app     = express(),
    port    = parseInt(process.env.PORT10) || 8080;

app.configure(function(){
  app.use(express.bodyParser());
  app.use(app.router);
});

app.listen(port);

app.post("/myRoute"function(reqres) {
  console.log(req.body);
  res.send({ status: 'SUCCESS' });
});


  

Solution

app.configure is removed in Express 4 and above .

Code Changes 

add the following import in your component.ts file .

  
        
var express = require('express');
var bodyParser = require('body-parser');
var app = express();

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());


app.post('/api/users'function(reqres) {
   console.log(req.body);

  res.send('success');
});

app.listen(8082);

         

OUTPUT
works 



Thanks for reading . Let me know your thoughts in the comments below    .

ec2-user@ec2 Permission denied