Pulumi Blog: Static websites

Introducing the Azure Static Website Component

Sean Holung — Tue, 11 Oct 2022 00:00:00 +0000

Deploying a static website often involves provisioning a number of pieces of infrastructure and stitching those pieces together in a way to make the site accessible to your users. A static website typically consists of HTML, CSS, and JavaScript files along with any other static assets the site might need to render such as PNG and SVG files for example. These files are then uploaded to a storage bucket where they can be served from. This post will demonstrate how to easily deploy your static website to Azure and make it available for public access.

Azure Static Website Component

Pulumi components enable us to create re-usable abstractions that can perform complex tasks all behind a simple interface the user can programmatically interact with. The Azure Static Website component looks to take all of the complexity of getting a static website deployed to Azure and simplify it down to just consuming a simple component and passing it a few input arguments. This component relieves the complexities of this process by allowing you to simply tell the component where your files are located and it will take care of all the rest.

This component does the following:

Provisions an Azure storage account
Uploads the website contents located in the specified directory
Optionally can configure a CDN, custom domain, and certs.

Using the component to deploy a static website

Let’s walk through a simple example of using this component to deploy a static website. Today, we are going to provision a storage account, upload the website contents, and wire it up to an Azure CDN.

In order to follow along with this example you will need to have the following:

Pulumi CLI installed on your machine
Access to an Azure account to provision the infrastructure
Static site to upload

See our getting started guide for information on how to configure Pulumi and Azure.

We will provision a number of pieces of infrastructure in Azure to enable serving our static website. The main ones are a Storage Account to contain all of our website files and a CDN. Let’s start by creating a new Pulumi project. First, create a new directory on your machine where the Pulumi project will live. A common pattern is to include the infrastructure configuration in a directory alongside the website you will be deploying. You can create a directory called infrastructure to house the Pulumi program or you can use another name if you prefer. This allows us to easily reference the location of the contents of your site as well as keeps your infrastructure code along-side your application. Pulumi supports multiple programming languages such as TypeScript, Python, Go, .NET, and even markup languages like YAML. Once you have created the directory, run the following command for your language of choice inside the directory:

pulumi new azure-typescript

pulumi new azure-python

pulumi new azure-csharp

pulumi new azure-go

pulumi new azure-yaml

There will be some prompts that appear asking you a few questions. Feel free to accept the defaults or change them to your desired preference. This command generated a new project and created a few files for you. You can copy the code examples below for the language you chose to use.

import * as pulumi from "@pulumi/pulumi";
import * as website from "@pulumi/azure-static-website";

const site = new website.Website("site", {
 sitePath: "../site", // replace with path containing website contents
 withCDN: true,
});

export const cdnURL = site;

import pulumi
import pulumi_azure_static_website as azure_static_website

site = azure_static_website.Website("site",
 site_path="../site", # replace with path containing website contents
 with_cdn=True)
pulumi.export("cdnURL", site.cdn_url)

using System.Collections.Generic;
using Pulumi;
using AzureStaticWebsite = Pulumi.AzureStaticWebsite;

return await Deployment.RunAsync(() =>
{
 var web = new AzureStaticWebsite.Website("web", new()
 {
 WithCDN = true,
 SitePath = "../site", // replace with path containing website contents
 });

 return new Dictionary<string, object?>
 {
 ["websiteURL"] = web.CdnURL,
 };
});

package main

import (
 "github.com/pulumi/pulumi-azure-static-website/sdk/go/azure-static-website"
 "github.com/pulumi/pulumi/sdk/v3/go/pulumi"
)

func main() {
 pulumi.Run(func(ctx *pulumi.Context) error {
 web, err := azure - static - website.NewWebsite(ctx, "web", &azure-static-website.WebsiteArgs{
 WithCDN: pulumi.Bool(true),
 SitePath: pulumi.String("../site"), // replace with path containing website contents
 })
 if err != nil {
 return err
 }
 ctx.Export("websiteURL", web.CdnURL)
 return nil
 })
}

name: az-website
runtime: yaml
description: A static website build with pulumi-azure-static-website.
resources:
 web:
 type: "azure-static-website:index:Website"
 properties:
 withCDN: true
 sitePath: "../site"
outputs:
 websiteURL: ${web.cdnURL}

This code creates a new instance of the Website component and sets a couple of properties. sitePath is the location where your website contents live. The sitePath specified should be the output location of your website’s build not the overall directory where your application lives. For example, if using a framework like React, the build output is usually placed in a directory called build. In addition, we set withCDN to true to let the component know that you would like to provision a CDN as well. It also exports the cdnURL property, which is the URL where the site can be accessed. That’s all that is needed and now we are ready to deploy!

You can now run pulumi up to deploy the site to Azure. This will first show a preview of the resources that will be provisioned. You can go ahead and accept by selecting yes.

In a few minutes your site will be provisioned and ready to access. Use the cdnURL that was output at the end of the provisioning to access the site!

As you can see, the Azure static website component made this task very easy. With just a few lines of code we were able to provision our site.

If you would like to learn more about Pulumi, here are some links you may find interesting:

Visit our Getting Started to quickly get up and running with Pulumi.
View the GitHub repo for the Azure static website component.
Visit our registry page to more components we have available for you to consume.
Check out our new templates that make it quick and easy to deploy common cloud architectures.

I'll just update the bucket object. What could go wrong?

Zack Chase — Mon, 12 Sep 2022 08:33:30 -0700

