Lets just jump right in with some messy red arrows!​

After creating your acccount and or signing in at Terraform cloud you're going to see somthing like this: And after creating our first organisation (bottom arrow), we want to go ahead and create a new workspace for our work.

Getting Started​

Worth noting that there are some great resources avalible through the Getting Started guide.

Terraform and HCP Terraform in a Nutshell​

Terraform is an infrastructure as code (IaC) tool that lets you define and manage resources through configuration files, bringing consistency and automation to the infrastructure lifecycle. By managing services declaratively, Terraform reduces human error and allows you to automate infrastructure updates.

HCP Terraform enhances this by running Terraform in a secure, cloud-hosted environment. It provides benefits like state storage, integration with version control, and a private registry for sharing modules. Paid features include cost estimates, access controls, and policy enforcement, making it ideal for team collaboration on infrastructure projects.

HCP Terraform Workflows Overview​

In HCP Terraform, resources are managed within workspaces, each containing resource configurations, variables, and state files. HCP Terraform supports three key workflows:

CLI-driven Workflow:​

Standard Terraform CLI commands trigger operations in HCP’s remote environment, adding security and visibility with minimal setup changes.

VCS-driven Workflow:​

Integrates with version control to trigger Terraform runs on repository updates. Speculative plans for pull requests let teams preview changes, while merges initiate runs to apply updates.

API-driven Workflow:​

Allows custom tooling to programmatically interact with HCP Terraform for dynamic infrastructure control.

Log in to HCP Terraform from the CLI​

So we probably need to

choco install terraform

or at least

choco upgrade terraform

Then once thats set up we have to

terraform login

now that is going to take us off to a browser where we cut and paste that key from the browser into our orginal window:

and it may not be raining money, but this is what sucess look like:

Variable Sets​

HCP Terraform allows you to use workspace-specific or reusable variable sets for defining input and environment variables, standardizing configurations across workspaces. Variable sets streamline common configurations, like provider credentials, for efficient reuse and secure rotation. So in ADO it's a vartiable group, in Github actions they are secrets, but here in Terraform Cloud, they are variable sets.

First select the Organisation, then the settings on the right hand side and then 'variable sets'. Click on 'Create variable set'

This is where I'm going to not follow the instructions here anymore, because I don't want to set up AWS.

We are going to pop over to Azure, well PowerShell at least and run a couple of little commands:

az login

az ad sp create-for-rbac --role="Contributor" --scopes="/subscriptions/<subscription-id>"

This command will output the appId, password, and tenant, which correspond to the ARM_CLIENT_ID, ARM_CLIENT_SECRET, and ARM_TENANT_ID respectively.

Now my saved variable set looks like this and is ready to be used in a global context

In the past four days, I've embarked on a journey to modernize my website, incorporating React, TypeScript, and Docusaurus. This is the story of building philldellow.com, hosted on Vercel, to showcase not only my professional skills but also my personal growth as a developer. This blog post and the wider site is still actively being set-up so apologises for any rough edges as I learn it :)

Setting Up the Project​

Starting from scratch, I created a React project using TypeScript, bundled it into an ASP.NET Core project, and set up hosting on Vercel. Here’s the foundational setup:

Step 1: Create a React Project with TypeScript​

npx create-react-app my-app --template typescript

Once the basic project was set up, I dived into creating a series of reusable components. Here’s a breakdown of some key components and how I used TypeScript to ensure they were robust and adaptable.

Creating a Reusable Button Component​

<CodeBlock language="typescript">
{`import React from 'react';

interface ButtonProps {
  label: string;
  onClick: () => void;
  style?: React.CSSProperties;
}

const Button: React.FC<ButtonProps> = ({ label, onClick, style }) => (
  <button onClick={onClick} style={style} className="custom-button">
    {label}
  </button>
);

export default Button;
`}
</CodeBlock>

Styling and Layout with CSS and React

The Challenge of Responsive Design​

To ensure the site looked sleek on both desktop and mobile, I created layout components using CSS modules and dynamic styling within React. Here’s a look at the responsive layout I implemented.

Building a Card Layout​

To showcase project highlights, I used a responsive card layout with CSS modules.

import React from "react";
import styles from "./Card.module.css";

interface CardProps {
  title: string;
  description: string;
}

const Card: React.FC<CardProps> = ({ title, description }) => (
  <div className={styles.card}>
    <h3>{title}</h3>
    <p>{description}</p>
  </div>
);

export default Card;

Securing the App with Azure AD B2C Authentication

One key aspect of my project was adding authentication via Azure AD B2C. This enabled me to secure sensitive parts of the site, especially sections that manage verified credentials.

Setting Up Azure AD B2C​

Setting up B2C authentication in my ASP.NET Core API required configuring both the server-side endpoints and the client-side authentication flows.

// Example of integrating Azure AD B2C authentication in ASP.NET Core
services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
    .AddMicrosoftIdentityWebApp(options =>
    {
        options.ClientId = "<YOUR CLIENT ID>";
        options.TenantId = "<YOUR TENANT ID>";
    });

Welcome to my blog about seeting up some documentation and hopefully getting a bit of exposer of the good kind.

Docusaurus blogging features are powered by the blog plugin.

And thats where this website started a couple of days ago

Here are a few tips you might find useful.

This is a code snippet