From b32bff1aeba9097a29e9f85f65a4257f3414371d Mon Sep 17 00:00:00 2001 From: asaf Date: Tue, 2 Sep 2025 18:00:48 -0400 Subject: [PATCH 01/13] Improve website navigation and getting started experience - Simplify header by removing secondary navigation bar - Reorder main navigation with Learn as first item - Move Company section from main nav to footer - Update CTAs to point to new /start-now page - Create comprehensive /start-now hub with cloud and language options - Add AWS TypeScript getting started guide with hands-on tutorial - Reorganize footer with Developer Tools section --- content/_index.md | 4 +- content/start-now/_index.md | 233 ++++++++++ content/start-now/aws-typescript/_index.md | 335 +++++++++++++++ layouts/partials/footer.html | 22 +- layouts/partials/header.html | 398 ++++++------------ .../src/components/header-cta/header-cta.tsx | 4 +- 6 files changed, 718 insertions(+), 278 deletions(-) create mode 100644 content/start-now/_index.md create mode 100644 content/start-now/aws-typescript/_index.md diff --git a/content/_index.md b/content/_index.md index 8a812ba9d975..fddcbdb06258 100644 --- a/content/_index.md +++ b/content/_index.md @@ -8,8 +8,8 @@ hero: title: [ "The Cloud Infrastructure Platform", "Engineers Love and Enterprises Trust" ] description: | Powered by the #1 open source infrastructure as code tool. - cta_text: Try Pulumi Cloud for Free - cta_link: https://app.pulumi.com/signup?utm-source=try-cloud-button + cta_text: Get Started Now + cta_link: /start-now secondary_cta_text: Download Open Source secondary_cta_link: /docs/iac/download-install diff --git a/content/start-now/_index.md b/content/start-now/_index.md new file mode 100644 index 000000000000..48532e74a3c0 --- /dev/null +++ b/content/start-now/_index.md @@ -0,0 +1,233 @@ +--- +title: Start Building with Pulumi +meta_desc: Choose your cloud and language to begin building infrastructure as code with Pulumi +layout: start-now +no_on_this_page: true +--- + +
+
+

Start Building with Pulumi

+

Choose your cloud and language to begin

+
+ + +
+

Choose Your Path

+
+ +

+ + I'm new to Pulumi +

+

Start with our beginner-friendly tutorial that explains core concepts and walks you through your first deployment.

+ + +

+ + I'm migrating from Terraform +

+

Learn how to import existing Terraform resources and convert HCL to Pulumi code in your preferred language.

+ + +

+ + I want to explore templates +

+

Browse our collection of production-ready templates for common architectures and use cases.

+ +
+
+ + +
+

Choose Your Cloud & Language

+

Select your preferred cloud provider and programming language to get started with a tailored guide.

+ + + + + +
+

AWS with Your Preferred Language

+
+ + TypeScript + TypeScript + + + Python + Python + + + Go + Go + + + C# + C# + + + Java + Java + + + YAML + YAML + +
+
+ + + + +
+

Azure with Your Preferred Language

+
+ + TypeScript + TypeScript + + + Python + Python + + + Go + Go + + + C# + C# + + + Java + Java + + + YAML + YAML + +
+
+ + + + +
+

Google Cloud with Your Preferred Language

+
+ + TypeScript + TypeScript + + + Python + Python + + + Go + Go + + + C# + C# + + + Java + Java + + + YAML + YAML + +
+
+ + + + +
+

Kubernetes with Your Preferred Language

+
+ + TypeScript + TypeScript + + + Python + Python + + + Go + Go + + + C# + C# + + + Java + Java + + + YAML + YAML + +
+
+ + +
+ + +
+

Popular Starting Points

+

Build something real with these engaging examples

+
+ + +

Deploy a Containerized Web App

+

Build and deploy a containerized application with auto-scaling and load balancing.

+ + + +

Set up a Kubernetes Cluster

+

Create a production-ready Kubernetes cluster with monitoring and ingress.

+ + + +

Build a Serverless API

+

Create a REST API using serverless functions with a database backend.

+ + + +

Create a Static Website with CDN

+

Deploy a static website with global CDN distribution and HTTPS.

+ +
+
+ + +
+

Learning Resources

