/instatam

Primary LanguageJavaScript

InstaTAM

## AssetBuildStack

A CloudFormation stack that sets up a CodeBuild Project. The project deploys a static SvelteKit build to a S3 Bucket. When new images are added to ouur images folder, S3 sends a notification to a Lambda function which starts the project build.

Creating the stack

aws cloudformation create-stack
--profile j4e
--stack-name instatam-asset-build-stack
--template-body file://asset-build-stack.json
--tags 'Key=project,Value=instatam'
--region=us-east-1
--capabilities CAPABILITY_IAM
--parameters ParameterKey=CodeBuildProjectGitUrl,ParameterValue=https://github.com/michrome/instatam
ParameterKey=CodeBuildProjectName,ParameterValue=InstaTAM
ParameterKey=DomainName,ParameterValue=instatam.click

### Deleteing the stack aws cloudformation delete-stack
--profile j4e
--stack-name instatam-asset-build-stack
--region=us-east-1

HostingStack

A CloudFormation stack that sets up a Cloudfront Distribution with Custom Domain with SSL that serves assets from a S3 Bucket.

Creating the stack

aws cloudformation create-stack
--profile j4e
--stack-name instatam-hosting-stack
--template-body file://hosting-stack.json
--tags 'Key=project,Value=instatam'
--region=us-east-1
--capabilities CAPABILITY_IAM
--parameters ParameterKey=AssetBuildStackName,ParameterValue=instatam-asset-build-stack

You must update the domain's DNS to point to the hosted zone to allow the certificate to provision

### Deleteing the stack aws cloudformation delete-stack
--profile j4e
--stack-name instatam-hosting-stack
--region=us-east-1

### Build environment variables

  • CANONICAL_BASE_URL e.g. https://example.com
  • S3 client region e.g. us-east-1 (can be obtained from the stack's AWS::Region pseudo parameter)
  • S3 bucket name
  • S3 origin path
  • images folder

create-svelte

Everything you need to build a Svelte project, powered by create-svelte.

Creating a project

If you're seeing this, you've probably already done this step. Congrats!

# create a new project in the current directory
npm init svelte@next

# create a new project in my-app
npm init svelte@next my-app

Note: the @next is temporary

Developing

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Building

To create a production version of your app:

npm run build

You can preview the production build with npm run preview.

To deploy your app, you may need to install an adapter for your target environment.