You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: _archives/deploying-a-react-app-to-netlify.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -11,7 +11,7 @@ redirect_from:
11
11
- /chapters/hosting-your-react-app.html
12
12
---
13
13
14
-
In this section we'll be looking at how to deploy your React.js app as a static website to [Netlify](https://www.netlify.com). You'll recall that in the [main part of the guide]({% link _chapters/create-a-new-reactjs-app.md %}) we used the SST [`ReactStaticSite`]({{ site.docs_url }}/constructs/ReactStaticSite) construct to deploy our React app to AWS.
14
+
In this section we'll be looking at how to deploy your React.js app as a static website to [Netlify](https://www.netlify.com). You'll recall that in the [main part of the guide]({% link _chapters/create-a-new-reactjs-app.md %}) we used the SST [`ReactStaticSite`]({{ site.v2_url }}/constructs/ReactStaticSite) construct to deploy our React app to AWS.
15
15
16
16
Netlify allows you to [host your React app for free](https://www.netlify.com/pricing/) and it allows your to `git push` to deploy your apps.
Here we are using the [`ReactStaticSite`]({{ site.docs_url }}/constructs/ReactStaticSite) construct. It allows us to set React environment variables from our API.
71
+
Here we are using the [`ReactStaticSite`]({{ site.v2_url }}/constructs/ReactStaticSite) construct. It allows us to set React environment variables from our API.
72
72
73
73
```typescript
74
74
environment: {
@@ -149,7 +149,7 @@ We need our React app to be deployed with our environment variables. SST uses [C
149
149
3. Replace the environment variables in our React app.
150
150
4. Deploy our React app to S3 and CloudFront.
151
151
152
-
[SST](/){:target="_blank"} and the [`ReactStaticSite`]({{ site.docs_url }}/constructs/ReactStaticSite){:target="_blank"} construct do this automatically for you.
152
+
[SST](/){:target="_blank"} and the [`ReactStaticSite`]({{ site.v2_url }}/constructs/ReactStaticSite){:target="_blank"} construct do this automatically for you.
153
153
154
154

Copy file name to clipboardExpand all lines: _archives/using-aws-cdk-with-serverless-framework.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -16,7 +16,7 @@ In this guide we've looked at two different ways of creating serverless applicat
16
16
As in, you can create your infrastructure with SST and manage your Lambda functions and APIs with Serverless Framework. There are a couple of reasons why you might find yourself wanting to do this.
17
17
18
18
1. Your applications are currently built using Serverless Framework and you want to use [AWS CDK]({% link _archives/what-is-aws-cdk.md %}) instead of [CloudFormation for your resources]({% link _archives/configure-dynamodb-in-serverless.md %}).
19
-
2. Or, you are looking to [migrate from Serverless Framework to SST]({{ site.docs_url }}/migrating-from-serverless-framework).
19
+
2. Or, you are looking to [migrate from Serverless Framework to SST]({{ site.v2_url }}/migrating-from-serverless-framework).
20
20
21
21
In this chapter we'll look at how we can use SST to define your infrastructure using CDK and connecting that to our Serverless Framework app.
This is using the SST [`Cognito`]({{ site.docs_url }}/constructs/Cognito) construct to create a Cognito User Pool and an Identity Pool.
61
+
This is using the SST [`Cognito`]({{ site.v2_url }}/constructs/Cognito) construct to create a Cognito User Pool and an Identity Pool.
62
62
63
63
#### Aliases
64
64
@@ -99,7 +99,7 @@ new Cognito(this, "Auth", {
99
99
100
100
#### Cognito Triggers
101
101
102
-
You also might want to trigger (before and after authentication) some actions. The [Cognito Triggers]({{ site.docs_url }}/constructs/Cognito#authuserpooltriggers) allow you to define Lambda functions that get executed for specific events.
102
+
You also might want to trigger (before and after authentication) some actions. The [Cognito Triggers]({{ site.v2_url }}/constructs/Cognito#authuserpooltriggers) allow you to define Lambda functions that get executed for specific events.
103
103
104
104
```js
105
105
newCognito(this, "Auth", {
@@ -114,7 +114,7 @@ new Cognito(this, "Auth", {
114
114
115
115
### Adding an API
116
116
117
-
Now let's look at how we can use Cognito to secure our API. In [`stacks/MyStack.js`]({{ repo_url }}/stacks/MyStack.js) of our example, you'll notice our SST [`Api`]({{ site.docs_url }}/constructs/Api) definition.
117
+
Now let's look at how we can use Cognito to secure our API. In [`stacks/MyStack.js`]({{ repo_url }}/stacks/MyStack.js) of our example, you'll notice our SST [`Api`]({{ site.v2_url }}/constructs/Api) definition.
118
118
119
119
```js
120
120
// Create an HTTP API
@@ -163,7 +163,7 @@ export async function handler() {
163
163
164
164
### Adding a React Static Site
165
165
166
-
We can now turn our attention to the frontend part of our application. In [`stacks/MyStack.js`]({{ repo_url }}/stacks/MyStack.js) take a look at the SST [`ReactStaticSite`]({{ site.docs_url }}/constructs/ReactStaticSite) definition.
166
+
We can now turn our attention to the frontend part of our application. In [`stacks/MyStack.js`]({{ repo_url }}/stacks/MyStack.js) take a look at the SST [`ReactStaticSite`]({{ site.v2_url }}/constructs/ReactStaticSite) definition.
167
167
168
168
```js
169
169
// Deploy our React app
@@ -555,7 +555,7 @@ Make sure to check out the rest of the [`frontend/src/App.js`]({{ repo_url }}/fr
555
555
556
556
### Testing our App
557
557
558
-
SST features a [Live Lambda Development]({{ site.docs_url }}/live-lambda-development) environment that allows you to work on your serverless apps live.
558
+
SST features a [Live Lambda Development]({{ site.v2_url }}/live-lambda-development) environment that allows you to work on your serverless apps live.
Copy file name to clipboardExpand all lines: _archives/what-is-aws-appsync.md
+2-2
Original file line number
Diff line number
Diff line change
@@ -110,11 +110,11 @@ Data sources in AWS AppSync are services, databases, or APIs that hold the data
110
110
111
111
There are just a handful of data sources that AWS AppSync supports, such as [Amazon DynamoDB](https://aws.amazon.com/dynamodb/), [AWS Lambda](https://aws.amazon.com/lambda/) (Lambda can allow you to use other options, such as RDS or ElastiCache), and [Amazon Elasticsearch Service](https://aws.amazon.com/elasticsearch-service/).
112
112
113
-
SST’s [`AppSyncApi` construct]({{ site.docs_url }}/constructs/AppSyncApi#examples) makes creating data sources a lot easier. We'll be looking at some examples of how to do this below.
113
+
SST’s [`AppSyncApi` construct]({{ site.v2_url }}/constructs/AppSyncApi#examples) makes creating data sources a lot easier. We'll be looking at some examples of how to do this below.
114
114
115
115
You’ll need data sources whenever you need to fetch and manipulate data. However, in some cases where you might only want to perform data transformation with resolvers and subscriptions to be invoked by a mutation, you might not need a data source.
116
116
117
-
Using the [SST `AppSyncApi`]({{ site.docs_url }}/constructs/AppSyncApi), you could add a data source to your GraphQL API easily without having to log in to your AWS console.
117
+
Using the [SST `AppSyncApi`]({{ site.v2_url }}/constructs/AppSyncApi), you could add a data source to your GraphQL API easily without having to log in to your AWS console.
- We are creating an API using SST's [`Api`]({{ site.ion_url }}/docs/component/apigatewayv2/){:target="_blank"} component. It creates an [Amazon API Gateway HTTP API](https://docs.aws.amazon.com/apigateway/latest/developerguide/http-api.html){:target="_blank"}.
38
+
- We are creating an API using SST's [`Api`]({{ site.sst_url }}/docs/component/apigatewayv2/){:target="_blank"} component. It creates an [Amazon API Gateway HTTP API](https://docs.aws.amazon.com/apigateway/latest/developerguide/http-api.html){:target="_blank"}.
39
39
40
-
- We are [linking]({{ site.ion_url }}/docs/linking/){:target="_blank"} our DynamoDB table to our API using the `link` prop. This will allow our API to access our table.
40
+
- We are [linking]({{ site.sst_url }}/docs/linking/){:target="_blank"} our DynamoDB table to our API using the `link` prop. This will allow our API to access our table.
41
41
42
42
- The first route we are adding to our API is the `POST /notes` route. It'll be used to create a note.
43
43
@@ -109,7 +109,7 @@ There are some helpful comments in the code but let's go over them quickly.
109
109
- Parse the input from the `event.body`. This represents the HTTP request body.
110
110
- It contains the contents of the note, as a string — `content`.
111
111
- It also contains an `attachment`, if one exists. It's the filename of a file that will be uploaded to [our S3 bucket]({% link _chapters/create-an-s3-bucket-in-sst.md %}).
112
-
- We can access our linked DynamoDB table through `Resource.Notes.name` using the [SST SDK]({{ site.ion_url }}/docs/reference/sdk/){:target="_blank"}. Here, `Notes` in `Resource.Notes`, is the name of our Table component from the [Create a DynamoDB Table in SST]({% link _chapters/create-a-dynamodb-table-in-sst.md %}) chapter. By doing `link: [table]` earlier in this chapter, we are allowing our API to access our table.
112
+
- We can access our linked DynamoDB table through `Resource.Notes.name` using the [SST SDK]({{ site.sst_url }}/docs/reference/sdk/){:target="_blank"}. Here, `Notes` in `Resource.Notes`, is the name of our Table component from the [Create a DynamoDB Table in SST]({% link _chapters/create-a-dynamodb-table-in-sst.md %}) chapter. By doing `link: [table]` earlier in this chapter, we are allowing our API to access our table.
113
113
- The `userId` is the id for the author of the note. For now we are hardcoding it to `123`. Later we'll be setting this based on the authenticated user.
114
114
- Make a call to DynamoDB to put a new object with a generated `noteId` and the current date as the `createdAt`.
115
115
- And if the DynamoDB call fails then return an error with the HTTP status code `500`.
So far we've created the [DynamoDB table]({% link _chapters/create-a-dynamodb-table-in-sst.md %}), [S3 bucket]({% link _chapters/create-an-s3-bucket-in-sst.md %}), and [API]({% link _chapters/add-an-api-to-create-a-note.md %}) parts of our serverless backend. Now let's add auth into the mix. As we talked about in the [previous chapter]({% link _chapters/auth-in-serverless-apps.md %}), we are going to use [Cognito User Pool](https://aws.amazon.com/cognito/){:target="_blank"} to manage user sign ups and logins. While we are going to use [Cognito Identity Pool](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-identity.html){:target="_blank"} to manage which resources our users have access to.
15
15
16
-
Setting this all up can be pretty complicated in Terraform. SST has simple [`CognitoUserPool`]({{ site.ion_url }}/docs/component/aws/cognito-user-pool/){:target="_blank"} and [`CognitoIdentityPool`]({{ site.ion_url }}/docs/component/aws/cognito-identity-pool/){:target="_blank"} components to help with this.
16
+
Setting this all up can be pretty complicated in Terraform. SST has simple [`CognitoUserPool`]({{ site.sst_url }}/docs/component/aws/cognito-user-pool/){:target="_blank"} and [`CognitoIdentityPool`]({{ site.sst_url }}/docs/component/aws/cognito-identity-pool/){:target="_blank"} components to help with this.
Copy file name to clipboardExpand all lines: _chapters/create-a-hello-world-api.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -63,7 +63,7 @@ Let's go ahead and deploy this.
63
63
64
64
### Start Your Dev Environment
65
65
66
-
We'll do this by starting up our local development environment. SST's dev environment runs your functions [Live]({{ site.ion_url }}/docs/live){:target="_blank"}. It allows you to work on your serverless apps live.
66
+
We'll do this by starting up our local development environment. SST's dev environment runs your functions [Live]({{ site.sst_url }}/docs/live){:target="_blank"}. It allows you to work on your serverless apps live.
Copy file name to clipboardExpand all lines: _chapters/create-a-new-reactjs-app.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -57,7 +57,7 @@ build: {
57
57
58
58
### Add the React App to SST
59
59
60
-
We are going to be deploying our React app to AWS. To do that we'll be using the SST [`StaticSite`]({{ site.ion_url }}/docs/component/aws/static-site/){:target="_blank"} component.
60
+
We are going to be deploying our React app to AWS. To do that we'll be using the SST [`StaticSite`]({{ site.sst_url }}/docs/component/aws/static-site/){:target="_blank"} component.
61
61
62
62
{%change%} Create a new file in `infra/web.ts` and add the following.
Copy file name to clipboardExpand all lines: _chapters/create-an-sst-app.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -74,7 +74,7 @@ export default $config({
74
74
To rename an app, you’ll need to remove the resources from the old one and deploy to the new one.
75
75
{%endcaution%}
76
76
77
-
The name of your app as you might recall is `notes`. A word of caution on IaC, if you rename your app after you deploy it, it doesn't rename the previously created resources in your app. You'll need to remove your old app and redeploy it again with the new name. To get a better sense of this, you can read more about the [SST workflow]({{ site.ion_url }}/docs/workflow){:target="_blank"}.
77
+
The name of your app as you might recall is `notes`. A word of caution on IaC, if you rename your app after you deploy it, it doesn't rename the previously created resources in your app. You'll need to remove your old app and redeploy it again with the new name. To get a better sense of this, you can read more about the [SST workflow]({{ site.sst_url }}/docs/workflow){:target="_blank"}.
Copy file name to clipboardExpand all lines: _chapters/creating-a-ci-cd-pipeline-for-serverless.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -44,7 +44,7 @@ Our workflow is fairly simple. But as your team grows, you'll need to add additi
44
44
45
45
There are many common CI/CD services, like [GitHub Actions](https://github.com/features/actions){:target="_blank"}, [Travis CI](https://travis-ci.org){:target="_blank"} or [CircleCI](https://circleci.com){:target="_blank"}. These usually require you to manually configure the above pipeline. It involves a fair bit of scripts and configuration.
46
46
47
-
SST makes this easier with the [SST Console]({{ site.ion_url }}/docs/console/){:target="_blank"}'s [Autodeploy](/docs/console/#autodeploy){:target="_blank"} feature. It also shows you all the resources in your app and allows you to monitor and debug them.
47
+
SST makes this easier with the [SST Console]({{ site.sst_url }}/docs/console/){:target="_blank"}'s [Autodeploy](/docs/console/#autodeploy){:target="_blank"} feature. It also shows you all the resources in your app and allows you to monitor and debug them.
48
48
49
49
We should mention that you don't have to use the SST Console. And this section is completely optional.
Copy file name to clipboardExpand all lines: _chapters/custom-domains-in-serverless-apis.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -23,7 +23,7 @@ This tells SST that we want to use a custom domain **if** we are deploying to th
23
23
24
24
We could for example, base it on the stage name, `api-${app.stage}.my-serverless-app.com`. So for `dev` it might be `api-dev.my-serverless-app.com`. But we'll leave that as an exercise for you.
25
25
26
-
The `$app` is a global variable that's available in our config. You can [learn more about it here]({{ site.ion_url }}/docs/reference/global/#app){:target="_blank"}.
26
+
The `$app` is a global variable that's available in our config. You can [learn more about it here]({{ site.sst_url }}/docs/reference/global/#app){:target="_blank"}.
Once you've completed the guide, you are probably going to use SST for your next project. To help you along the way we try to compile a list of docs that you can use as a reference. The following can be used to drill down in detail for some of the technologies and services used in this guide.
12
12
13
-
-[SST Documentation]({{ site.ion_url }}): Documentation for SST
13
+
-[SST Documentation]({{ site.sst_url }}/docs/): Documentation for SST
14
14
15
15
-[DynamoDB, explained](https://www.dynamodbguide.com): A Primer on the DynamoDB NoSQL database
16
16
@@ -26,6 +26,6 @@ Once you've completed the guide, you are probably going to use SST for your next
26
26
27
27
-[Vitest Docs](https://vitest.dev/guide/): The official Vitest docs
28
28
29
-
-[SST Console Docs]({{ site.ion_url }}/docs/console/): The SST Console docs
29
+
-[SST Console Docs]({{ site.sst_url }}/docs/console/): The SST Console docs
30
30
31
31
If you have found any other guides or tutorials helpful in building your serverless app, feel free to edit this page and submit a PR. Or you can let us know via the comments.
In the notes app we are building, users will be uploading files to the bucket we just created. And since our app will be served through our custom domain, it'll be communicating across domains while it does the uploads. By default, S3 does not allow its resources to be accessed from a different domain. However, [cross-origin resource sharing (CORS)](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing){:target="_blank"} defines a way for client web applications that are loaded in one domain to interact with resources in a different domain.
12
12
13
-
Similar to the [previous chapter]({% link _chapters/handle-cors-in-serverless-apis.md %}), the [`Bucket`]({{ site.ion_url }}/docs/component/aws/bucket/){:target="_blank"} component enables CORS by default.
13
+
Similar to the [previous chapter]({% link _chapters/handle-cors-in-serverless-apis.md %}), the [`Bucket`]({{ site.sst_url }}/docs/component/aws/bucket/){:target="_blank"} component enables CORS by default.
14
14
15
15
```ts
16
16
newsst.aws.Bucket("Uploads", {
@@ -19,7 +19,7 @@ new sst.aws.Bucket("Uploads", {
19
19
});
20
20
```
21
21
22
-
You can configure this further. [Read more about this here]({{ site.ion_url }}/docs/component/aws/bucket#cors){:target="_blank"}.
22
+
You can configure this further. [Read more about this here]({{ site.sst_url }}/docs/component/aws/bucket#cors){:target="_blank"}.
Copy file name to clipboardExpand all lines: _chapters/handle-cors-in-serverless-apis.md
+2-2
Original file line number
Diff line number
Diff line change
@@ -46,7 +46,7 @@ And our browser won't show us the HTTP response. This can make debugging our API
46
46
47
47
### CORS in API Gateway
48
48
49
-
The [`ApiGatewayV2`]({{ site.ion_url }}/docs/component/aws/apigatewayv2/){:target="_blank"} component that we are using enables CORS by default.
49
+
The [`ApiGatewayV2`]({{ site.sst_url }}/docs/component/aws/apigatewayv2/){:target="_blank"} component that we are using enables CORS by default.
50
50
51
51
```ts
52
52
newsst.aws.ApiGatewayV2("Api", {
@@ -55,7 +55,7 @@ new sst.aws.ApiGatewayV2("Api", {
55
55
});
56
56
```
57
57
58
-
You can further configure the specifics if necessary. You can [read more about this here]({{ site.ion_url }}/docs/component/aws/apigatewayv2#cors){:target="_blank"}.
58
+
You can further configure the specifics if necessary. You can [read more about this here]({{ site.sst_url }}/docs/component/aws/apigatewayv2#cors){:target="_blank"}.
0 commit comments