+
+ + + Interactive Tutorials + + + + Video Walkthroughs + + + + Architecture Templates + + + + Community Examples + +
+
+
\ No newline at end of file diff --git a/content/start-now/aws-typescript/_index.md b/content/start-now/aws-typescript/_index.md new file mode 100644 index 000000000000..fa14b36209a4 --- /dev/null +++ b/content/start-now/aws-typescript/_index.md @@ -0,0 +1,335 @@ +--- +title: Getting Started with Pulumi on AWS using TypeScript +meta_desc: Learn how to build and deploy AWS infrastructure using TypeScript and Pulumi +layout: tutorial +--- + +# Getting Started with Pulumi on AWS using TypeScript + +Welcome! This guide will walk you through creating your first AWS infrastructure using Pulumi and TypeScript. By the end of this tutorial, you'll have deployed a real application to AWS and understand the core concepts of infrastructure as code with Pulumi. + +## What We'll Build + +Instead of just creating a simple S3 bucket, we'll build something more exciting: a **containerized web application** with: +- A Docker container running your application +- AWS Fargate for serverless container hosting +- Application Load Balancer for high availability +- Auto-scaling based on CPU usage +- CloudWatch logging for monitoring + +## Prerequisites + +Before we begin, make sure you have: + +1. **An AWS account** - [Sign up for free](https://aws.amazon.com/free) +2. **Node.js 18+** - [Download here](https://nodejs.org/) +3. **Pulumi CLI** - Install with: + ```bash + curl -fsSL https://get.pulumi.com | sh + ``` +4. **AWS CLI** - [Installation guide](https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html) +5. **Docker** - [Get Docker](https://docs.docker.com/get-docker/) + +## Step 1: Configure AWS Access + +First, configure your AWS credentials so Pulumi can manage resources in your account: + +```bash +aws configure +``` + +Enter your AWS Access Key ID, Secret Access Key, and preferred region when prompted. + +## Step 2: Create a New Pulumi Project + +Create a new directory for your project and initialize a Pulumi program: + +```bash +mkdir my-first-pulumi-app && cd my-first-pulumi-app +pulumi new aws-typescript +``` + +Follow the prompts: +- **Project name**: Accept the default or choose your own +- **Project description**: Optional description +- **Stack name**: Use `dev` for development + +This creates: +- `Pulumi.yaml` - Project configuration +- `Pulumi.dev.yaml` - Stack-specific configuration +- `index.ts` - Your infrastructure code +- `package.json` - Node.js dependencies + +## Step 3: Understanding Pulumi Concepts + +Before we write code, let's understand three key Pulumi concepts: + +### Resources +Resources are the building blocks of your infrastructure (like EC2 instances, S3 buckets, or databases). In Pulumi, you declare resources using your programming language. + +### Stacks +Stacks are isolated, independently configurable instances of your infrastructure. You might have `dev`, `staging`, and `production` stacks. + +### State +Pulumi stores the state of your infrastructure to track what resources exist. By default, this is stored in Pulumi Cloud (free for individual use). + +## Step 4: Write Your Infrastructure Code + +Replace the contents of `index.ts` with: + +```typescript +import * as pulumi from "@pulumi/pulumi"; +import * as aws from "@pulumi/aws"; +import * as awsx from "@pulumi/awsx"; + +// Create a VPC for our application +const vpc = new awsx.ec2.Vpc("app-vpc", { + numberOfAvailabilityZones: 2, +}); + +// Create an ECS cluster +const cluster = new aws.ecs.Cluster("app-cluster"); + +// Create a load balancer +const loadBalancer = new awsx.lb.ApplicationLoadBalancer("app-lb", { + defaultTargetGroup: { + port: 80, + protocol: "HTTP", + healthCheck: { + path: "/", + interval: 30, + }, + }, +}); + +// Build and publish a Docker image to ECR +const image = new awsx.ecr.Image("app-image", { + repositoryUrl: new aws.ecr.Repository("app-repo").repositoryUrl, + context: "./app", + dockerfile: "./app/Dockerfile", +}); + +// Create a Fargate service +const service = new awsx.ecs.FargateService("app-service", { + cluster: cluster.arn, + taskDefinitionArgs: { + container: { + name: "app-container", + image: image.imageUri, + cpu: 128, + memory: 512, + essential: true, + portMappings: [{ + containerPort: 80, + targetGroup: loadBalancer.defaultTargetGroup, + }], + }, + }, + desiredCount: 2, +}); + +// Enable auto-scaling +const autoScaling = new aws.appautoscaling.Target("app-scaling", { + maxCapacity: 10, + minCapacity: 2, + resourceId: pulumi.interpolate`service/${cluster.name}/${service.service.name}`, + scalableDimension: "ecs:service:DesiredCount", + serviceNamespace: "ecs", +}); + +const autoScalingPolicy = new aws.appautoscaling.Policy("app-scaling-policy", { + policyType: "TargetTrackingScaling", + resourceId: autoScaling.resourceId, + scalableDimension: autoScaling.scalableDimension, + serviceNamespace: autoScaling.serviceNamespace, + targetTrackingScalingPolicyConfiguration: { + predefinedMetricSpecification: { + predefinedMetricType: "ECSServiceAverageCPUUtilization", + }, + targetValue: 70, + }, +}); + +// Export the load balancer URL +export const url = loadBalancer.loadBalancer.dnsName; +``` + +## Step 5: Create Your Application + +Create a simple Node.js application to deploy. Make a directory called `app`: + +```bash +mkdir app +``` + +Create `app/index.js`: + +```javascript +const express = require('express'); +const app = express(); +const port = 80; + +app.get('/', (req, res) => { + res.send(` + + + My First Pulumi App + + + +

