Svelte SPA with Vite.js
[!TIP] To deploy this project using GUI-based flow, navigate to console
- simple Single Page Application built using Vue.js and Vite.js.
- The project uses a S3 storage bucket to store the application assets and a CDN to cache the content at the edge.
- This project includes a pre-configured stacktape.yml configuration. The configured infrastructure is described in the stack description section
Pricing
- The infrastructure required for this application uses exclusively "serverless", pay-per-use infrastructure. If your load won't get high, these costs will be close to $0.
Prerequisites
AWS account. If you don't have one, create new account here.
Stacktape account. If you don't have one, create new account here.
Stacktape installed.
Install on Windows (Powershell)
iwr https://installs.stacktape.com/windows.ps1 -useb | iex
Install on Linux
curl -L https://installs.stacktape.com/linux.sh | sh
Install on MacOS
curl -L https://installs.stacktape.com/macos.sh | sh
Install on MacOS ARM (Apple silicon)
curl -L https://installs.stacktape.com/macos-arm.sh | sh
1. Generate your project
To initialize the project, use
stacktape init --starterId svelte-spa-vitejs
2. Deploy your stack
The deployment will take ~5-15 minutes. Subsequent deploys will be significantly faster.
Deploy from local machine
The deployment from local machine will build and deploy the application from your system. This means you also need to have:
- Node.js installed.
To perform the deployment, use the following command:
stacktape deploy --stage <<stage>> --region <<region>>
stage is an arbitrary name of your environment (for example staging, production or dev-john)
region is the AWS region, where your stack will be deployed to. All the available regions are listed below.
| Region name & Location | code |
|---|---|
| Europe (Ireland) | eu-west-1 |
| Europe (London) | eu-west-2 |
| Europe (Frankfurt) | eu-central-1 |
| Europe (Milan) | eu-south-1 |
| Europe (Paris) | eu-west-3 |
| Europe (Stockholm) | eu-north-1 |
| US East (Ohio) | us-east-2 |
| US East (N. Virginia) | us-east-1 |
| US West (N. California) | us-west-1 |
| US West (Oregon) | us-west-2 |
| Canada (Central) | ca-central-1 |
| Africa (Cape Town) | af-south-1 |
| Asia Pacific (Hong Kong) | ap-east-1 |
| Asia Pacific (Mumbai) | ap-south-1 |
| Asia Pacific (Osaka-Local) | ap-northeast-3 |
| Asia Pacific (Seoul) | ap-northeast-2 |
| Asia Pacific (Singapore) | ap-southeast-1 |
| Asia Pacific (Sydney) | ap-southeast-2 |
| Asia Pacific (Tokyo) | ap-northeast-1 |
| China (Beijing) | cn-north-1 |
| China (Ningxia) | cn-northwest-1 |
| Middle East (Bahrain) | me-south-1 |
| South America (São Paulo) | sa-east-1 |
Deploy using AWS CodeBuild pipeline
Deployment using AWS CodeBuild will build and deploy your application inside AWS CodeBuild pipeline. To perform the deployment, use
stacktape codebuild:deploy --stage <<stage>> --region <<region>>
stage is an arbitrary name of your environment (for example staging, production or dev-john)
region is the AWS region, where your stack will be deployed to. All the available regions are listed below.
| Region name & Location | code |
|---|---|
| Europe (Ireland) | eu-west-1 |
| Europe (London) | eu-west-2 |
| Europe (Frankfurt) | eu-central-1 |
| Europe (Milan) | eu-south-1 |
| Europe (Paris) | eu-west-3 |
| Europe (Stockholm) | eu-north-1 |
| US East (Ohio) | us-east-2 |
| US East (N. Virginia) | us-east-1 |
| US West (N. California) | us-west-1 |
| US West (Oregon) | us-west-2 |
| Canada (Central) | ca-central-1 |
| Africa (Cape Town) | af-south-1 |
| Asia Pacific (Hong Kong) | ap-east-1 |
| Asia Pacific (Mumbai) | ap-south-1 |
| Asia Pacific (Osaka-Local) | ap-northeast-3 |
| Asia Pacific (Seoul) | ap-northeast-2 |
| Asia Pacific (Singapore) | ap-southeast-1 |
| Asia Pacific (Sydney) | ap-southeast-2 |
| Asia Pacific (Tokyo) | ap-northeast-1 |
| China (Beijing) | cn-north-1 |
| China (Ningxia) | cn-northwest-1 |
| Middle East (Bahrain) | me-south-1 |
| South America (São Paulo) | sa-east-1 |
Deploy using Github actions CI/CD pipeline
- If you don't have one, create a new repository at https://github.com/new
- Create Github repository secrets: https://docs.stacktape.com/user-guides/ci-cd/#2-create-github-repository-secrets
- Replace
<<stage>>and<<region>>in the .github/workflows/deploy.yml file. git init --initial-branch=maingit add .git commit -m "setup stacktape project"git remote add origin git@github.com:<<namespace-name>>/<<repo-name>>.gitgit push -u origin main- To monitor the deployment progress, navigate to your github project and select the Actions tab
stage is an arbitrary name of your environment (for example staging, production or dev-john)
region is the AWS region, where your stack will be deployed to. All the available regions are listed below.
| Region name & Location | code |
|---|---|
| Europe (Ireland) | eu-west-1 |
| Europe (London) | eu-west-2 |
| Europe (Frankfurt) | eu-central-1 |
| Europe (Milan) | eu-south-1 |
| Europe (Paris) | eu-west-3 |
| Europe (Stockholm) | eu-north-1 |
| US East (Ohio) | us-east-2 |
| US East (N. Virginia) | us-east-1 |
| US West (N. California) | us-west-1 |
| US West (Oregon) | us-west-2 |
| Canada (Central) | ca-central-1 |
| Africa (Cape Town) | af-south-1 |
| Asia Pacific (Hong Kong) | ap-east-1 |
| Asia Pacific (Mumbai) | ap-south-1 |
| Asia Pacific (Osaka-Local) | ap-northeast-3 |
| Asia Pacific (Seoul) | ap-northeast-2 |
| Asia Pacific (Singapore) | ap-southeast-1 |
| Asia Pacific (Sydney) | ap-southeast-2 |
| Asia Pacific (Tokyo) | ap-northeast-1 |
| China (Beijing) | cn-north-1 |
| China (Ningxia) | cn-northwest-1 |
| Middle East (Bahrain) | me-south-1 |
| South America (São Paulo) | sa-east-1 |
Deploy using Gitlab CI pipeline
- If you don't have one, create a new repository at https://gitlab.com/projects/new
- Create Gitlab repository secrets: https://docs.stacktape.com/user-guides/ci-cd/#2-create-gitlab-repository-secrets
- replace
<<stage>>and<<region>>in the .gitlab-ci.yml file. git init --initial-branch=maingit add .git commit -m "setup stacktape project"git remote add origin git@gitlab.com:<<namespace-name>>/<<repo-name>>.gitgit push -u origin mainTo monitor the deployment progress, navigate to your gitlab project and select CI/CD->jobs
stage is an arbitrary name of your environment (for example staging, production or dev-john)
region is the AWS region, where your stack will be deployed to. All the available regions are listed below.
| Region name & Location | code |
|---|---|
| Europe (Ireland) | eu-west-1 |
| Europe (London) | eu-west-2 |
| Europe (Frankfurt) | eu-central-1 |
| Europe (Milan) | eu-south-1 |
| Europe (Paris) | eu-west-3 |
| Europe (Stockholm) | eu-north-1 |
| US East (Ohio) | us-east-2 |
| US East (N. Virginia) | us-east-1 |
| US West (N. California) | us-west-1 |
| US West (Oregon) | us-west-2 |
| Canada (Central) | ca-central-1 |
| Africa (Cape Town) | af-south-1 |
| Asia Pacific (Hong Kong) | ap-east-1 |
| Asia Pacific (Mumbai) | ap-south-1 |
| Asia Pacific (Osaka-Local) | ap-northeast-3 |
| Asia Pacific (Seoul) | ap-northeast-2 |
| Asia Pacific (Singapore) | ap-southeast-1 |
| Asia Pacific (Sydney) | ap-southeast-2 |
| Asia Pacific (Tokyo) | ap-northeast-1 |
| China (Beijing) | cn-north-1 |
| China (Ningxia) | cn-northwest-1 |
| Middle East (Bahrain) | me-south-1 |
| South America (São Paulo) | sa-east-1 |
3. Test your application
After a successful deployment, some information about the stack will be printed to the terminal (URLs of the deployed services, links to logs, metrics, etc.).
- Explore the app by visiting webBucket -> cdnUrl. URL was printed into console after the deploy.
4. Hotswap deploys
Stacktape deployments use AWS CloudFormation under the hood. It brings a lot of guarantees and convenience, but can be slow for certain use-cases.
To speed up the deployment, you can use the
--hotSwapflag that avoids Cloudformation.Hotswap deployments work only for source code changes (for lambda function, containers and batch jobs) and for content uploads to buckets.
If the update deployment is not hot-swappable, Stacktape will automatically fall back to using a Cloudformation deployment.
stacktape deploy --hotSwap --stage <<stage>> --region <<region>>
5. Delete your stack
- If you no longer want to use your stack, you can delete it.
- Stacktape will automatically delete every infrastructure resource and deployment artifact associated with your stack.
stacktape delete --stage <<stage>> --region <<region>>
Stack description
Stacktape uses a simple stacktape.yml configuration file to describe infrastructure resources, packaging, deployment
pipeline and other aspects of your project.
You can deploy your project to multiple environments (stages) - for
example production, staging or dev-john. A stack is a running instance of an project. It consists of your application
code (if any) and the infrastructure resources required to run it.
The configuration for this project is described below.
1. Resources
- Every resource must have an arbitrary, alphanumeric name (A-z0-9).
- Stacktape resources consist of multiple underlying AWS or 3rd party resources.
1.1 Bucket
Hosting bucket contains the built Svelte Single-page application (SPA):
- The built app is automatically uploaded into the bucket as a part of the deployment process.
- CDN is automatically configured in front of the bucket to deliver your SPA across the world with minimal latency.
- To ensure that the CDN always serves the newest version of the app, CDN cache is automatically invalidated (flushed) after each deployment.
resources:
webBucket:
type: hosting-bucket
properties:
uploadDirectoryPath: ./dist
hostingContentType: single-page-app
2. Application build hook
To automatically build the application before each deployment, the stacktape configuration contains a hook.
Hooks specify the commands or scripts which are executed automatically before or after command is executed (i.e every time before the stack is deployed). You can specify reusable script in scripts section of config and reference it inside a hook or inline script/command information directly.
scripts:
build:
# or "yarn build"
executeCommand: npm run build
hooks:
beforeDeploy:
# build project before deploy
- executeNamedScript: build
Scripts specified in scripts section of config, can be run manually
anytime using stp script:run command.
