Guide Typescript & PNPM Updates

[ChristineP2]

As I worked through the guide, I add notes and I also read the comments and adding any relevant notes I see as of May 18(ish).

Demo Repo: https://github.com/ChristineP2/demo_notes_app_v2

Site Wide

Changes

• Added .idea to .gitignore
• Added .idea to Jekyll Exclude list

Notes

• Consider accessibility features
  • http://www.goring.org/resources/accessibility.html
  • https://github.com/benbalter/ra11y
  • adding an indicator for links that open in new tabs
• Consider adding "Archived" banner to the top of any parts of the site that are kept but are not intended for current reference for example, all the pages in this section.

Guide

Changes

• Updated External Links to open a new tab.
• Updated SASS for blockquote within post-content to not be enormous.
• Added a few classes for Notes and Asides

Notes

• TODO: Resolve SST Console Warning See the migration guide

  (node:85684) NOTE: We are formalizing our plans to enter AWS SDK for JavaScript (v2) into maintenance mode in 2023.
  
  Please migrate your code to use AWS SDK for JavaScript (v3).
  For more information, check the migration guide at https://a.co/7PzMCcy
  (Use `node --trace-warnings ...` to show where the warning was created)
  16:14:43.391
  

• TODO: Clean up legacy guide files so it doesn't clutter the current fileset.

• TODO: Correctly manage the path_id variable in code examples to ensure they are present without code duplication.

• TODO: Switch from Amplify API to RestApi or GraphQLAPI based on note in API.d.ts (See Warning in console.sst.dev)

• Consider adding a chapter on accessibility in the frontend creation section.

  • React Accessibility - New Accessibility guides are still pending based on announcement on 3/16/2023
  • https://www.freecodecamp.org/news/react-accessibility-tools-build-accessible-react-apps/
  • https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility

Chapter Specific

What Does This Guide Cover

Notes (From Discourse comments)

• Consider using Next.js for the guide
• Consider switching example to React Native

How to Get Help?

no specific changes

What is Serverless?

Changes

• Removed link to the What is AWS Lambda chapter as it encourages skipping the rest of the current page.

What is AWS Lambda?

Notes

• Consider decreasing specificity in Lambda Spec Description - As AWS modifies its offerings, the description can be outdated. By speaking in generalities and linking directly to AWS for specificity the document will be less fragile.

Why Create Serverless Apps?

Notes

• Consider specifying a timeframe on the cost calculation to account for pricing changes over time.

Create an AWS Account

Changes

• Tested steps with a new AWS Account.
• Removed reference to specific language since they changed the call to action. Also removed screenshot as it was outdated.

Create an IAM User

Changes

• Updated chapter instructions & screenshots.
• Updated screenshots at 1280x783.
• Screenshots located in create-iam-user
• Left old screenshots in iam-user for other languages as I couldn't update them to match the new instructions.

Configure the AWS CLI

Changes

• Tested steps with a clean install on Mac.

Notes

