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.