Creating a website on AWS with an S3 bucket is a fairly straightforward task. You just need to create an S3 bucket, configure it to be a website, and add your content, right?

Unfortunately getting your content into a bucket is only a part of the story. To get your website ready to handle traffic, you will want to associate a domain name and likely want to use a CDN, like Cloudfront, to help with performance. The AWS Static Website Package makes it easy for you to associate a domain and stand up a CDN with only a few arguments.

name: atomic-bucket-blog-yaml
description: An AWS Pulumi YAML program for provisioning a static website.
runtime: yaml
resources:
 web:
 type: "aws-static-website:index:Website"
 properties:
 sitePath: "./build"
outputs:
 websiteURL: ${web.websiteURL}

import * as pulumi from "@pulumi/pulumi";
import * as awsStaticWebsite from "@pulumi/aws-static-website";

const web = new awsStaticWebsite.Website("web", {
 sitePath: "./build"
});

export const websiteURL = web.websiteURL;

import pulumi
import pulumi_aws_static_website as aws_static_website

web = aws_static_website.Website("web", site_path="./build")

pulumi.export("websiteURL", web.website_url)

package main

import (
 website "github.com/pulumi/pulumi-aws-static-website/sdk/go/aws-static-website"
 "github.com/pulumi/pulumi/sdk/v3/go/pulumi"
)

func main() {
 pulumi.Run(func(ctx *pulumi.Context) error {
 web, err := website.NewWebsite(ctx, "web", &website.WebsiteArgs{
 SitePath: pulumi.String("./build"),
 })
 if err != nil {
 return err
 }
 ctx.Export("websiteURL", web.WebsiteURL)
 return nil
 })
}

using System.Collections.Generic;
using Pulumi;
using AwsStaticWebsite = Pulumi.AwsStaticWebsite;

return await Deployment.RunAsync(() =>
{
 var web = new AwsStaticWebsite.Website("web", new()
 {
 SitePath = "./build",
 });

 return new Dictionary<string, object?>
 {
 ["websiteURL"] = web.WebsiteURL,
 };
});

The only problem? Now you have to deal with keeping your content up to date without interrupting your website’s user experience.

So what’s the problem?

When your website is still fairly small in size, updating the bucket objects in place probably seems like a decent strategy for updating your static website. Unfortunately updating the objects in place has a few rough edges that could lead to a degraded user experience.

First and foremost (in my opinion) is that you are introducing a chance for assets to not be available when the page needs them. For example, if an HTML page is updated with new CSS classes before the CSS itself is updated, then the website could have bad styling until the new CSS file is available.

Having a CDN to cache your content is helpful in mitigating deploy time issues, but it doesn’t eliminate them entirely. Different objects can have different expiration times, so you still risk an asset not being available if a cached paged is requesting an object that has expired.

Versioning your website

To eliminate all the potential issues that could go wrong with an in-place update, you can version your website to ensure all your assets and dependencies are present and the cache behaves in the way you intend. While that may seem complicated, the AWS Static Website Package makes it simple for you to enable website versioning.

Atomic Deployments

The first step for versioning is that you are going to need to build a new S3 Bucket on every deployment. You want to do this because it ensures all the assets and dependencies are present in the bucket before you associate it with your Cloudfront CDN.

To accomplish this with the AWS Static Website Package all you need to do is set the Atomic Deployment argument to true.

name: atomic-bucket-blog-yaml
description: An AWS Pulumi YAML program for provisioning a static website.
runtime: yaml
resources:
 web:
 type: "aws-static-website:index:Website"
 properties:
 sitePath: "./build"
 atomicDeployments: true
outputs:
 websiteURL: ${web.websiteURL}

import * as pulumi from "@pulumi/pulumi";
import * as awsStaticWebsite from "@pulumi/aws-static-website";

const web = new awsStaticWebsite.Website("web", {
 sitePath: "./build",
 atomicDeployments: true,
});

export const websiteURL = web.websiteURL;

import pulumi
import pulumi_aws_static_website as aws_static_website

web = aws_static_website.Website("web",
 site_path="./build",
 atomic_deployments=True)

pulumi.export("websiteURL", web.website_url)

package main

import (
 website "github.com/pulumi/pulumi-aws-static-website/sdk/go/aws-static-website"
 "github.com/pulumi/pulumi/sdk/v3/go/pulumi"
)

func main() {
 pulumi.Run(func(ctx *pulumi.Context) error {
 web, err := website.NewWebsite(ctx, "web", &website.WebsiteArgs{
 SitePath: pulumi.String("./build"),
 AtomicDeployments: pulumi.Bool(true),
 })
 if err != nil {
 return err
 }
 ctx.Export("websiteURL", web.WebsiteURL)
 return nil
 })
}

using System.Collections.Generic;
using Pulumi;
using AwsStaticWebsite = Pulumi.AwsStaticWebsite;

return await Deployment.RunAsync(() =>
{
 var web = new AwsStaticWebsite.Website("web", new()
 {
 SitePath = "./build",
 AtomicDeployments = true,
 });

 return new Dictionary<string, object?>
 {
 ["websiteURL"] = web.WebsiteURL,
 };
});

With atomic deployments enabled a new bucket will be provisioned, your content is added via a sync command, and finally once your new bucket is built the old bucket is deleted.

Rollback

The AWS Static Website Package currently does not support rollbacks but if you export the name of the bucket on your stack then the Package will keep the previous bucket provision until the next update. This allows manual rollbacks to previous bucket versions if you encounter a post-deployment error. See the example code below for how to enable this feature exactly.

