Moving to CDK (#500)

* Adding cdk chapter and updating IaC chapter * Adding chapter to using Serverless Framework with CDK * refactor: Ensure to use change image tag instead hardcoded image (#475) * Moving to Jekyll tag instead of image * Switching all chapters to Jekyll change tag * Adding chapter on creating SST app * Working on DynamoDB chapter * Adding chapter on connecting sls and sst * Adding chapters on Cognito * Change best practice chapters to use SST * Finishing sst code snippets * Working on best practices chapter * Fixing best parctices chapters * Change first section to use SST * Fixing old links * Editing chapters * Add comments for CDK code * Editing main guide * Editing best practices * Updating chapter commnets * Updating changelog Co-authored-by: Petr Reshetin <preshetin@gmail.com> Co-authored-by: Frank <wangfanjie@gmail.com>
sst · Oct 8, 2020 · 9059943 · 9059943
1 parent 66693fd
commit 9059943
Show file tree

Hide file tree

Showing 251 changed files with 7,314 additions and 1,684 deletions.
diff --git a/_chapters/add-a-billing-api.md b/_chapters/add-a-billing-api.md
@@ -12,13 +12,13 @@ Now let's get started with creating our billing API. It is going to take a Strip
 
 ### Add a Billing Lambda
 
-<img class="code-marker" src="/assets/s.png" />Start by installing the Stripe NPM package. Run the following in the root of our project.
+{%change%} Start by installing the Stripe NPM package. Run the following in the root of our project.
 
 ``` bash
 $ npm install --save stripe
 ```
 
-<img class="code-marker" src="/assets/s.png" />Create a new file called 'billing.js' with the following.
+{%change%} Create a new file called 'billing.js' with the following.
 
 ``` js
 import stripePackage from "stripe";
@@ -59,7 +59,7 @@ Note, if you are testing this from India, you'll need to add some shipping infor
 
 Now let's implement our `calculateCost` method. This is primarily our *business logic*.
 
-<img class="code-marker" src="/assets/s.png" />Create a `libs/billing-lib.js` and add the following.
+{%change%} Create a `libs/billing-lib.js` and add the following.
 
 ``` js
 export function calculateCost(storage) {
@@ -79,7 +79,7 @@ This is basically saying that if a user wants to store 10 or fewer notes, we'll
 
 Let's add a reference to our new API and Lambda function.
 
-<img class="code-marker" src="/assets/s.png" />Open the `serverless.yml` file and append the following to it.
+{%change%} Open the `serverless.yml` file and append the following to it.
 
 ``` yml
   billing:

diff --git a/_chapters/add-a-create-note-api.md b/_chapters/add-a-create-note-api.md
@@ -14,7 +14,7 @@ Let's get started on our backend by first adding an API to create a note. This A
 
 Let's add our first function.
 
-<img class="code-marker" src="/assets/s.png" />Create a new file called `create.js` in our project root with the following.
+{%change%} Create a new file called `create.js` in our project root with the following.
 
 ``` javascript
 import * as uuid from "uuid";
@@ -88,10 +88,10 @@ There are some helpful comments in the code but we are doing a few simple things
 
 Now let's define the API endpoint for our function.
 
-<img class="code-marker" src="/assets/s.png" />Open the `serverless.yml` file and replace it with the following.
+{%change%} Open the `serverless.yml` file and replace it with the following.
 
 ``` yaml
-service: notes-app-api
+service: notes-api
 
 # Create an optimized package for our functions
 package:
@@ -118,13 +118,13 @@ provider:
   iamRoleStatements:
     - Effect: Allow
       Action:
-        - dynamodb:DescribeTable
-        - dynamodb:Query
         - dynamodb:Scan
+        - dynamodb:Query
         - dynamodb:GetItem
         - dynamodb:PutItem
         - dynamodb:UpdateItem
         - dynamodb:DeleteItem
+        - dynamodb:DescribeTable
       Resource: "arn:aws:dynamodb:us-east-1:*:*"
 
 functions:
@@ -154,13 +154,13 @@ The `iamRoleStatements` section is telling AWS which resources our Lambda functi
 
 Now we are ready to test our new API. To be able to test it on our local we are going to mock the input parameters.
 
-<img class="code-marker" src="/assets/s.png" />In our project root, create a `mocks/` directory.
+{%change%} In our project root, create a `mocks/` directory.
 
 ``` bash
 $ mkdir mocks
 ```
 
-<img class="code-marker" src="/assets/s.png" />Create a `mocks/create-event.json` file and add the following.
+{%change%} Create a `mocks/create-event.json` file and add the following.
 
 ``` json
 {
@@ -208,7 +208,7 @@ Make a note of the `noteId` in the response. We are going to use this newly crea
 
 Before we move on to the next chapter, let's quickly refactor the code since we are going to be doing much of the same for all of our APIs.
 
-<img class="code-marker" src="/assets/s.png" />Start by replacing our `create.js` with the following.
+{%change%} Start by replacing our `create.js` with the following.
 
 ``` javascript
 import * as uuid from "uuid";
@@ -251,14 +251,14 @@ This code doesn't work just yet but it shows you what we want to accomplish:
 
 To do all of this let's first create our `dynamodb-lib`.
 
-<img class="code-marker" src="/assets/s.png" />In our project root, create a `libs/` directory.
+{%change%} In our project root, create a `libs/` directory.
 
 ``` bash
 $ mkdir libs
 $ cd libs
 ```
 
-<img class="code-marker" src="/assets/s.png" />Create a `libs/dynamodb-lib.js` file with:
+{%change%} Create a `libs/dynamodb-lib.js` file with:
 
 ``` javascript
 import AWS from "aws-sdk";
@@ -276,7 +276,7 @@ export default {
 
 Here we are using the promise form of the DynamoDB methods. Promises are a method for managing asynchronous code that serve as an alternative to the standard callback function syntax. It will make our code a lot easier to read. And we are exposing the DynamoDB client methods that we are going to need in this guide.
 
-<img class="code-marker" src="/assets/s.png" />Also create a `libs/handler-lib.js` file with the following.
+{%change%} Also create a `libs/handler-lib.js` file with the following.
 
 ``` javascript
 export default function handler(lambda) {

diff --git a/_chapters/add-a-delete-note-api.md b/_chapters/add-a-delete-note-api.md
@@ -12,7 +12,7 @@ Finally, we are going to create an API that allows a user to delete a given note
 
 ### Add the Function
 
-<img class="code-marker" src="/assets/s.png" />Create a new file `delete.js` and paste the following code
+{%change%} Create a new file `delete.js` and paste the following code
 
 ``` javascript
 import handler from "./libs/handler-lib";
@@ -40,7 +40,7 @@ This makes a DynamoDB `delete` call with the `userId` & `noteId` key to delete t
 
 ### Configure the API Endpoint
 
-<img class="code-marker" src="/assets/s.png" />Open the `serverless.yml` file and append the following to it.
+{%change%} Open the `serverless.yml` file and append the following to it.
 
 ``` yaml
   delete:
@@ -60,7 +60,7 @@ This adds a DELETE request handler to the `/notes/{id}` endpoint.
 
 ### Test
 
-<img class="code-marker" src="/assets/s.png" />Create a `mocks/delete-event.json` file and add the following.
+{%change%} Create a `mocks/delete-event.json` file and add the following.
 
 Just like before we'll use the `noteId` of our note in place of the `id` in the `pathParameters` block.
 

diff --git a/_chapters/add-a-get-note-api.md b/_chapters/add-a-get-note-api.md
@@ -12,7 +12,7 @@ Now that we created a note and saved it to our database. Let's add an API to ret
 
 ### Add the Function
 
-<img class="code-marker" src="/assets/s.png" />Create a new file `get.js` and paste the following code
+{%change%} Create a new file `get.js` and paste the following code
 
 ``` javascript
 import handler from "./libs/handler-lib";
@@ -45,7 +45,7 @@ This follows exactly the same structure as our previous `create.js` function. Th
 
 ### Configure the API Endpoint
 
-<img class="code-marker" src="/assets/s.png" />Open the `serverless.yml` file and append the following to it.
+{%change%} Open the `serverless.yml` file and append the following to it.
 
 ``` yaml
   get:
@@ -69,7 +69,7 @@ This defines our get note API. It adds a GET request handler with the endpoint `
 
 To test our get note API we need to mock passing in the `noteId` parameter. We are going to use the `noteId` of the note we created in the previous chapter and add in a `pathParameters` block to our mock. So it should look similar to the one below. Replace the value of `id` with the id you received when you invoked the previous `create.js` function.
 
-<img class="code-marker" src="/assets/s.png" />Create a `mocks/get-event.json` file and add the following.
+{%change%} Create a `mocks/get-event.json` file and add the following.
 
 ``` json
 {

diff --git a/_chapters/add-a-list-all-the-notes-api.md b/_chapters/add-a-list-all-the-notes-api.md
@@ -12,7 +12,7 @@ Now we are going to add an API that returns a list of all the notes a user has.
 
 ### Add the Function
 
-<img class="code-marker" src="/assets/s.png" />Create a new file called `list.js` with the following.
+{%change%} Create a new file called `list.js` with the following.
 
 ``` javascript
 import handler from "./libs/handler-lib";
@@ -44,7 +44,7 @@ This is pretty much the same as our `get.js` except we only pass in the `userId`
 
 ### Configure the API Endpoint
 
-<img class="code-marker" src="/assets/s.png" />Open the `serverless.yml` file and append the following.
+{%change%} Open the `serverless.yml` file and append the following.
 
 ``` yaml
   list:
@@ -64,7 +64,7 @@ This defines the `/notes` endpoint that takes a GET request.
 
 ### Test
 
-<img class="code-marker" src="/assets/s.png" />Create a `mocks/list-event.json` file and add the following.
+{%change%} Create a `mocks/list-event.json` file and add the following.
 
 ``` json
 {

diff --git a/_chapters/add-an-update-note-api.md b/_chapters/add-an-update-note-api.md
@@ -12,7 +12,7 @@ Now let's create an API that allows a user to update a note with a new note obje
 
 ### Add the Function
 
-<img class="code-marker" src="/assets/s.png" />Create a new file `update.js` and paste the following code
+{%change%} Create a new file `update.js` and paste the following code
 
 ``` javascript
 import handler from "./libs/handler-lib";
@@ -52,7 +52,7 @@ This should look similar to the `create.js` function. Here we make an `update` D
 
 ### Configure the API Endpoint
 
-<img class="code-marker" src="/assets/s.png" />Open the `serverless.yml` file and append the following to it.
+{%change%} Open the `serverless.yml` file and append the following to it.
 
 ``` yaml
   update:
@@ -72,7 +72,7 @@ Here we are adding a handler for the PUT request to the `/notes/{id}` endpoint.
 
 ### Test
 
-<img class="code-marker" src="/assets/s.png" />Create a `mocks/update-event.json` file and add the following.
+{%change%} Create a `mocks/update-event.json` file and add the following.
 
 Also, don't forget to use the `noteId` of the note we have been using in place of the `id` in the `pathParameters` block.
 

diff --git a/_chapters/add-app-favicons.md b/_chapters/add-app-favicons.md
@@ -28,18 +28,18 @@ Once you upload your icon, it'll show you a preview of your icon on various plat
 
 This should generate your favicon package and the accompanying code.
 
-<img class="code-marker" src="/assets/s.png" />Click **Favicon package** to download the generated favicons. And copy all the files over to your `public/` directory.
+{%change%} Click **Favicon package** to download the generated favicons. And copy all the files over to your `public/` directory.
 
 ![Realfavicongenerator.net completed screenshot](/assets/realfavicongenerator-completed.png)
 
-<img class="code-marker" src="/assets/s.png" />Remove the `public/logo192.png` and `public/logo512.png` files.
+{%change%} Remove the `public/logo192.png` and `public/logo512.png` files.
 
 ``` bash
 $ rm public/logo192.png
 $ rm public/logo512.png
 ```
 
-<img class="code-marker" src="/assets/s.png" />Then replace the contents of `public/manifest.json` with the following:
+{%change%} Then replace the contents of `public/manifest.json` with the following:
 
 ``` json
 {
@@ -66,7 +66,7 @@ $ rm public/logo512.png
 
 To include a file from the `public/` directory in your HTML, Create React App needs the `%PUBLIC_URL%` prefix.
 
-<img class="code-marker" src="/assets/s.png" />Add this to your `public/index.html`.
+{%change%} Add this to your `public/index.html`.
 
 ``` html
 <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png">
@@ -77,7 +77,7 @@ To include a file from the `public/` directory in your HTML, Create React App ne
 <meta name="theme-color" content="#ffffff">
 ```
 
-<img class="code-marker" src="/assets/s.png" />And **remove** the following lines that reference the original favicon and theme color.
+{%change%} And **remove** the following lines that reference the original favicon and theme color.
 
 ``` html
 <meta name="theme-color" content="#000000">

diff --git a/_chapters/add-stripe-keys-to-config.md b/_chapters/add-stripe-keys-to-config.md
@@ -10,7 +10,7 @@ comments_id: add-stripe-keys-to-config/185
 
 Back in the [Setup a Stripe account]({% link _chapters/setup-a-stripe-account.md %}) chapter, we had two keys in the Stripe console. The **Secret key** that we used in the backend and the **Publishable key**. The **Publishable key** is meant to be used in the frontend.
 
-<img class="code-marker" src="/assets/s.png" />Add the following line to the `export` block of `src/config.js`.
+{%change%} Add the following line to the `export` block of `src/config.js`.
 
 ```
 STRIPE_KEY: "YOUR_STRIPE_PUBLIC_KEY",
@@ -20,15 +20,15 @@ Make sure to replace, `YOUR_STRIPE_PUBLIC_KEY` with the **Publishable key** from
 
 Let's also include Stripe.js in our HTML.
 
-<img class="code-marker" src="/assets/s.png" />Append the following to the `<head>` block in our `public/index.html`.
+{%change%} Append the following to the `<head>` block in our `public/index.html`.
 
 ``` html
 <script src="https://js.stripe.com/v3/"></script>
 ```
 
 And load the Stripe config in our settings page.
 
-<img class="code-marker" src="/assets/s.png" />Add the following at top of the `Settings` function in `src/containers/Settings.js`.
+{%change%} Add the following at top of the `Settings` function in `src/containers/Settings.js`.
 
 ``` javascript
 const [stripe, setStripe] = useState(null);

diff --git a/_chapters/add-the-create-note-page.md b/_chapters/add-the-create-note-page.md
@@ -14,7 +14,7 @@ First we are going to create the form for a note. It'll take some content and a
 
 ### Add the Container
 
-<img class="code-marker" src="/assets/s.png" />Create a new file `src/containers/NewNote.js` and add the following.
+{%change%} Create a new file `src/containers/NewNote.js` and add the following.
 
 ``` coffee
 import React, { useRef, useState } from "react";
@@ -91,13 +91,13 @@ file.current = event.target.files[0];
 
 Currently, our `handleSubmit` does not do a whole lot other than limiting the file size of our attachment. We are going to define this in our config.
 
-<img class="code-marker" src="/assets/s.png" />So add the following to our `src/config.js` below the `export default {` line.
+{%change%} So add the following to our `src/config.js` below the `export default {` line.
 
 ```
 MAX_ATTACHMENT_SIZE: 5000000,
 ```
 
-<img class="code-marker" src="/assets/s.png" />Let's also add the styles for our form in `src/containers/NewNote.css`.
+{%change%} Let's also add the styles for our form in `src/containers/NewNote.css`.
 
 ``` css
 .NewNote form {
@@ -112,15 +112,15 @@ MAX_ATTACHMENT_SIZE: 5000000,
 
 ### Add the Route
 
-<img class="code-marker" src="/assets/s.png" />Finally, add our container as a route in `src/Routes.js` below our signup route.
+{%change%} Finally, add our container as a route in `src/Routes.js` below our signup route.
 
 ``` coffee
 <Route exact path="/notes/new">
   <NewNote />
 </Route>
 ```
 
-<img class="code-marker" src="/assets/s.png" />And include our component in the header.
+{%change%} And include our component in the header.
 
 ``` javascript
 import NewNote from "./containers/NewNote";