• Consider adding Chocolatey [instructions for Windows](https://discourse.sst.dev/t/configure-the-aws-cli/86/3?u=christinep2.
• (Consider adding instructions for *NIX flavors.)[https://discourse.sst.dev/t/configure-the-aws-cli/86/5?u=christinep2]
• Consider adding a link to the AWS instructions instead, in case that is easier.

What is SST?

Changes

• Removed link to other chapters as it encourages skipping the current document
• Added links for the specific IDE Instructions

Notes

• Consider removing the penultimate sentence regarding the alternative guide since it is archived.

What is Infrastructure as Code?

Changes

• Added "using CDK" into the first sentence based on the confusion mentioned in the chapter comments

What is AWS CDK?

Changes

• Changed references to pnpm
• Added question mark to title to match the other titles in the section and the title of the comments page.

Create an SST app

Changes

• updated to pnpm

Notes

• Need to update Next Steps command line output as follows
  • cd notes
  • pnpm add (or npm, or yarn)
  • pnpm exec sst dev

Create a Hello World API

Changes

• updated to pnpm
• Added instructions for Safari et. al. users found in this discord thread

Notes

• Safari instructions for mkcert usage are not working. Need to investigate further.

Initialize a Github Repo

no specific changes

Create a DynamoDB Table in SST

Changes

• updated to pnpm
• updated to typescript
• Added clarification as specified in comment

Questions

1. Regarding the statement "There’s no specific reason why we are creating a separate stack for these resources." Would it be fair to say that the decision to have separate stacks increases application maintainability? It seems like it could fall under the principle of "separation of concerns".
2. Why is the Hello World API still present in console after this step?

Create a S3 Bucket in SST

Changes

• updated to pnpm
• updated to typescript
• small wording changes
• moved bucket in return to above table instead of below, matching location in the stack file and alphabetically ordered.
• git commit as a one line command to facilitate using the copy option for the code.

Review Our App Architecture

no specific changes

Add an API to Create a Note

Changes

• updated to pnpm
• updated to typescript
• Added info about DRYness and maintainability to the refactor section.

Notes

• Should we uninstall the aws-sdk (or @AWS-SDK) from functions when we install it into core?
• Should the user re-test after the refactor to ensure it still works?
• Do we need to add this note for Windows users into the guide?
• Referenced this error handling blog post for the error code in handler.
• I'm seeing a delay as I add the API endpoints with seeing them in the console. I experienced on two different run-throughs, is this expected? If so, can we add a note to that effect at this point so people don't try and debug?

Add an API to Get/Put/Patch/Delete a Note

Changes

• updated to pnpm
• updated to typescript

Adding Auth to Our Serverless App

Changes

• Updated to typescript
• Updated to use docs variable instead of hardcoded url

Secure Our Serverless APIs

Changes

• Updated to typescript
• Switched to PNPM
• Used optional chaining operator for requestContext.authorizer. Should we have a different solution?

Setup a Stripe Account

Changes

• Redo screenshots and update text to match new UI

Handling Secrets in SST

Changes

• Rewrite to use the SST Secrets CLI based on the information found here: https://docs.sst.dev/config#should-i-use-configsecret-or-env-for-secrets

Add an API to Handle Billing

Changes

• Updated to typescript
• Switched to PNPM

Notes

• Consider not using nested ternary operators.

Unit Tests in Serverless

Changes

• Switch to Typescript for testing
• Switch to PNPM
• Add instructions to add Vite Test to workspace

Notes

• Consider including tests as we build out the API instead of at the end, or at least adding a note that this is a preferred approach for ensuring properly tested code.

Handle CORS in Serverless APIs

Changes

• Switch to Typescript
• Switch to PNPM

Handle CORS in S3 for File Uploads

Changes

• Switch to Typescript
• Switch to PNPM

Create a New React.js App

Changes

• Switch to Typescript
• Switch to PNPM
• Minor wording changes

Notes

• Need to replace create-react-app with one of the recommended solutions as create-react-app is being deprecated.
• Consider adding tests alongside new code from this point forward.

Set up Custom Fonts

Changes

• Minor wording changes
• Update final screenshot to show tsx file instead of js file

Set up Bootstrap

Changes

• Switch to Typescript
• Switch to PNPM
• Minor wording changes

Handle Routes with React Router

Changes

• Switch to Typescript
• Switch to PNPM
• Minor wording changes

Create Containers

Changes

• Switch to Typescript
• Switch to PNPM
• Minor wording changes

Adding Links in the Navbar

Changes

• Switch to PNPM
• Switch to Typescript
• Minor wording changes

Handle 404s

Changes

• Switch to Typescript
• Minor wording changes

Configure AWS Amplify

Changes

• Switch to Typescript
• Switch to PNPM
• Minor wording changes

Create a Login Page

Changes

• Switch to Typescript
• Switch to PNPM
• Minor wording changes

Login with AWS Cognito

Changes

• Switch to Typescript
• Switch to PNPM
• Minor wording changes

Add the Session to the State

Changes

• Switch to Typescript

Load the State from the Session

Changes

• Switch to Typescript
• Move import of UseEffect above explainer so that consumer is not sidetracked by the import not being present.

Clear the Session on Logout

Changes

• Switch to Typescript

Redirect on Login and Logout

Changes

• Switch to Typescript

Give Feedback While Logging In

Changes

• Switch to Typescript

Create a Custom React Hook to Handle Form Fields

Changes

• Switch to Typescript

Create a Signup Page

No Changes

Create the Signup Form

Changes

• Switch to Typescript
• Minor wording changes

Signup with AWS Cognito

Changes

• Switch to Typescript
• Minor wording changes

Notes

• Do we want to add the handling for UserExists in? https://discourse.sst.dev/t/signup-with-aws-cognito/130/74?u=christinep2

Add the Create Note Page

Changes

• Switch to Typescript
• Minor wording changes

Call the Create API

Changes

• Switch to Typescript
• Minor wording changes

Upload a File to S3

Changes

• Switch to Typescript

Upload a File to S3

Changes

• Switch to Typescript
• Added helpful note from @sometimescasey

Notes

• Update troubleshooting tips if outdated.

List All the Notes

Changes

• Switch to Typescript
• Minor wording changes

Call the List API

Changes

• Switch to Typescript
• Move Import immediately after adding code so consumer is not distracted by errors

Display a Note

Changes

• Switch to Typescript

Render the Note Form

Changes

• Switch to Typescript
• Minor wording changes
• Move Import immediately after adding code so consumer is not distracted by errors

Save Changes to a Note

Changes

• Switch to Typescript
• Minor wording changes

Delete a Note

Changes

• Switch to Typescript
• Minor wording changes

Create a Settings Page

Changes

• Switch to Typescript
• Minor wording changes

Add Stripe Keys to Config

Changes

• Switch to Typescript
• Switch to PNPM
• Minor wording changes

Create a Billing Form

Changes

• Switch to Typescript
• Switch to PNPM

Connect the Billing Form

Changes

• Switch to Typescript
• Switch to PNPM

Set up Secure Pages

No Changes

Create a Route That Redirects

Changes

• Switch to Typescript

Use the Redirect Routes

Changes

• Switch to Typescript

Redirect on Login

Changes

• Switch to Typescript

Purchase a Domain with Route 53

Skipped.

Custom Domains in serverless APIs

Changes

• Switch to Typescript
• Minor wording changes

Custom Domains for React Apps on AWS

Changes

• Switch to Typescript/PNPM
• Minor wording changes

Notes

• I tried switching the domain and the alias so that I could easily remove the domain alias and use it for my "real" app and leave the subdomain for this demo, but it erred with the message.

    Error: Validation failed with the following errors:
    [prod-notes-FrontendStack/ReactSite/Redirect/RedirectCertificate] DNS zone www-notes.manuals4life.com is not authoritative for certificate domain name manuals4life.com
  

  In orde to keep the statement "You can switch these around so that the root domain redirects to the www. version as well.", I believe we'd need additional information dealing with the CAA record or whatever tripped it up.

Getting Production Ready

No Changes

Creating a CI/CD Pipeline for serverless

No Changes (other than the global new tab for external links)

Setting up Your Project on Seed

Changes

• Switch References to Typescript
• Minor wording changes

Notes

• Needs new Screenshots using serverless-stack demo notes app.
• Might add a screenshot pointing at settings in the UI?

Configure Secrets in Seed

Changes

• Switch References to sst secret instead of .env.local
• Minor wording changes

Deploying Through Seed

Changes

• minor wording changes

Debugging Full-Stack Serverless Apps

No Changes

Setup Error Reporting in React

Changes

• Switch to Typescript
• Switched to pnpm add @sentry/react from @sentry/browser
• Added an ErrorInfoType

Notes

• Needs new Screenshots

Report API Errors in React

Changes

• Switch to Typescript

Setup an Error Boundary in React

Changes

• Switch to Typescript
• Change multiline ternary to if/else
• Updated screenshot for react error

Notes

• Needs new Screenshots for Sentry confirmations

Setup Error Logging in Serverless

Changes

• Switch to Typescript

Logic Errors in Lambda Functions

Changes

• Switch to Typescript

Notes

• Logging extra information is incorrectly displaying [object Object]

Unexpected Errors in Lambda Functions

Changes

• Switch references to Typescript

Errors Outside Lambda Functions

Changes

• Switch references to Typescript

Errors in API Gateway

Changes

• Switch references to Typescript

Wrapping Up

Changes

• Switch references to PNPM

Additional Guide Information Pages still in use:

Auth In Serverless Apps

Changes

• Updated to typescript
• Updated referenced pages What is IAM and What is an ARN

What is IAM / What is an ARN

Changes

• Updated text to remove wording implying it is a step in the guide

Mapping Cognito Identity Id and User Pool Id

Cognito User Pool vs Identity Pool

Setting serverless environment variables in a React app

• Updated to pnpm
• Updated to typescript

Outstanding Changes (I did not get these done in this pass)

Extra Credit series of chapters on user management

• TODO: Update this section's chapters as they are referenced from "Give Feedback While Logging In" and user management pages

[jayair]

Appreciate this! I'm most likely going to go through your list and update it part by part when I do my next rewrite.

[ChristineP2]

Appreciate this! I'm most likely going to go through your list and update it part by part when I do my next rewrite.

That's what I was expecting. It was a great exercise for getting more into the hows and whys, I figured it might as well be an option for your next update.

If there is anything you want to change or add to save you time, let me know.

[jayair]

Will do! Appreciate all your help!

[jayair]

I'm going to start working on this!