name: atomic-bucket-blog-yaml
description: An AWS Pulumi YAML program for provisioning a static website.
runtime: yaml
resources:
 web:
 type: "aws-static-website:index:Website"
 properties:
 sitePath: "./build"
 atomicDeployments: true
outputs:
 websiteURL: ${web.websiteURL}
 bucketName: ${web.bucketName}

import * as pulumi from "@pulumi/pulumi";
import * as aws_static_website from "@pulumi/aws-static-website";

const web = new aws_static_website.Website("web", {
 sitePath: "./build",
 atomicDeployments: true,
});

export const websiteURL = web.websiteURL;
export const bucketName = web.bucketName;

import pulumi
import pulumi_aws_static_website as aws_static_website

web = aws_static_website.Website("web",
 site_path="./build",
 atomic_deployments=True)

pulumi.export("websiteURL", web.website_url)
pulumi.export("bucketName", web.bucket_name)

package main

import (
 website "github.com/pulumi/pulumi-aws-static-website/sdk/go/aws-static-website"
 "github.com/pulumi/pulumi/sdk/v3/go/pulumi"
)

func main() {
 pulumi.Run(func(ctx *pulumi.Context) error {
 web, err := website.NewWebsite(ctx, "web", &website.WebsiteArgs{
 SitePath: pulumi.String("./build"),
 AtomicDeployments: pulumi.Bool(true),
 })
 if err != nil {
 return err
 }
 ctx.Export("websiteURL", web.WebsiteURL)
 ctx.Export("bucketName", web.BucketName)
 return nil
 })
}

using System.Collections.Generic;
using Pulumi;
using AwsStaticWebsite = Pulumi.AwsStaticWebsite;

return await Deployment.RunAsync(() =>
{
 var web = new AwsStaticWebsite.Website("web", new()
 {
 SitePath = "./build",
 AtomicDeployments = true,
 });

 return new Dictionary<string, object?>
 {
 ["websiteURL"] = web.WebsiteURL,
 ["bucketName"] = web.BucketName,
 };
});

Cache Control

Now that your website has atomic deployments enabled and you have solved the issue where your assets and dependencies might not be available, you still have to tackle the beast that is your CDN cache. You will need a way to tell the CDN that there is new content and to stop serving the old content.

You could just rely on the cached content expiring but as stated earlier that can still lead in some cases to missing assets. The AWS Static Website Package handles communicating to the CDN that there is new content by provisioning a Cloudfront Function that adds a unique build identifier to the CDN’s cache key.

function handler(event){
 var request = event.request;
 request.headers["website-version"] = {
 value: "${buildIdentifier}",
 };
 return request;
}

To enable this behavior you simply need to set the cache control header argument to true.

name: atomic-bucket-blog-yaml
description: An AWS Pulumi YAML program for provisioning a static website.
runtime: yaml
resources:
 web:
 type: "aws-static-website:index:Website"
 properties:
 sitePath: "./build"
 withCDN: true
 addWebsiteVersionHeader: true
outputs:
 websiteURL: ${web.websiteURL}

import * as pulumi from "@pulumi/pulumi";
import * as aws_static_website from "@pulumi/aws-static-website";

const web = new aws_static_website.Website("web", {
 sitePath: "./build",
 withCDN: true,
 addWebsiteVersionHeader: true,
});

export const websiteURL = web.websiteURL;

import pulumi
import pulumi_aws_static_website as aws_static_website

web = aws_static_website.Website("web",
 site_path="./build",
 with_cdn=True,
 add_website_version_header=True)

pulumi.export("websiteURL", web.website_url)

package main

import (
 website "github.com/pulumi/pulumi-aws-static-website/sdk/go/aws-static-website"
 "github.com/pulumi/pulumi/sdk/v3/go/pulumi"
)

func main() {
 pulumi.Run(func(ctx *pulumi.Context) error {
 web, err := website.NewWebsite(ctx, "web", &website.WebsiteArgs{
 SitePath: pulumi.String("./build"),
 WithCDN: pulumi.Bool(true),
 AddWebsiteVersionHeader: pulumi.Bool(true),
 })
 if err != nil {
 return err
 }
 ctx.Export("websiteURL", web.WebsiteURL)
 return nil
 })
}

using System.Collections.Generic;
using Pulumi;
using AwsStaticWebsite = Pulumi.AwsStaticWebsite;

return await Deployment.RunAsync(() =>
{
 var web = new AwsStaticWebsite.Website("web", new()
 {
 SitePath = "./build",
 WithCDN = true,
 AddWebsiteVersionHeader = true,
 });

 return new Dictionary<string, object?>
 {
 ["websiteURL"] = web.WebsiteURL,
 };
});

Putting it all together

Below you will find a full Pulumi program that atomically deploys your website, keeps the cache up to date, and allows for you to do manual rollbacks.

name: atomic-bucket-blog-yaml
description: An AWS Pulumi YAML program for provisioning a static website.
runtime: yaml
resources:
 web:
 type: "aws-static-website:index:Website"
 properties:
 sitePath: "./build"
 withCDN: true
 atomicDeployments: true
 addWebsiteVersionHeader: true
outputs:
 websiteURL: ${web.websiteURL}
 bucketName: ${web.bucketName}

import * as pulumi from "@pulumi/pulumi";
import * as aws_static_website from "@pulumi/aws-static-website";

const web = new aws_static_website.Website("web", {
 sitePath: "./build",
 withCDN: true,
 atomicDeployments: true,
 addWebsiteVersionHeader: true,
});

