Build a React & Redux App w/ CircleCI CI/CD, AWS & Terraform

Install the core tools for building a React app: Node.js, Create React App via npx or npm, GitHub and Git, AWS S3 with CloudFront, and CircleCI CI/CD configuration.

Boot up a React app with Create React App using npx, view the project structure in the source directory, and implement functional components with yarn start, build, and test.

Coordinate three environments—dev, staging, production—using feature branches and a single continuous integration platform to automatically deploy to S3 buckets across development, staging, and production.

Create a GitHub project by initializing a repository, naming it react cinema app, making it public, then commit and push changes to master while setting up a readme and gitignore.

Create the develop branch from master and set it as default, then create a staging branch. Merge feature branches into develop first, then staging, then master, with optional reviews.

Set up your GitHub project in CircleCI, add the .circleci/config.yml, then run npm install to automate builds and workflows.

Fetch and synchronize the develop branch locally, then check out develop to create feature branches, and switch between develop, staging, and master to manage local work and merged pull requests.

Explore Amazon Web Services basics, create an account, and learn to use CloudFront and S3 for hosting a static single-page app, with guidance on the management console and regions.

Create an AWS IAM user, assign policies (admin access or specific policies), enable programmatic access, download keys, and configure CircleCI project environment variables to store them securely.

Add an AWS region to CircleCI environment variables by copying the region from the project settings. Create an AWS_REGION variable with that value.

Create an Amazon simple storage service dev bucket via the management console, enable public static website hosting with index.html, and plan dev, staging, and production buckets.

Configure an S3 bucket policy to allow get requests for your React app assets, making them publicly accessible via CloudFront while keeping permissions aligned with the policy JSON.

Create staging and production s3 buckets under production, copy the dev policy to staging, ensure public access before policy, and set environment variables for bucket names to drive configuration.

Create an AWS CloudFront distribution to deliver a React app from an S3 bucket, leveraging edge locations for fast, secure delivery.

Add staging and production distributions and set environment variables for dev, staging, and production. Apply S3 bucket policies and CloudFront origin identities to enable static website hosting.

Configure and wire three ci jobs from scratch, including deploying to AWS CloudFront and AWS S3, using executors, aliases, and workflows to manage job dependencies.

Explore essential CircleCI concepts, including configuring the versioned config, jobs, steps, images, caches, and workflows, and deploy to S3 and CloudFront with Slack integrations.

Build a CircleCI config from scratch, defining a build job with a node image, checkout, branch display, and caching, then outline lint, test, and deploy to S3 and CloudFront.

Add an install dependencies step to the build job, using npm install (or yarn with global install), check out the branch, restore cache, and store node modules for faster builds.

Create a CircleCI deploy job to push a React & Redux app to AWS S3 using the circleci/node docker image, including checkout, branch display, build, and deployment.

Experience a CircleCI AWS S3 deployment workflow that uses environment variables and if-else logic to deploy to development, staging, or production buckets based on the current git branch.

Learn to build a CircleCI job that deploys to AWS CloudFront, reuse variables, configure CloudFront, perform cache invalidation with the distribution ID, and assemble a deployment workflow.

Define CircleCI workflows to orchestrate job order and dependencies, deploying to S3 and CloudFront after the build, with branch-specific execution.

Learn to configure CircleCI CI/CD for a React and Redux app, adding build and deploy jobs, managing branches, and deploying static assets to S3 and CloudFront with environment variables.

Deploy to staging automatically by merging dev into staging, triggering CircleCI CI/CD pipelines that build to S3 and CloudFront; review steps and config refactor streamline deployments.

Refactor the Docker image and working directory into a single executable, define an executor, and use aliases to reuse npm install, restore cache, and build and deploy steps.

Deploy your React and Redux app to Heroku, review costs, and replace with AWS configurations as you activate accounts, add deployment commands, and set up cloud environments.

Explore an optional iroko deployment section that guides setting up a deployment pipeline with two jobs, using heroku as a cloud platform when account issues arise.

Create three separate Heroku apps for dev, staging, and production without pipelines, then map deployments from branches and manage configuration variables on the free tier.

Configure CircleCI environment variables and add a Heroku API key to enable deployment, then add a deploy to Heroku job with branch-based conditions, including checkout and npm install caching.

Explore configuring a Heroku deployment in CircleCI, gate deployments by branch, use the Heroku API key env var, and force push with the -f flag after a build.

