Skip to main content

Create a Standalone SST App

Take SST for a spin and create your first project.


Prerequisites

You'll need at least Node.js 18 and npm 7. You also need to have an AWS account and AWS credentials configured locally.

tip

If you are new to SST, we recommend you start with our latest version instead. Learn more about SST v3.


1. Create a new app

Create a new SST app.

npx create-sst@two my-sst-app

Start your local dev environment.

npx sst dev

This will give you an API endpoint like — https://m69caok4q0.execute-api.us-east-1.amazonaws.com.


2. Edit the API

Let's make a change to our API. Replace the following in packages/functions/src/lambda.ts.

packages/functions/src/lambda.ts
export const handler = ApiHandler(async (_evt) => {
return {
- body: `Hello world. The time is ${new Date().toISOString()}`,
+ statusCode: 200,
+ body: `Hi from SST ${new Date().toISOString()}`,
};
});

Now if you hit your API again, you should see the new message!


3. Add a frontend

Let's now add a frontend to our app.


Create a new Vite React app

Run the following in packages/ and name your project web.

npm create vite@latest

Add it to your stacks and link the API to it.

stacks/MyStack.ts
const web = new StaticSite(stack, "web", {
path: "packages/web",
buildOutput: "dist",
buildCommand: "npm run build",
environment: {
VITE_APP_API_URL: api.url,
},
});

Call your API

Start Vite locally and bind SST to it by running in packages/web.

npx sst bind vite

Make a call to the API in your React app. Replace the App component in src/App.tsx.

packages/web/src/App.tsx
function App() {
const [message, setMessage] = useState("Hi 👋");

function onClick() {
fetch(import.meta.env.VITE_APP_API_URL)
.then((response) => response.text())
.then(setMessage);
}

return (
<div className="App">
<div className="card">
<button onClick={onClick}>
Message is "<i>{message}</i>"
</button>
</div>
</div>
);
}

4. Deploy to prod

Let's end with deploying our app to production.

npx sst deploy --stage prod
info

View the source for this example on GitHub.


5. Manage in prod

You can use the SST Console to view logs and issues in prod. Create a free account and connect it to AWS.

SST app in the SST Console


Next steps

  1. Learn more about SST
  2. Ready to dive into the details of SST? Check out our guide.