export const websiteURL = web.websiteURL;
export const bucketName = web.bucketName;

import pulumi
import pulumi_aws_static_website as aws_static_website

web = aws_static_website.Website("web",
 site_path="./build",
 with_cdn=True,
 atomic_deployments=True,
 add_website_version_header=True)

pulumi.export("websiteURL", web.website_url)
pulumi.export("bucketName", web.bucket_name)

package main

import (
 website "github.com/pulumi/pulumi-aws-static-website/sdk/go/aws-static-website"
 "github.com/pulumi/pulumi/sdk/v3/go/pulumi"
)

func main() {
 pulumi.Run(func(ctx *pulumi.Context) error {
 web, err := website.NewWebsite(ctx, "web", &website.WebsiteArgs{
 SitePath: pulumi.String("./build"),
 WithCDN: pulumi.bool(true),
 AtomicDeployments: pulumi.Bool(true),
 AddWebsiteVersionHeader: pulumi.Bool(true),
 })
 if err != nil {
 return err
 }
 ctx.Export("websiteURL", web.WebsiteURL)
 ctx.Export("bucketName", web.BucketName)
 return nil
 })
}

using System.Collections.Generic;
using Pulumi;
using AwsStaticWebsite = Pulumi.AwsStaticWebsite;

return await Deployment.RunAsync(() =>
{
 var web = new AwsStaticWebsite.Website("web", new()
 {
 SitePath = "./build",
 WithCDN = true,
 AtomicDeployments = true,
 AddWebsiteVersionHeader = true,
 });

 return new Dictionary<string, object?>
 {
 ["websiteURL"] = web.WebsiteURL,
 ["bucketName"] = web.BucketName,
 };
});

Now when you run a pulumi up you will provision a new bucket, sync your content, associate the bucket to your CDN, update the Cloudfront Function so the CDN knows to fetch new content, and lastly keep your previous bucket around in case you need to rollback.

Deploying and managing a static website should be easy and the AWS Static Website Package makes it so you can focus more time on generating great content and less time on the internals on your website. For more information on the AWS Static Website Package you can visit the documentation or via the code directly on Github.

Create an AWS Static Website Fast with Angular and Pulumi

Sean Holung — Wed, 24 Aug 2022 00:00:00 +0000

In this blog post, we’re going to use some Angular framework components to assemble a static website and then use Pulumi and its AWS Static Website component to deploy it to AWS. The website is for a café called the Pulumi Café. It will contain two pages, one an About page and the other a Menu page, as well as some navigational pieces.

To follow this example, you need to have both Angular and Pulumi installed. (Here’s a link to the Pulumi installation instructions.) You’ll also need an AWS account.

What is Angular?

Angular is an open-source UI framework for building single-page client applications with HTML and TypeScript. Angular itself is written in TypeScript and its architecture follows the Model-View-Controller (MVC) design pattern.

What are Components in Angular?

In Angular, the basic building blocks of a website are called components. These are reusable structures that contain their own logic and functionality. For example, you could create a button as an Angular component and program it to have a particular look and a particular behavior. Then, you would reuse the button component wherever you need it in the website. The button could also be configurable meaning that, based on different properties, you could change its look and behavior.

A simple website, like the one we’ll be building in this post, is mainly created from a group of Angular components.

What is the AWS Static Website Component?

The AWS Static Website component from Pulumi makes it easy to deploy an AWS S3 static website and, optionally, add a CloudFront content distribution network (CDN). While you can use any of the programming languages Pulumi supports (TypeScript, JavaScript, Python, Go, .NET, Java, and YAML), we’ll be using TypeScript, since that is what the Angular framework uses.

The great advantage of the AWS Static Website component is that you can have a complete, functioning site in a few minutes. The component encapsulates all the complex logic that an AWS static website requires. Without the component, you would need to spend hours or even days writing and debugging code to get the same result.

If you’re interested in learning more about the component, read Deploy Static Websites to AWS using 10 lines of YAML.

The Angular Components

All the Angular components you need to build the website are available in the GitHub repository. The repository contains:

A component for the left navigation bar.
A component for the top navigation bar.
A component for the Home page.
A component for the Menu page.

We also use some components that come with the Angular framework.

Each of the components has a TypeScript file that contains the programming logic and an HTML file that describes how the component will render.

Building the Pulumi Café Website

Here are the instructions to build the website.

Clone the GitHub repository located here.
Run npm install to install the website’s node dependencies.

Deploy the Site with Pulumi

You’re now ready to set up Pulumi to deploy the site to AWS.

Create a directory named pulumi in the root of the project directory and then navigate to it with this command:
```
mkdir pulumi && cd pulumi
```
You’re now in the pulumi directory. Generate a Pulumi project file and create a Pulumi.yaml file with the following command. You will be asked a few questions from the prompt. Use angular-static-website for the project name and accept the suggested defaults for the remaining questions:
```
pulumi new aws-yaml
```

Modify the .yaml File

We need to add a few lines of code to the Pulumi.yaml file. In the resources section, the code references the AWS Static Website component and sets the sitePath property to the location of the dist build directory. We also want to know the URL of the site once it’s deployed. That’s what the outputs section does. The websiteURL parameter is one of the outputs that the AWS Static Website component provides. Replace the contents of Pulumi.yaml with the following code:

name: angular-static-website
runtime: yaml
description: Example of deploying Angular with Pulumi
resources:
 web:
 type: "aws-static-website:index:Website"
 properties:
 sitePath: "../dist/"
