DEV Community

Ramu Narasinga
Ramu Narasinga

Posted on • Originally published at thinkthroo.com

`sst.config.ts` file in tldraw codebase.

#tldraw #opensource #aws #sst

In this article, we review sst.config.ts file in tldraw codebase. We will look at:

  1. What is SST?

  2. sst.config.ts in tldraw codebase.

I study patterns used in an open source project found on Github Trending. For this week, I reviewed Codebuff codebase and wrote this article.

What is SST?

SST is a framework that makes it easy to build modern full-stack applications on your own infrastructure.

SST supports over 150 providers. Check out the full list.

What makes SST different is that your entire app is defined in code — in a single sst.config.ts file. This includes databases, buckets, queues, Stripe webhooks, or any one of 150+ providers.

With SST, everything is automated. 

So how to get started?

You start by defining parts of your app, in code.

// sst.config.ts (Next.js)

// For example, you can add your frontend and set the domain you want to use.
new sst.aws.Nextjs("MyWeb", {
  domain: "my-app.com"
});

const cluster = new sst.aws.Cluster("MyCluster", { vpc });

new sst.aws.Service("MyService", {
  cluster,
  loadBalancer: {
    ports: [{ listen: "80/http" }]
  }
});
Enter fullscreen mode Exit fullscreen mode

The above 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.

In the above examples, they create the necessary infrastructure in your AWS account. All without using the AWS Console.

This above information is picked from SST documentation.

sst.config.ts in tldraw codebase.

Now that we understand the basics of SST, let’s see what sort of configuration tldraw codebase has.

In sst.config.ts, I mainly found the below configuration

Setting the domain: 

let domain = undefined as undefined | string
if (process.env.TLDRAW_ENV === 'preview' && previewId) {
 domain = `${previewId}.zero.tldraw.com`
} else if (isProduction) {
 domain = 'production.zero.tldraw.com'
} else if (process.env.TLDRAW_ENV === 'staging') {
 domain = 'staging.zero.tldraw.com'
}
Enter fullscreen mode Exit fullscreen mode

S3 Bucket 

// S3 Bucket
const replicationBucket = new sst.aws.Bucket(`replication-bucket`)
Enter fullscreen mode Exit fullscreen mode

VPC Configuration 

// VPC Configuration
const vpc = new sst.aws.Vpc(`vpc`, {
 az: 2,
})
Enter fullscreen mode Exit fullscreen mode

ECS Cluster 

// ECS Cluster
const cluster = new sst.aws.Cluster(`cluster`, {
 vpc,
})
Enter fullscreen mode Exit fullscreen mode

Replication Manager Service 

// Replication Manager Service
const replicationManager = cluster.addService(`replication-manager`, {
...
Enter fullscreen mode Exit fullscreen mode

View Syncer Service 

// View Syncer Service
const viewSyncer = cluster.addService(`view-syncer`, {
...
Enter fullscreen mode Exit fullscreen mode

Obviously, there are other things in this config file, such as env, defining command. Take a look at sst.config.ts.

About me:

Hey, my name is Ramu Narasinga. I study codebase architecture in large open-source projects.

Email: ramu.narasinga@gmail.com

Want to learn from open-source? Solve challenges inspired by open-source projects.

References:

  1. https://github.com/tldraw/tldraw/blob/main/sst.config.ts

  2. https://github.com/search?q=repo%3Atldraw%2Ftldraw+sst&type=code

  3. https://www.npmjs.com/package/sst

  4. https://github.com/sst/sst

Top comments (0)