We created this tutorial to help you build your first app with SST.
We'll cover most of the key concepts of SST by working on an app. You'll get a feel for how SST works and we'll end by deploying the app to production!
Before you start, join our community on Discord. We are always around to answer any questions!
What are we building
The starter we'll be using creates a very simple Reddit clone called "Links". You can submit an article to it and it'll display all the articles that've been submitted.
We'll then walk through the process of adding a new feature. We'll allow our users to add comments for these links!
The source for the app we are builing is on GitHub for reference — github.com/serverless-stack/tutorial-links-app
Let's look at what we'll be covering.
What are we covering
We've structured this tutorial in a way that shows you what the development workflow looks like while working with SST. We start with setting up your local development environment and go all the way to "git push to deploy" in production.
This tutorial should take less than an hour. We recommend going through it once.
Here's roughly what we'll be covering in the next few chapters:
- Creating a new SST app
- Setting up your local dev environment
- Writing to a database
- Connecting it to your API
- Rendering it in the frontend
- Deploying to production
Watch this as a video
If you'd like, you can follow this tutorial as a video. We did a livestream where we worked through all the steps and talked about it in detail.
What is in the starter
Our Links app is based on a starter that we recommend for building full-stack serverless applications. At a very high level, we are using the following:
- SST's constructs to define our infrastructure
- PostgreSQL for our database
- GraphQL for the API
- React for our frontend
You might be curious why this is our stack of choice. We care deeply about helping you create a codebase that are flexible, maintainable, and a joy to work with.
SST's ideal user is a startup that's hoping to grow from a simple idea to a large enterprise. We want to pick technologies and methodologies that help with this.
Throughout this tutorial we'll try to highlight the thinking behind our choices.
We also use a couple of other notable open-source libraries in our setup.
- Kysely, a typesafe TypeScript SQL query builder
- Pothos, a typesafe TypeScript GraphQL schema builder
- Urql with Genql, a typesafe GraphQL client
- Vanilla Extract, a typesafe CSS-in-TS preprocessor
The starter we are using is in TypeScript and so is this tutorial. You might've guessed that we really care about typesafety!
End-to-end typesafety is one of the defining features of SST.
Everything from our frontend components, styles, backend, schema definitions, environment variables, and infrastructure is typesafe. It helps us prevent any mistakes, and allows our editors to autocomplete our code!
Aside from all the autocomplete goodness, typesafety ends up being critical for the maintainability of codebases. This matters if you are planning to work with the same codebase for years to come.
It should be easy for your team to come in and make changes to parts of your codebase that have not been worked on for a long time. TypeScript allows you to do this! Your codebase no longer feels brittle and you are not afraid to make changes.
TypeScript made easy
If you are not used to TypeScript, you might be wondering, "Don't I have to write all these extra types for things?" or "Doesn't TypeScript make my code really verbose and scary?".
Alright, we are ready to create our new project!