outputs:
 websiteURL: ${web.websiteURL}

The AWS Static Website component is the reason you only need a few lines of code to deploy the site. By using it, all the work of setting up AWS is done for you.

To deploy the website, type pulumi up. You’ll first see a preview of all the resources that will be created. Confirm that you want to proceed and Pulumi deploys the website to AWS.

It’s that simple. With just a few lines of code and one command you deployed your site. Navigate to the site and you’ll see the Home page for the café.

You can see the navigation components on the left-hand side. Click Menu to see the Menu page.

Manage Your Site with Pulumi

Along with making it simple to deploy your site, Pulumi also makes it easy to perform some management tasks. For example, If you want to take down the site, run pulumi destroy. You never have to worry that you’ll forget to remove some resource and continue to pay for it. Pulumi also keeps track of changes to website files, can generate resource graphs and give you complete information about the resources you’re using.

Learn More

If you want to learn more about Pulumi and the AWS Static Website component, here are a few links you might find interesting:

Along with the Deploy Static Websites to AWS using 10 lines of YAML blog post, take a look at the AWS Static Website reference page.
If you want to learn about other Pulumi components, the registry page catalogs them all.
If you want to view more examples of how to use Pulumi, go to the Pulumi examples repo.
If you want to delve deeper into Pulumi, the Getting Started guide is a good first step.
If you’re interested in learning more about Pulumi concepts, try the Concepts page.
If you want to learn more about Angular, see their Getting Started docs.

Deploy Static Websites to AWS using 10 lines of YAML

Sean Holung — Thu, 07 Jul 2022 00:00:00 +0000

The AWS Static Website component makes it easy to deploy an AWS S3 static website and, optionally, add a CloudFront content distribution network (CDN). While you can use any of the programming languages Pulumi supports (TypeScript, JavaScript, Python, Go, .NET, Java, and YAML), the component is particularly useful if you use YAML or JSON. With the AWS Static Website component, you’ll have a complete, functioning site in a few minutes. Without it, you can spend hours or even days to get the same result.

The component is designed to be simple to use and accessible to a broad range of developers. The only prerequisites are a basic knowledge of YAML or JSON, an AWS account, and an understanding of what a static website is. Even if you’re not used to thinking about infrastructure as code (IaC), you can use the component and let it handle the complexities that make setting up a website so time consuming.

You will need to have Pulumi on your machine to use the component because you run the pulumi up command to deploy the website. There’s a link to the installation instructions at the end of this article. You’ll also need an AWS account.

What the Component Does

The component deploys a static website to AWS and, optionally, a CloudFront CDN. You simply add a few lines of code, set a few configuration parameters, run pulumi up and let the component do the rest. The component sets up:

An Amazon S3 bucket
An Amazon CloudFront CDN (optional)
- An Amazon Route 53 DNS record
- An Amazon Certificate Manager SSL/TLS certificate

Some Examples

Let’s look at two examples of how to use the component. We’re going to use YAML in this post, but JSON is also supported as well.

Create a Website

This YAML code creates a basic static website.

name: react-static-website
runtime: yaml
description: Example of deploying React with Pulumi
resources:
 web:
 type: "aws-static-website:index:Website"
 properties:
 sitePath: "../my-website/build"
outputs:
 websiteURL: ${web.websiteURL}

This is the JSON equivalent of the code shown above.

{
 "name": "react-static-website",
 "runtime": "yaml",
 "description": "Example of deploying React with Pulumi",
 "resources": {
 "web": {
 "type": "aws-static-website:index:Website",
 "properties": {
 "sitePath": "../my-website/build"
 }
 }
 },
 "outputs": {
 "websiteURL": "${web.websiteURL}"
 }
}

This example code deploys a static React website but you can use the component with any other static website framework, such as Hugo. The only parameter that would change is the output directory specified in the sitePath property.

The first two lines of this example give the project a name and tell Pulumi that the code is YAML. The next line is simply a description of the project.

Next you allocate a resource. This is a Pulumi term. Resources are the fundamental units that make up your cloud infrastructure and Pulumi provides many resources that are ready for you to use. Here, you only need one: aws-static-website:Website, which is the AWS Static Website component. The resource has an input property, sitePath, which is the root directory that contains the website’s contents. Of course, you can use any path you want.

Finally, you’ll probably want to know the URL of your new site once it’s deployed. That’s what the outputs line does. websiteURL is one of the outputs that the component provides.

Get Started

To get started, go to the folder that contains your static website project. Then, follow these steps.

Create a directory named infrastructure alongside your website project directory with this command:
```
mkdir infrastructure && cd infrastructure
```
You’re now in the infrastructure directory. Generate a Pulumi.yaml file with this command:
```
pulumi new aws-yaml
```
Here’s an example of what the final directory structure looks like.
```
| react-project-dir
├── my-website
| ├── build
│ ├── index.html
│ ├── main.css
├── infrastructure
│ ├── Pulumi.yaml
```
Note: Pulumi will also add some other files to the infrastructure directory, such as a file that contains information specific to your Pulumi stack.

Copy the resources section and the outputs section from the example and add it to the end of the Pulumi.yaml file.

resources:
 web:
 type: "aws-static-website:index:Website"
 properties:
 sitePath: "../my-website/build"
outputs:
 websiteURL: ${web.websiteURL}

Deploy the Website

To deploy the website, type pulumi up. You’ll first see a preview of all the resources that will be created. You then confirm that you want to proceed and Pulumi deploys the website.

What You Gain

