Create a Static Website

Overview

In this tutorial we'll create a static website from a template. A static website consists of the following resources:

• A S3 bucket that hosts the site files.
• A CDN that efficiently distributes the files across the world, handles cache and more.

The template we'll use contains all the parts required and comes pre-configured with a demo website.

Things you'll need for this tutorial

1. An Altostra Account (Don't have one yet? Just login here)
2. A connected AWS cloud account ( Web Console settings or see docs)
3. An Environment connected to your AWS Account (Environment Settings or see docs) - We'll call it Dev for brevity, but you can pick any of your environments
4. Altostra CLI installed (npm i -g @altostra/cli or see docs)
5. Altostra extension for Visual Studio Code (VSCode Marketplace or see docs)

Create a new project

1. In your browser, brows to the Altostra Web Console
2. Click on Projects -> Create a new project
3. Name the new project and select static-website as the template
4. Click on Create

Deploy the Project

To deploy a project we need a version of it to deploy.
Luckily for us, when we create a project from template, Altostra creates the first version of that project for us.

To deploy the project:

1. Click on Deploy New Stack
2. Name your new stack
3. Select the target environment
4. Click deploy

Let's Test!

Deploying a CloudFront CDN distribution may take some time (up to half an hour).

While it is being deployed by AWS CloudFormation, we can click on Open in AWS to open the associated CloudFormation stack in the CloudFormation console.
There you can view the status of the stack and its resources, check the latest stack events and view various metadata.

Once the stack is deployed, in the Altostra Web Console, we can click on the Visit button to open a new tab with our new website.

Updating the project

In order to edit and update the project, you will need to clone it so we can edit it locally.

From the Project page you click on Clone to copy the git repository URL of the project. You can also click View Git Repository to open the project's repository in your Git provider website.

After cloning the project, you can open it in vscode.
You can edit the design using Altostra's vscode extension and you can add and edit files them as you would normally do with vscode.

When you deploy Altostra projects, you only create the infrastructure for that project - the content files are not automatically uploaded when you update them locally. This is intentional and is meant to separate the process of deploying the infrastructure from the process of updating any content.

The static-website template contains a project design with a Bucket and a CDN. In the designer you can click on the bucket resource to edit it - and you will that that bucket has its Files Location property points to the public directory in the root directory of the project.

In the public directory you can find an example static website - that is the website you browsed to when clicked on the Visit button in the previous section.

To upload and update the website content from you local directory, we will use the sync command:

alto sync static-website --all --public

This will upload all the files from the public directory to the bucket in our project. If we had more than one bucket in the project, the --all option would cause all of their content files to upload.

Note the use of the --public option: it makes the files uploaded to the bucket be set with public access permissions; without this, the files are not accessible without authentication and explicit permissions. The default for the command is to not set the files as public, for security reasons.

Invalidating the CDN

Since the infrastructure and the content files are deployed separately, you can easily upload new versions of the content files by running the sync command again.

But, at that point in time, the CDN might have already cached the existing versions of your files. To clear the CDN cache and allow it to fetch the new files, we use the invalidate command:

alto invalidate sampleDeployment --all

This will clear the cache for the CDN in our project. If we had more than one CDN in our project, the --all option would cause them all to invalidate their cache.