Skip to content

Commit

Permalink
Docs edits
Browse files Browse the repository at this point in the history
  • Loading branch information
jayair committed Mar 12, 2024
1 parent d1a4cbe commit ba1e3e4
Show file tree
Hide file tree
Showing 5 changed files with 30 additions and 35 deletions.
Binary file modified www/src/assets/docs/nextjs-app-in-the-sst-console.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
29 changes: 11 additions & 18 deletions www/src/content/docs/docs/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ description: Ion is a new deployment engine for SST.

import { Tabs, TabItem } from '@astrojs/starlight/components';

Ion is a new engine for deploying [SST](https://sst.dev) apps. It uses [Pulumi](https://www.pulumi.com) and [Terraform](https://www.terraform.io) as opposed to CDK and CloudFormation. It's currently in alpha.
Ion is a new engine for deploying [SST](https://sst.dev) apps. It uses [Pulumi](https://www.pulumi.com) and [Terraform](https://www.terraform.io), as opposed to CDK and CloudFormation.

:::tip
Ion is **currently in alpha**. We'll be sharing more details on how to migrate your existing SST apps soon.
Expand All @@ -15,12 +15,15 @@ Once Ion is stable, it’ll be released as SST v3. [Read the full announcement](

---

Aside from the underlying engine, there are a few differences between SST v2 and Ion.
Aside from the underlying engine, there are a couple of other differences between SST v2 and Ion.

- There are no _"stacks"_ or stack resource limits.
- There are no npm packages, just a CLI and the `sst.config.ts`.
- Resource _binding_ is now called _linking_ and works across cloud providers.
- The `bind` command has been merged into the `dev` command. You won't need to run both of them.

If you are new to SST, here's how it works.

---

SST is a framework that makes it easy to build modern full-stack applications on your own infrastructure.
Expand All @@ -29,8 +32,6 @@ SST is a framework that makes it easy to build modern full-stack applications on
Ion currently **supports Node.js** applications on **macOS, Linux, and WSL**. Support for other runtimes and OSes are on the roadmap.
:::

If you are new to SST, here's how it works.

---

## Frontend
Expand Down Expand Up @@ -112,11 +113,7 @@ You can check out the full list of components on the sidebar.

The above snippets are called **Components**. They are a way of defining the features of your application in code. You can define any feature of your application with them.

They create the necessary infrastructure in your account. AWS in the above examples, all without using the AWS Console.

:::tip
Ion currently supports AWS and Cloudflare.
:::
In the above examples, they create the necessary infrastructure in your AWS account. All without using the AWS Console.

Learn more about [Components](/docs/components/).

Expand All @@ -136,7 +133,7 @@ new sst.aws.Function("MyFunction", {
});
```
But with SST you can take it a step further and transform how the Function component creates its low level infrastructure. The Function component also creates an IAM Role. You can transform the IAM Role using the `transform` prop.
But with SST you can take it a step further and transform how the Function component creates its low level infrastructure. For example, the Function component also creates an IAM Role. You can transform the IAM Role using the `transform` prop.
```js {3-7} title="sst.config.ts"
new sst.aws.Function("MyFunction", {
Expand Down Expand Up @@ -176,7 +173,7 @@ Pulumi's [AWS Classic provider](https://www.pulumi.com/registry/packages/aws/) i

Once you've added a couple of features, SST can help you link them together. This is great because you **won't need to hardcode** anything in your app.

Let's say your app has a Next.js frontend and an S3 bucket for file uploads, you can `link` them together.
Let's say your app has a Next.js frontend and an S3 bucket for file uploads. You can `link` the bucket to your Next.js app.
```js title="sst.config.ts" {4}
const myBucket = new sst.aws.Bucket("MyBucket");
Expand Down Expand Up @@ -239,7 +236,7 @@ my-sst-app

## CLI

To make this all work, Ion comes with a CLI that you install globally.
To make this all work, Ion comes with a [CLI](/docs/reference/cli/) that you install globally.

```bash
curl -fsSL https://ion.sst.dev/install | bash
Expand All @@ -257,13 +254,13 @@ The CLI includes a `dev` command that starts a local development environment.
sst dev
```

It lets you make and test changes to your function live, without having to redeloy them.
It lets you make and test changes to your function live, without having to redeploy them.

:::tip
The `sst dev` command runs your functions _**live**_, letting you test changes to your functions in milliseconds. [Learn more](/docs/live/).
:::

You can also use this command to start your frontend locally, and it'll automatically link your frontend to your backend resources.
You can also use this command to start your frontend locally, and it'll automatically load your linked resources in your frontend's environment.

<Tabs>
<TabItem label="Next.js">
Expand Down Expand Up @@ -317,7 +314,3 @@ npx sst deploy --stage prod
Once your app is in production, you can use the [SST Console](/docs/console/) to monitor and manage your app — [**console.sst.dev**](https://console.sst.dev)

[![SST Console](../../../assets/docs/sst-console-logs.png)](https://console.sst.dev)

---

Next, you can get started with one of our quick starts, like [Next.js](/docs/starts/nextjs/).
16 changes: 9 additions & 7 deletions www/src/content/docs/docs/linking.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,15 @@ description: Link resources together and access them in a typesafe and secure wa

import { Tabs, TabItem } from '@astrojs/starlight/components';

Resource linking is a feature of SST that allows you to link resources together and access them in a typesafe and secure way. This is done by:
Resource linking is a feature of SST that allows you to link resources together and access them in a typesafe and secure way.

1. Create a resource that you want to linked. For example, a bucket.
1. Create a resource that you want to link to. For example, a bucket.

```js {6,11}
const myBucket = new sst.aws.Bucket("MyBucket");
```

2. Link it to a function or frontend, using the `link` prop.
2. Link it to your function or frontend, using the `link` prop.

<Tabs>
<TabItem label="Next.js">
Expand Down Expand Up @@ -82,11 +82,13 @@ Resource linking is a feature of SST that allows you to link resources together
</TabItem>
</Tabs>

---

#### Working locally

The above applies to your app deployed through `sst deploy`. However, to access linked resources locally you'll need to be running `sst dev`.
The above applies to your app deployed through `sst deploy`. To access linked resources locally you'll need to be running `sst dev`.
This applies to both the functions and the frontends.
For the fronteds, you'll need to wrap your frontend in the `sst dev` command.

<Tabs>
<TabItem label="Next.js">
Expand Down Expand Up @@ -139,7 +141,7 @@ The functions in SST are tree shaken and bundled using [esbuild](https://esbuild

#### Frontends

The frontends are not bundled by SST. Instead, when SST builds them, it injects the resource links into the `process.env` object using the prefix `SST_RESOURCE_`.
The frontends are not bundled by SST. Instead, when they are built, SST injects the resource links into the `process.env` object using the prefix `SST_RESOURCE_`.

This is why when you are running your frontend locally, it needs to be wrapped in the `sst dev` command.

Expand All @@ -153,4 +155,4 @@ When you run `sst dev` or `sst deploy`, SST generates the types to access the li
If your types are not automatically getting picked up, make sure there is a `sst.env.d.ts` file in your project root.
:::

This file is in turn linked using a `sst-env.d.ts` file. This file is automatically created next to the `tsconfig.json` when you initialize your SST app.
This file is referenced using a `sst-env.d.ts` in your project root. The `sst-env.d.ts` should be added when you initialize your app with `sst init`.
18 changes: 9 additions & 9 deletions www/src/content/docs/docs/live.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ title: Live
description: Make changes and test your functions in milliseconds.
---

Live is a feature of SST that lets you test changes made to your functions in milliseconds. Your changes work without having to redeploy. And while being invoked remotely.
Live is a feature of SST that lets you test changes made to your functions in milliseconds. Your changes work without having to redeploy. And they can be invoked remotely.

:::tip
By default, `sst dev` will run all the functions in your app _"live"_.
Expand All @@ -20,7 +20,7 @@ This setup of running your functions locally and proxying the results back allow

- Your changes are **reloaded in under 10ms**.
- You can set **breakpoints to debug** your function in your favorite IDE.
- Functions can be invoke remotely. For example, say `https://my-api.com/hello` is your API endpoint, hitting that will run the local version of that function.
- Functions can be invoke remotely. For example, say `https://my-api.com/hello` is your API endpoint. Hitting that will run the local version of that function.
- This applies to more than just APIs. Any cron job or async event that gets invoked remotely will also run your local function.
- It allows you to very easily debug and **test webhooks**, since you can just give the webhook your API endpoint.
- Supports all function triggers, there's no need to mock an event.
Expand All @@ -30,7 +30,7 @@ This setup of running your functions locally and proxying the results back allow

## How it works

On AWS Live uses [IoT over WebSocket](https://docs.aws.amazon.com/iot/latest/developerguide/protocols.html) to communicate between your local machine and the remote Lambda function.
On AWS, Live uses [IoT over WebSocket](https://docs.aws.amazon.com/iot/latest/developerguide/protocols.html) to communicate between your local machine and the remote Lambda function.

:::note
Every AWS account comes with a AWS IoT Core endpoint by default.
Expand All @@ -40,13 +40,13 @@ This is roughly what the flow looks like:

1. When you run `sst dev`, it deploys your app and replaces the Lambda functions with a _stub_ version.
2. It also starts up a local WebSocket client and connects to your AWS accounts' IoT endpoint.
3. Now, when a Lambda function in your app is invoked, it publishes an event, where the payload is the Lambda function request.
3. When a Lambda function in your app is invoked, it publishes an event, where the payload is the Lambda function request.
4. Your local WebSocket client receives this event. It publishes an event acknowledging that it received the request.
5. Next, it runs the local version of the function and publishes an event with the function response as the payload. The local version is run as a Node.js Worker.
6. Finally, the stub Lambda function receives the event and responds with the payload.

:::tip
The _stub_ function that's deployed uses a different runtime than the actual function. This is because it's used as a proxy and is optimized to reduce cold starts.
The _stub_ function that's deployed uses a different runtime than the actual function.
:::

---
Expand All @@ -71,7 +71,7 @@ export async function main(event) {

#### Connect to a local DB

You might have some resources that are only available locally. For example, a local database server (MySQL or PostgreSQL).
You might have some resources that are only available locally. For example, a local database server.

To connect to these, you can check the `SST_LIVE` environment variable.

Expand All @@ -89,7 +89,7 @@ AWS IoT that powers Live is **completely serverless**. So you don't get charged

It's also pretty cheap. With a free tier of 500k events per month and roughly $1.00 per million for the next billion messages. You can [check out the details here](https://aws.amazon.com/iot-core/pricing/).

As a result this approach has worked for large teams with dozens of developers.
This approach has been economical even for large teams with dozens of developers.

---

Expand All @@ -103,7 +103,7 @@ Live also supports connecting to AWS resources inside a VPC.

### Using a VPC

By default your local Lambda function cannot connect to resources in a VPC. You'll need to:
By default your local functions cannot connect to resources in a VPC. You'll need to:

1. Setup a VPN connection from your local machine to your VPC network. You can use the AWS Client VPN service to set it up. [Follow the Mutual authentication section in this doc](https://docs.aws.amazon.com/vpn/latest/clientvpn-admin/client-authentication.html#mutual) to setup the certificates and import them into your Amazon Certificate Manager.
2. Then [create a Client VPC Endpoint](https://aws.amazon.com/blogs/networking-and-content-delivery/introducing-aws-client-vpn-to-securely-access-aws-and-on-premises-resources/), and associate it with your VPC.
Expand All @@ -127,9 +127,9 @@ For VS Code, add the following Launch Configuration to `.vscode/launch.json`.
"name": "Debug SST Live",
"type": "node",
"request": "launch",
"runtimeArgs": ["dev"],
"console": "integratedTerminal",
"skipFiles": ["<node_internals>/**"],
"runtimeArgs": ["dev", "--increase-timeout"],
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/sst"
}
]
Expand Down
2 changes: 1 addition & 1 deletion www/src/content/docs/docs/start/nextjs.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,7 @@ And install the npm packages.
npm install sst@ion @aws-sdk/client-s3 @aws-sdk/s3-request-presigner
```

Head over to `http://localhost:3000` and try **uploading an image**, you should see it upload and then load the image.
Head over to `http://localhost:3000` and try **uploading an image**, you should see it upload and then download the image.

---

Expand Down

0 comments on commit ba1e3e4

Please sign in to comment.