Push changes from your develop or feature branches, triggering CircleCI to build and deploy a React and Redux app to Heroku, with logs showing the deployment progress.

Configure an express server to run the app on Heroku by creating a server file, using process.env.PORT (fallback 3000), and serving the build folder's index.html for all routes.

Deploy express server changes to Heroku by serving the built front-end assets, monitor the build pipeline, and replicate the setup for staging.

Merge dev changes into staging with pull requests, verify conflicts, and trigger automatic builds to deploy your React app to staging and production on Heroku using CI/CD.

Configure CircleCI deployments to Heroku across dev, staging, and production with branch-specific commands. Show pull requests from develop to staging to master and add Docker image creation and testing jobs.

Set up the project with linked configuration files, add editorconfig and prettier settings, install required modules, and configure lint and prettier checks in the CI/CD workflow before build and deploy.

Install eslint and eslint-config-standard, set up dot eslintrc.json with browser environment and react plugin, customize rules for semicolons and spacing, and add a lint script to package.json.

Run the linting command for the React and Redux project by installing the required yes links plugin and resolving syntax errors until lint passes.

Add a CircleCI linting job that runs after the build, reuses node cache, and executes npm run lint (or yarn lint) across all branches to catch issues and ensure dependencies.

Set up and run a linting job in CircleCI to lint code, build, and deploy to AWS, with dev-branch checkout and environment setup.

Install and configure prettier and editorconfig, create .prettierrc.json and .editorconfig, add scripts for prettier check and prettier fix, and demonstrate automatic formatting to enforce consistent style across source files.

Add a prettier job to the CI/CD pipeline by renaming the lint job to prettier, enforcing a prettier check, and deploying to S3 after build completion.

I fixed the prettier job failure by committing changes to the prettier file; now the job succeeds and deploys to S3 and CloudFront.

Integrate Slack into the CI pipeline to create a build notification workflow, using webhooks to post success or failure alerts to a Slack channel.

Set up a Slack workspace and channel, then integrate Slack with CircleCI by adding a webhook and configuring environment variables to enable CI/CD notifications.

Create a new Slack app in the Circusy project, configure permissions, install it to obtain the access token, and set it as Slark assess token.

Learn to add the Slack token as a CircleCI environment variable, naming it correctly, with an optional channel setting, and adapt to the updated Slack orb version.

CircleCI orbs package reusable configuration elements—jobs, commands, and executors—so you can import and reuse them in your config, including the Slack orb for streamlined CI/CD.

Learn to integrate CircleCI Slack orbs 2.0 into your React and Redux CI/CD workflow by updating the config, adding the orb and job, and wiring the workflow.

Learn to add a Slack notification job to your CircleCI workflow after deploying to cloud front, including defining a Slack executor, events, channel, and custom templates.

Learn to build a Slack custom template for CircleCI notifications, detailing blocks, markdown and plain text fields, headers, and displaying project name, branch, time, build, and author.

Add a view job button to a custom template, displaying project name, branch, execution time, build number, and user, with a button that opens the job URL using environment variables.

Add a Slack notify job to the workflow and configure it to run only after deployment steps, enabling quick Slack messages during testing.

Uncomment and remove the tests job, then configure CircleCI jobs to run a build first, then a second job, with a final CloudFront deployment and Slack notification after completion.

Upgrade the Slack Sentry integration by following on-screen prompts to authorize your workspace and create the Slack bot. Handle private channels with extra steps; public channels require no additional steps.

Write and test Terraform code to provision AWS resources, including a CloudFront distribution and S3 buckets, and integrate the setup into the CircleCI pipeline for a React & Redux app.

Install terraform on macOS by downloading, unzipping, and moving the binary to /usr/local/bin, then verify with terraform version. The process supports CircleCI CI/CD integration using a Terraform image.

Learn to provision AWS resources with Terraform by writing code to create S3 buckets, CloudFront distributions, and IAM policies, replacing manual console setup; run Terraform to automate infrastructure provisioning.

Create an S3 bucket backend for Terraform to securely store and version state remotely, enabling the team to have the same history.

Define and manage Terraform variables in an infrastructure folder, using defaults for prefix, project name, and a custom_arrow_response list to route cloudfront error redirects to the index page.

define a terraform block with a minimum required version and an aws provider in the versions file, specifying the provider source and version to enforce compatibility.