The entire example has 10 lines of YAML code. With this, you will get an S3 bucket provisioned with all of your website’s contents. If you looked at the preview screen when you ran pulumi up, you saw the many resources that actually had to be deployed to create the site. You never see any of that complexity. Here’s an example of what’s happening under the hood.

If you follow the View Live link, you will go to the Pulumi Service, where you can see all of the information available about a deployment and explore the resources that were deployed. For example, you can see a resource graph and a list of resources. Here’s an example of a resource graph.

After Pulumi deploys the website, it will display any outputs you specified which, in our example, is the URL of the site. as well as the number of resources created.

Input Properties

The AWS Static Website component has several input properties. Here are three of the most commonly used.

sitePath - the root directory that contains the website’s contents (required).
withCDN - sets a flag to provision a CloudFront CDN.
targetDomain - the domain that serves the content. A Route53 hosted zone must exist for this domain if you specify this option.

See the component’s reference page for the other properties this component supports.

Output Properties

The AWS Static Website component has several output properties. The one you’ll probably use the most is websiteURL, which is the URL to access the website. See the component’s reference page for the others.

Add a CloudFront CDN

To add a CloudFront CDN, you only need to add one more line of code.

name: react-static-website
runtime: yaml
description: Example of deploying React with Pulumi
resources:
 web:
 type: "aws-static-website:index:Website"
 properties:
 sitePath: "./my-website/build"
 withCDN: true
outputs:
 websiteURL: ${web.websiteURL}

All you have to do is add the line withCDN: true and the component sets up the CDN instance for you. Again, run pulumi up, confirm that you want to proceed, and Pulumi deploys the website. Here’s an example of what you’ll see.

And here’s the output.

More Pulumi Advantages

We’ve already seen how much Pulumi simplifies creating a website. Pulumi also keeps track of any changes you make to any of the website files. It makes those changes the next time you run pulumi up. Here’s an example screenshot. The changes are marked in the Plan column.

If you simply want to take an inventory of what’s changed, you can run pulumi up and not proceed with the confirmation. Alternatively, you can run pulumi preview.

If you want to take down the site, run pulumi destroy. Pulumi marks all the resources for deletion. It first previews the changes and, if you confirm, removes them from your AWS account. You don’t have to worry that you’ll forget to remove some resource and continue to pay for it. Here’s an example of what you’d see if you ran pulumi destroy on your AWS S3 static website.

Learn More

If you’re curious and want to learn more about Pulumi and the AWS Static Website component, here are a few links you might find interesting:

You can examine the GitHub repository that contains the code for the component.
If you want to quickly try out the component, this GitHub repo houses a complete React example project that you can clone.
If you want to learn about other Pulumi components, take a look at the registry page, which catalogs them all.
If you want to view more examples of how to use Pulumi, take a look at the Pulumi examples repo.
If you want to delve deeper into Pulumi, the Getting Started guide is a good first step.
If you’re interested in learning more about Pulumi concepts, try the Concepts page.

Install Pulumi

To install Pulumi for AWS, go to Before You Begin. There are instructions for macOS, Windows and Linux. You need to have an AWS account.

Top 5 Things an Azure Developer Needs to Know: Static Websites

Sophia Parafina — Mon, 09 Aug 2021 00:00:00 +0000

Static web applications are a popular way to publish websites. There are many reasons for adopting static web applications, including speed, security, version control, scalability, and reduced cost.

This article goes into depth about the two types of static web applications that Azure offers. The first uses Azure Blob Storage to serve static data. The second method is Azure Static Web Apps which follows the pattern of Jamstack applications that use a static website generator integrated with source control that publishes to a Content Delivery Network. We’ll take an in-depth look at both methods and consider the pros and cons of each.

Static Websites with Azure Storage

Hosting a static website on Azure Store is an option for serving web content without a web server. You can upload HTML, CSS, images, and JavaScript to an Azure storage container named $web. Because the content is in a storage container, you can also use other PaaS services like Azure Functions or Azure CDN.

Azure Portal

Let’s get started using the Azure Portal.

Step 1: Create a storage account (optional if you have an existing storage account)

In the Azure Portal, navigate to Storage accounts, and follow the defaults.

Step 2: In the Storage account page, select Data management > Static website

Select enabled for the Static website, and enter values for the Index document and Error document fields. Save the changes.

Step 3: Upload files

Here are example files to upload or you can use your own.

index.html

<html>
 <body>
 <h1>This file is served from Blob Storage (courtesy of Pulumi!)</h1>
 </body>
</html>

404.html

<html>
 <body>
 <h1>That's a 404! Still, from the Blob Storage.</h1>
 </body>
</html>

We’ll use Storage Explorer (preview), and select BLOB CONTAINERS > $web. In the Upload blob pane, add the index.html and 404.html files, and select Upload.

Step 4: Get the URL

Select Static website in the overview pane, and the URL is the Primary endpoint.

Build and deploy a static website with code

We can repeat the same process using a programming language. The process includes:

Create a storage account
Enable Static website
Upload files
Configure and publish endpoints

We can reproduce this process in code with C#, Go, Python, Typescript, or in any language Pulumi supports. Let’s step through the code.

Step 1: Create a Resource group and Storage account.

 var resourceGroup = new Resources.ResourceGroup("resourceGroup");
