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

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.

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()

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:

npx sst dev

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

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.

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:

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. I mostly engage with the serverless community and post pictures of my pets.

Elva is a serverless-first consulting company that can help you transform or begin your AWS journey for the future