Set up a Terraform remote backend using an S3 bucket, configure provider and region, enable encryption, and apply common tags and workspace naming to organize resources.

Learn how Terraform now uses separate aws s3 resources for bucket, acl, and policy, enable versioning, and block public access for secure CloudFront delivery.

Configure S3 buckets with private ACL, block public access, and enable versioning; dynamically attach a policy using a data block and enable static website hosting.

Define Terraform outputs to expose S3 bucket details, such as the bucket name and other attributes, for use in the CircleCI pipeline and deployment.

Add terraform state and related files to gitignore to keep the repo lean, then run terraform commands (validate, plan, apply, destroy, fmt, workspace) in the infrastructure directory.

Run terraform init to initialize the backend, ensure your pocket is public, and configure AWS keys as environment variables for local testing, then format and validate your code.

Learn to run terraform apply locally, use plan and workspace commands, manage S3 buckets, and export outputs for a CircleCI AWS deployment pipeline.

Launch a CloudFront distribution with Terraform, using an S3 origin and Origin Access Identity, configure viewer policy to https, default root object index.html, and caching and query string forwarding.

Implement a cloudfront distribution by dynamically integrating a custom error response block with Terraform for_each, looping through the custom error response list. Configure global access and secure delivery using CloudFront default certificates, set geo restriction to none, and add tags while referencing origin, origin access identity, and the S3 distribution name.

Learn to provision a CloudFront distribution with Terraform, approve the apply, and output the distribution details to integrate into a CircleCI CI/CD pipeline on AWS.

Execute Terraform destroy to remove all resources created by Terraform, review the listed resources, and confirm with yes or auto-approve to complete destruction.

Learn to configure a remote terraform backend by creating an infrastructure folder, using an AWS S3 backend with bucket, key, region eu central one, and enabling encryption for remote state.

Define local variables in terraform to prefix resource names, configure a variables file, and use workspaces (dev, staging, production) with environment tags and owner metadata for organized infrastructure.

Create an aws s3 bucket with terraform, configuring acl, privacy, static website hosting, index and error documents, versioning, and policies for a reproducible dev workflow.

Explore adding a terraform bucket policy to an s3 bucket for static website hosting, including in-line policy or a separate aws_s3_bucket_policy, using version 2012-10-17 and GetObject actions.

This lecture shows building an AWS CloudFront distribution with Terraform, configuring an S3 bucket origin, and using the default certificate, with notes on deployment time and default behaviors.

Explain setting up a cloudfront distribution with a custom origin, SSL protocols, default root object, and cache behavior—forwarding query strings and cookies for a single-page app.

Configure a CloudFront distribution with custom error responses, caching minimum time, and error codes; then set restrictions, default certificates, and tags via Terraform for CI/CD.

Automate resource provisioning with terraform by validating, planning, and applying changes, using terraform outputs to drive deployment names, and requiring manual approval for destroy within the pipeline.

Integrate Terraform into the CircleCI pipeline by configuring AWS credentials as environment variables, and provisioning via a Terraform executor image in CircleCI.

Add a terraform validate and format job to the ci pipeline, running after prettier and lint, and initialize the infrastructure folder backend in force mode before terraform validate.

Create a Terraform plan and apply CI workflow in CircleCI to provision infrastructure, manage workspaces per branch, and persist outputs as artifacts for downstream deployment.

Attach the Terraform workspace, run plan and apply to produce s3 outputs as artefacts text files, then use cut to strip quotes and set the bucket name for environment deployment.

Attach the workspace, extract and clean the file name, and set a cloudfront distribution output property. Update variables to cloudfront distribution id and prepare a destroy step for Terraform resources.

Add a Terraform destroy job to the ci/cd pipeline with approval gating. Configure workspace handling and run destroy after user approval using existing Terraform commands.

Sequence terraformed jobs in a workflow with dependencies, run terraformed validate, plan and apply, deploy to enterprise cloud front, and require type approval for terraformed destroy.

Push code to GitHub and monitor CircleCI pipelines, running build, Terraform plan and apply, and deploy to S3 CloudFront, while managing artifacts and environment variables.

Create the artifacts directory before npm install, persist the workspace in artifacts, and adjust Terraform destroy to attach the workspace and remove artifact steps.

Demonstrates a Terraform destroy workflow within a ci/cd pipeline, showing plan and apply steps, approval gating, and teardown of S3 buckets and CloudFront distribution after deployment.