🎉 Congratulations!

+

You've successfully deployed your first application with Pulumi!

+

This app is running on AWS Fargate with auto-scaling enabled.

+

Instance: ${process.env.HOSTNAME || 'unknown'}

+ + + `); +}); + +app.listen(port, () => { + console.log(`App listening at http://localhost:${port}`); +}); +``` + +Create `app/package.json`: + +```json +{ + "name": "pulumi-app", + "version": "1.0.0", + "main": "index.js", + "dependencies": { + "express": "^4.18.0" + }, + "scripts": { + "start": "node index.js" + } +} +``` + +Create `app/Dockerfile`: + +```dockerfile +FROM node:18-alpine +WORKDIR /app +COPY package*.json ./ +RUN npm install +COPY . . +EXPOSE 80 +CMD ["npm", "start"] +``` + +## Step 6: Install Dependencies + +Install the required Pulumi packages: + +```bash +npm install @pulumi/awsx +``` + +## Step 7: Deploy Your Infrastructure + +Now for the exciting part - deploying to AWS: + +```bash +pulumi up +``` + +Pulumi will show you a preview of what it's going to create. Review the changes and select **yes** to deploy. + +This will: +1. Create a VPC with public and private subnets +2. Build your Docker image +3. Push it to Amazon ECR +4. Create an ECS cluster and Fargate service +5. Set up load balancing and auto-scaling +6. Output the URL of your application + +The deployment takes about 5-7 minutes. Once complete, you'll see: + +``` +Outputs: + url: "app-lb-xxxxxxx.us-west-2.elb.amazonaws.com" +``` + +## Step 8: Access Your Application + +Open the URL in your browser. You should see your congratulations message! + +Try refreshing the page multiple times - you'll notice the instance ID changes as the load balancer distributes traffic across your containers. + +## Step 9: Make Changes + +Let's update the application. Edit `app/index.js` and change the message: + +```javascript +

🚀 My Pulumi App - Updated!

+

This is version 2 of my application.

+``` + +Deploy the changes: + +```bash +pulumi up +``` + +Pulumi will: +1. Rebuild your Docker image +2. Push the new version to ECR +3. Perform a rolling update of your service +4. Maintain availability during the deployment + +## Step 10: Monitor Your Application + +View logs from your application: + +```bash +pulumi logs --follow +``` + +Check the status of your resources: + +```bash +pulumi stack +``` + +## Understanding the Magic + +What makes Pulumi powerful: + +1. **Real Programming Languages**: Use TypeScript's type safety, IDE support, and debugging tools +2. **State Management**: Pulumi tracks your infrastructure state automatically +3. **Secrets Encryption**: Sensitive values are encrypted by default +4. **Preview Changes**: Always see what will change before deploying +5. **Rollback Capability**: Easy to revert changes if something goes wrong + +## Clean Up + +To avoid AWS charges, destroy your resources when done: + +```bash +pulumi destroy +``` + +This removes all resources created by Pulumi. + +## Next Steps + +Congratulations! You've deployed a real application to AWS with Pulumi. Here's what to explore next: + +1. **[Pulumi ESC](https://www.pulumi.com/docs/esc/)** - Manage secrets and configuration +2. **[Pulumi Insights](https://www.pulumi.com/docs/insights/)** - Search and analyze your infrastructure +3. **[Stack References](https://www.pulumi.com/docs/concepts/stack/#stack-references)** - Share outputs between stacks +4. **[Policy as Code](https://www.pulumi.com/docs/using-pulumi/crossguard/)** - Enforce security and compliance rules + +## Get Help + +- 💬 [Join our Slack community](https://slack.pulumi.com) +- 📚 [Browse the documentation](https://www.pulumi.com/docs/) +- 🎓 [Explore more tutorials](https://www.pulumi.com/learn/) +- 🐛 [Report issues on GitHub](https://github.com/pulumi/pulumi) + +Welcome to the Pulumi community! We're excited to see what you'll build. \ No newline at end of file diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 5cf0b112cb97..b31fab9734b2 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -3,12 +3,12 @@
diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 2e2b89766ced..6c6b46aff7c1 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -6,63 +6,6 @@ {{ partial "docs/search.html" . }} {{ else }} - -
@@ -417,6 +314,41 @@