# Get your idea deployed to prod already

You know that nifty idea you've been thinking about? The website that would revolutionize how you rule a small country/go grocery shopping? Whatever your idea is you can't share it with anyone because it's still in your head. It's time to do something about it. Take 15 minutes and get it deployed serverlessly and forever hanging over your head as something you "should finish some time".

For this tutorial you need:

* an AWS account
    
* AWS credentials configured correctly
    
* node.js 16
    
* npm 7
    

We'll start with creating a project with [SST](https://docs.sst.dev/). A very neat thing with SST is that you can choose your preferred frontend framework to go with it. (If you already have a frontend repository set up for your idea you can install SST in "drop-in mode"). For this tutorial I'm creating a basic standalone React + Vite app.

<div data-node-type="callout">
<div data-node-type="callout-emoji">⚖</div>
<div data-node-type="callout-text">You can read more about how SST compares to other AWS frameworks in Sebastian Bille's post <a target="_blank" rel="noopener noreferrer nofollow" href="https://blog.elva-group.com/serverless-frameworks-for-2023#heading-sst" style="pointer-events: none">here</a>.</div>
</div>

```bash
npx create-sst@latest my-great-project
cd my-great-project
npm install
```

Then you can go ahead and open it in your editor of choice.

```bash
cd packages
npm create vite@latest
```

When asked about the name of the project, call it "web". This creates the basic website in the `packages/web` folder. Now we need to add a construct for the site in your stack. Open `stacks/MyStack.ts` and add the StaticSite construct beneath the `bus.subscribe()`

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

stack.addOutputs({
  ApiEndpoint: api.url,
  CloudfrontUrl: web.url
});
```

It's time to start Vite locally together with the resources set up in your stack. In your root directory run this:

```bash
npx sst dev
```

After it has finished bootstrapping and deploying, open another terminal and run this:

```bash
cd packages/web
npm i
npx sst bind vite
```

And now you're ready to develop your website as you see wish. Change the color of the background or add a div with a funky quote or something. Next up is deploying this.

It's super simple.

```bash
npx sst deploy --stage prod
```

That's about it.

Considering you bought the domain for the page years ago when you first had the idea it's time to put it in use. Either transfer ownership of the domain over to this AWS account or create a Hosted Zone in Route 53 with the domain. Then when it's ready just modify the Site construct like this:

```typescript
const web = new StaticSite(stack, "web", {
  path: "packages/web",
  buildOutput: "dist",
  buildCommand: "npm run build",
  customDomain: {
    domainName: 'verycoolwebsite.com',
    domainAlias: 'www.verycoolwebsite.com'
  },
  environment: {
    VITE_APP_API_URL: api.url,
  },
});

stack.addOutputs({
  ApiEndpoint: api.url,
  CloudfrontUrl: web.url,
  CustomDomain: web.customDomainUrl
});
```

Deploy and check out your site. Send it to all your friends! At least you have a nice-looking url.

---

If you enjoyed this post you could follow me on 𝕏 at [@Paliago](https://twitter.com/PaliagoAlvin). I mostly engage with the serverless community and post pictures of my pets.

---

%%[leadfeeder] [Elva](https://elva-group.com) is a serverless-first consulting company that can help you transform or begin your AWS journey for the future