var storageAccount = new Storage.StorageAccount("storageaccount", new Storage.StorageAccountArgs
{
Kind = Storage.Kind.StorageV2,
ResourceGroupName = resourceGroup.Name,
Sku = new Storage.Inputs.SkuArgs
{
Name = Storage.SkuName.Standard_LRS,
},
});

 pulumi.Run(func(ctx *pulumi.Context) error {
resourceGroup, err := resources.NewResourceGroup(ctx, "website-rg", nil)
if err != nil {
return err
}
storageAccount, err := storage.NewStorageAccount(ctx, "sa", &storage.StorageAccountArgs{
ResourceGroupName: resourceGroup.Name,
Kind: storage.KindStorageV2,
Sku: &storage.SkuArgs{
Name: storage.SkuName_Standard_LRS,
},
})
if err != nil {
return err
}

resource_group = resources.ResourceGroup("resourceGroup")
storage_account = storage.StorageAccount(
"storageaccount",
access_tier=storage.AccessTier.HOT,
enable_https_traffic_only=True,
encryption=storage.EncryptionArgs(
key_source=storage.KeySource.MICROSOFT_STORAGE,
services=storage.EncryptionServicesArgs(
blob=storage.EncryptionServiceArgs(
enabled=True,
),
file=storage.EncryptionServiceArgs(
enabled=True,
),
),
),
kind=storage.Kind.STORAGE_V2,
network_rule_set=storage.NetworkRuleSetArgs(
bypass=storage.Bypass.AZURE_SERVICES,
default_action=storage.DefaultAction.ALLOW,
),
resource_group_name=resource_group.name,
sku=storage.SkuArgs(
name=storage.SkuName.STANDARD_LRS,
))

const resourceGroup = new resources.ResourceGroup("resourceGroup");
const storageAccount = new storage.StorageAccount("storageaccount", {
enableHttpsTrafficOnly: true,
kind: storage.Kind.StorageV2,
resourceGroupName: resourceGroup.name,
sku: {
name: storage.SkuName.Standard_LRS,
},
});

Step 2: Enable static website

// Enable static website support
var staticWebsite = new Storage.StorageAccountStaticWebsite("staticWebsite", new Storage.StorageAccountStaticWebsiteArgs
{
AccountName = storageAccount.Name,
ResourceGroupName = resourceGroup.Name,
IndexDocument = "index.html",
Error404Document = "404.html",
});

// Enable static website support
staticWebsite, err := storage.NewStorageAccountStaticWebsite(ctx, "staticWebsite", &storage.StorageAccountStaticWebsiteArgs{
AccountName: storageAccount.Name,
ResourceGroupName: resourceGroup.Name,
IndexDocument: pulumi.String("index.html"),
Error404Document: pulumi.String("404.html"),
})
if err != nil {
return err
}

# Enable static website support
static_website = storage.StorageAccountStaticWebsite(
"staticWebsite",
account_name=storage_account.name,
resource_group_name=resource_group.name,
index_document="index.html",
error404_document="404.html")

// Enable static website support
const staticWebsite = new storage.StorageAccountStaticWebsite("staticWebsite", {
accountName: storageAccount.name,
resourceGroupName: resourceGroup.name,
indexDocument: "index.html",
error404Document: "404.html",
});

Step 3: Upload content

var index_html = new Storage.Blob("index.html", new Storage.BlobArgs
{
ResourceGroupName = resourceGroup.Name,
AccountName = storageAccount.Name,
ContainerName = staticWebsite.ContainerName,
Source = new FileAsset("./wwwroot/index.html"),
ContentType = "text/html",
});
var notfound_html = new Storage.Blob("404.html", new Storage.BlobArgs
{
ResourceGroupName = resourceGroup.Name,
AccountName = storageAccount.Name,
ContainerName = staticWebsite.ContainerName,
Source = new FileAsset("./wwwroot/404.html"),
ContentType = "text/html",
});

// Upload the files
_, err = storage.NewBlob(ctx, "index.html", &storage.BlobArgs{
ResourceGroupName: resourceGroup.Name,
AccountName: storageAccount.Name,
ContainerName: staticWebsite.ContainerName,
Source: pulumi.NewFileAsset("./wwwroot/index.html"),
ContentType: pulumi.String("text/html"),
})
if err != nil {
return err
}
_, err = storage.NewBlob(ctx, "404.html", &storage.BlobArgs{
ResourceGroupName: resourceGroup.Name,
AccountName: storageAccount.Name,
ContainerName: staticWebsite.ContainerName,
Source: pulumi.NewFileAsset("./wwwroot/404.html"),
ContentType: pulumi.String("text/html"),
})
if err != nil {
return err
}

# Upload the files
index_html = storage.Blob(
"index_html",
resource_group_name=resource_group.name,
account_name=storage_account.name,
container_name=static_website.container_name,
source=pulumi.FileAsset("./wwwroot/index.html"),
content_type="text/html")
notfound_html = storage.Blob(
"notfound_html",
resource_group_name=resource_group.name,
account_name=storage_account.name,
container_name=static_website.container_name,
source=pulumi.FileAsset("./wwwroot/404.html"),
content_type="text/html")

// Upload the files
["index.html", "404.html"].map(name =>
new storage.Blob(name, {
resourceGroupName: resourceGroup.name,
accountName: storageAccount.name,
containerName: staticWebsite.containerName,
source: new pulumi.asset.FileAsset(`./wwwroot/${name}`),
contentType: "text/html",
}),
);

Step 4: Configure and publish endpoints

// Web endpoint to the website
this.StaticEndpoint = storageAccount.PrimaryEndpoints.Apply(primaryEndpoints => primaryEndpoints.Web);
// (Optional) Add a CDN in front of the storage account.
var profile = new Cdn.Profile("profile", new Cdn.ProfileArgs
{
ResourceGroupName = resourceGroup.Name,
Location = "global",
Sku = new Cdn.Inputs.SkuArgs
{
Name = Cdn.SkuName.Standard_Microsoft,
},
});
var endpointOrigin = storageAccount.PrimaryEndpoints.Apply(pe => pe.Web.Replace("https://", "").Replace("/", ""));
[Output("staticEndpoint")]
public Output<string> StaticEndpoint { get; set; }
}

endpointOrigin := storageAccount.PrimaryEndpoints.Web().ApplyT(func(endpoint string) string {
endpoint = strings.ReplaceAll(endpoint, "https://", "")
endpoint = strings.ReplaceAll(endpoint, "/", "")
return endpoint
}).(pulumi.StringOutput)
// Web endpoint to the website
ctx.Export("staticEndpoint", storageAccount.PrimaryEndpoints.Web())
}

