Adding expand elements on each CDK page

Author: ferdingler

workshop/content/buildpipe/pipeascode/bucket/_index.en.md

@@ -8,13 +8,17 @@ Every Code Pipeline needs an artifacts bucket, also known as Artifact Store. Cod
 
 Let's get started and write the code for creating this bucket:
 
-**Make sure you are editing the file with _.ts_ extension**
+**Make sure you are editing the pipeline-stack file with _.ts_ extension**
 
 ```js
 // lib/pipeline-stack.ts
 
 import * as cdk from '@aws-cdk/core';
 import s3 = require('@aws-cdk/aws-s3');
+import codecommit = require('@aws-cdk/aws-codecommit');
+import codepipeline = require('@aws-cdk/aws-codepipeline');
+import codepipeline_actions = require('@aws-cdk/aws-codepipeline-actions');
+import codebuild = require('@aws-cdk/aws-codebuild');
 
 export class PipelineStack extends cdk.Stack {
   constructor(scope: cdk.Construct, id: string, props?: cdk.StackProps) {

workshop/content/buildpipe/pipeascode/build/_index.en.md

@@ -12,8 +12,37 @@ AWS CodeBuild is a great option because you only pay for the time where your bui
 
 ### Add the build stage
 
-Let's go ahead and add a Build stage to our pipeline:
+Let's go ahead and add a Build stage to you pipeline-stack.ts:
 
+```js
+// Declare build output as artifacts
+const buildOutput = new codepipeline.Artifact();
+
+// Declare a new CodeBuild project
+const buildProject = new codebuild.PipelineProject(this, 'Build', {
+  environment: { buildImage: codebuild.LinuxBuildImage.AMAZON_LINUX_2_2 },
+  environmentVariables: {
+    'PACKAGE_BUCKET': {
+      value: artifactsBucket.bucketName
+    }
+  }
+});
+
+// Add the build stage to our pipeline
+pipeline.addStage({
+  stageName: 'Build',
+  actions: [
+    new codepipeline_actions.CodeBuildAction({
+      actionName: 'Build',
+      project: buildProject,
+      input: sourceOutput,
+      outputs: [buildOutput],
+    }),
+  ],
+});
+```
+
+{{%expand "Click here to see how the entire file should look like" %}}
 ```js
 // lib/pipeline-stack.ts
 
@@ -87,6 +116,7 @@ export class PipelineStack extends cdk.Stack {
   }
 }
 ```
+{{% /expand%}}
 
 ### Deploy the pipeline
 

workshop/content/buildpipe/pipeascode/deploy/_index.en.md

@@ -6,8 +6,32 @@ weight = 40
 
 The **Deploy Stage** is where your SAM application and all its resources are created an in an AWS account. The most common way to do this is by using CloudFormation ChangeSets to deploy. This means that this stage will have 2 actions: the _CreateChangeSet_ and the _ExecuteChangeSet_.
 
-Add the Deploy stage to your pipeline: 
+Add the Deploy stage to your pipeline-stack.ts: 
 
+```js
+// Deploy stage
+pipeline.addStage({
+  stageName: 'Dev',
+  actions: [
+    new codepipeline_actions.CloudFormationCreateReplaceChangeSetAction({
+      actionName: 'CreateChangeSet',
+      templatePath: buildOutput.atPath("packaged.yaml"),
+      stackName: 'sam-app',
+      adminPermissions: true,
+      changeSetName: 'sam-app-dev-changeset',
+      runOrder: 1
+    }),
+    new codepipeline_actions.CloudFormationExecuteChangeSetAction({
+      actionName: 'Deploy',
+      stackName: 'sam-app',
+      changeSetName: 'sam-app-dev-changeset',
+      runOrder: 2
+    }),
+  ],
+});
+```
+
+{{%expand "Click here to see how the entire file should look like" %}}
 ```js
 // lib/pipeline-stack.ts
 
@@ -102,6 +126,7 @@ export class PipelineStack extends cdk.Stack {
   }
 }
 ```
+{{% /expand%}}
 
 ### Deploy the pipeline
 

workshop/content/buildpipe/pipeascode/source/_index.en.md

@@ -6,8 +6,38 @@ weight = 15
 
 The **Source Stage** is the first step of any CI/CD pipeline and it represents your source code. This stage is in charge of triggering the pipeline based on new code changes (i.e. git push or pull requests). In this workshop, we will be using AWS CodeCommit as the source provider, but CodePipeline also supports S3, GitHub and Amazon ECR as source providers.
 
-Let's go ahead and add a Source provider to our pipeline:
+Append the following code snippet after your bucket definition in the **pipeline-stack.ts** file:
 
+```js
+// Import existing CodeCommit sam-app repository
+const codeRepo = codecommit.Repository.fromRepositoryName(
+  this,
+  'AppRepository', // Logical name within CloudFormation
+  'sam-app' // Repository name
+);
+
+// Pipeline creation starts
+const pipeline = new codepipeline.Pipeline(this, 'Pipeline', {
+  artifactBucket: artifactsBucket
+});
+
+// Declare source code as an artifact
+const sourceOutput = new codepipeline.Artifact();
+
+// Add source stage to pipeline
+pipeline.addStage({
+  stageName: 'Source',
+  actions: [
+    new codepipeline_actions.CodeCommitSourceAction({
+      actionName: 'CodeCommit_Source',
+      repository: codeRepo,
+      output: sourceOutput,
+    }),
+  ],
+});
+```
+
+{{%expand "Click here to see how the entire file should look like" %}}
 ```js
 // lib/pipeline-stack.ts
 
@@ -53,6 +83,7 @@ export class PipelineStack extends cdk.Stack {
   }
 }
 ```
+{{% /expand%}}
 
 Since we already have the CodeCommit repository, we don't need to create a new one, we just need to import it using the repository name.