Published

62-81 (63) Create react app and git npx create-react-app space-finder-frontend --template typescript (64) Basic project structure folder structure components: ui components (*.tsx) model: types (*.ts) services: non-ui code (*.ts) util (*.ts) (65) state, props, child, parent change in state or props triggers re-render props are immutable state is mutable this.setState({ counterState: this.state.counterState + 1 }) use state / props this.state.counterState this.props.counterProp typescript class defines type of Props and State interface Props { counterProp: number } interface State { counterState: number } export class MyComponent extends React....

Binding why? options (a) bind in constructor (ES2015) (b) class properties (ES2022) (c) bind in render (d) arrow function in Render ?? why no (e) pass the parent object (a) bind in constructor (ES2015) constructor(props) { super(props) this.setUser = this.setUser.bind(this) } <button onClick={this.handleClick} (b) class properties (ES2022) handleClick = () => { // use 'this' }; <button onClick={this.handleClick} (c) bind in render 😞 creates a new function each render...

singleton.interface.ts export default interface Singleton<T> { getValue: () => T } foo.ts class FooSingleton implements Singleton<Foo> [ private foo: Foo getValue() { if(!foo) this.foo = new Foo(); return this.foo; } } const fooSingleton = new FooSingleton() export default fooSingleton as Singleton<Foo> Do keep in mind the disadvantages of the singleton pattern (src: Design Patterns in TypeScript - Singleton _ The Startup)

(Section 11 of Course_ AWS & Typescript Masterclass - CDK, Serverless, React) 94-97 (95) Deployment to S3 and Cloudfront // create bucket this.deploymentBucket = new Bucket( this.stack, 'space-app-web-id', { bucketName: bucketName, publicReadAccess: true, websiteIndexDocument: 'index.html' } ); new CfnOutput(this.stack, 'spaceFinderWebAppS3Url', { value: this.deploymentBucket.bucketWebsiteUrl }); // upload build folder to the bucket new BucketDeployment( this.stack, 'space-app-web-id-deployment', { destinationBucket: this.deploymentBucket, sources: [ Source.asset( join(__dirname, '..', '..', 'space-finder-frontend', 'build') ) ] } ); // cloudfront const cloudFront = new CloudFrontWebDistribution( this....

User pools stores user data basic authentication - JWT tokens -> authenticated - yes or no Identity pools fine grained access control - user assumes an identity can directly call AWS SDK commands User Pools (1) Get Auth Token User -> Cognito username password <- response– session object JWT token … (2) Get data User –> Secured API JWT token <-response– data Identity Pools (1) Get Auth Token User -> Cognito...

Does NOT work: op run – … export TEST_USER_NAME=op://your-vault-name/TEST_USER/username export TEST_USER_PASSWORD=op://your-vault-name/TEST_USER/password op run -- echo ${TEST_USER_NAME} ${TEST_USER_PASSWORD} > op://your-vault-name/TEST_USER/username op://your-vault-name/TEST_USER/password Works: op run – bash -c ‘…’ export TEST_USER_NAME=op://your-vault-name/TEST_USER/username export TEST_USER_PASSWORD=op://your-vault-name/TEST_USER/password op run -- bash -c 'echo ${TEST_USER_NAME} ${TEST_USER_PASSWORD}' > foo-username foo-password If it’s just checking if you didn’t have a type, it’s much easier to run op run -- printenv TEST_USER_NAME op run -- printenv TEST_USER_PASSWORD which gives you useful errors like...

44-53 (44) Section intro cognito user pools JWT tokens groups (45) AWS Cognito AWS Cognito - user pool vs identity pool (46) Cognito in AWS console create user pool create app integration create app client command line force set password for user for dev aws cognito-idp admin-set-user-password --user-pool-id ${USER_POOL_ID} --username ${TEST_USER_NAME} --password "${TEST_USER_PASSWORD}" --permanent or with 1password cli op run -- bash -c 'aws cognito-idp admin-set-user-password --user-pool-id ${USER_POOL_ID} --username ${TEST_USER_NAME} --password "${TEST_USER_PASSWORD}" --permanent' (47) Generating JWT tokens with AWS Amplify (for dev within the playground)...

54-61 (54) Section intro AWS Cognito - user pool vs identity pool (55) AWS Cognito Identity pools in the console Authenticated role selection A) use default role authenticated unauthenticated B) choose role with rules ??? C) choose role from token (-> this app) user -> group -> role (56) Getting AWS temporary credentials // skipped (57-59) Identity pools in CDK link to userPoolGroup via roleArn new CfnUserPoolGroup(this.scope, 'admins', { groupName: 'admins', userPoolId: this....

100-123 (103) Types inferred type var a = 'hello' // inferred string explicit type var a:string = 'hello' // explicit string var arr: string[] = [] arr.push('hello') // ok arr.push(123) // nok ANY - last resort var a:any = 'hello' a = 3; //ok a = true //ok (104) User defined types objects have types functions have types interface interface Person { firstName: string, lastName: string, } type type job = string type specificJob = 'Engineer' | 'Programmer' combining types > found in AWS sdk...

32-43 (32) section intro (33) put item npm i @types/aws-lambda (34) getting data from ApiGateway const item = typeof event.body == 'object' ? event.body : JSON.parse(event.body) >? why this check for parsing? is this testing only, or is this random in prod? (35-36) DynamoDB + lambda // create table const table = new Table(this.stack, this.props.tableName, { partitionKey: { name: this.props.primaryKey, type: AttributeType.STRING, }, tableName: this.props.tableName }) // create lambda const id = `${this....