endpoint_origin = storage_account.primary_endpoints.apply(
lambda primary_endpoints: primary_endpoints.web.replace("https://", "").replace("/", ""))
# Web endpoint to the website
pulumi.export("staticEndpoint", storage_account.primary_endpoints.web)

// Web endpoint to the website
export const staticEndpoint = storageAccount.primaryEndpoints.web;

The complete examples for C#, Go, Python, and Typescript are on Github.

Azure Static Web Apps

Azure Static Web Apps (SWA) builds and deploys web apps from a code repository. Azure works directly with GitHub or Azure DevOps to watch a branch on your repository. When you push a commit or accept a pull request, your app is built and deployed to Azure. When you build web apps with SWA, your static assets are deployed to a CDN that serves files from geographically distributed points.

Static web apps can be built with popular frameworks that don’t require server-side rendering, such as React, Angular, and Vue. Web applications typically include HTML, JavaScript, images, and CSS. In addition to these assets, you can create API endpoints hosted in an Azure Function.

The key thing to remember with SWAs is that you build the application from a repository.

Let’s jump into Azure Static Web Apps!

Build and deploy

We’ll use Visual Studio Code’s Azure Static Web App Extension and a GitHub account.

Step 1: Install the Azure Web Static Web Apps extension.

Follow the instructions to authorize Visual Studio Code to access your GitHub account.

Step 2: Create a web application

For convenience, we can use the Azure template for generating web applications. Open this link and click the Use this template button to generate a basic React application.

Clone the repository to your computer.

$ git clone https://github.com/spara/bookish-doodle.git

Step 3: Create a static web app with Visual Studio Code

Open your repository with Visual Studio Code and activate the Azure extension. On the APP SERVICE item, select the + to create a web app.

Follow the prompts:

Create a unique name.

Select a project structure.

Select an application directory.

Select a build directory.

When VS Code completes configuring your application, you will be prompted to deploy.

You can view the application in the browser.

Step 3: Change the code

Edit ./src/app.js and change World to Cloud Engineers.

function App() {
 const value = 'Cloud Engineers';
 return <div>Hello {value}</div>;
}

Add, commit, and push your changes to GitHub.

$ git add .
$ git commit -m 'changed message'
$ git push

Select the Actions tab of your repository to see the workflows. Select the changed message, and then select Build and Deploy Job.

To see the details of the deployment, select Build and Deploy.

So what happened here? First, we used the Azure Static Web Apps for Visual Studio Code to authorize access to GitHub. Next, we created a deployment using the extension, created a GitHub Actions workflow, and deployed the application. We edited the code and pushed it to the repository. The push triggered the GitHub Action, rebuilt, and deployed the application.

The Azure Static Web Apps service lets you create a complete DevOps workflow.

Build and deploy with code and Pulumi

Can we create a complete DevOps workflow with code? Of course, we can! The Pulumi Azure Native provider uses the same API as VS Code. In the example below, we can duplicate the process without using an extension or the Azure CLI.

import pulumi
import pulumi_azure_native as azure_native

static_site = azure_native.web.StaticSite("staticSite",
 branch="master",
 build_properties=azure_native.web.StaticSiteBuildPropertiesArgs(
 api_location="api",
 app_artifact_location="build",
 app_location="app",
 ),
 location="West US 2",
 name="testStaticSite0",
 repository_token="repoToken123",
 repository_url="https://github.com/username/RepoName",
 resource_group_name="rg",
 sku=azure_native.web.SkuDescriptionArgs(
 name="Basic",
 tier="Basic",
 ))

In the example above, creating a static web app requires configuring the same parameters we used in the Visual Studio Code example. The difference is that we create a Pulumi Project with our application at the root of the project directory in a folder called app. Once the static web app stack is created, you can push changes and trigger a deployment. One of the advantages of using infrastructure as code is that you can use the development environment and toolchain that you prefer. You are not bound to using a specific extension or development environment. We can be productive with our toolchain and create a complete deployment workflow using GitHub Actions with cloud engineering and Azure Static Web Apps.

Summary

This article demonstrates two ways to build static websites with Azure. The first way is to use Azure Storage to deploy the website. We showed how to use the Azure Portal and infrastructure as code to deploy. The other way to deploy a static website is to use the Azure Static Web Apps Service. We used the Visual Studio Code extension to configure GitHub Actions to deploy the React application in this example. We demonstrated how to deploy using code because the Pulumi Azure Native provider uses the Azure API. Infrastructure as code lets us choose our development environment where we are productive. In the next installment of this series, we’ll tackle deploying Kubernetes.