Current Students, visit the student website for the information you need.
Student Portal

Cloud For Developers

Back to Cloud For Developers Projects

Objectives

  • Managing Source Code using GIT & GitHub
  • Create a build process using CodeBuild
  • Create a deployment process

Project Overview

You have a decided that you are moving forward with a web development project. You have chosen AWS as your platform and your application will be written in ReactJS and hosted with AWS S3. You are required to use GIT & GitHub for your source code repository. One of the main requirements of your project is to rapidly iterate site changes as your requirements change. In order to fulfill this requirement, you are going to use an AWS Code Pipeline to deploy your application everytime there is an update on your repository's master branch.

Project Details

S3

  • Create a S3 bucket that is going to host a static website. The S3 bucket and all the items within the bucket should be made available publicly. This is the S3 bucket that you are going to use to deploy your ReactJS application.

GitHub

  • Create a GitHub repository. This is the repository that is going to store your source code from your ReactJS application.

NodeJS & NPM

  • Install NodeJS 14.x on your development machine. When you install NodeJS, you are also installing NPM. Verify that NodeJS and NPM are working by issuing the commands node -v and npm -v. Take a screenshot of the window indicating the versions of NodeJS and NPM that you are running.
  • Use the command: npx create-react-app [app-name-goes-here] to create your p3 ReactJS application.
  • Add your project to git and push your application to GitHub

Code Pipeline

  • Create a Code Pipeline name cloud-for-developers-project3 and use the default: 'new service role' for the pipeline.
  • Choose GitHub as your source provider and choose your GitHub repository that you created previously (where your ReactJS code is located). Choose 'master' as the branch. The detection option should be GitHub webhooks.
  • Choose AWS CodeBuild as your build provider and choose to create a new project.
  • Within the build project settings, choose the following options:
    • • Operating System: Ubuntu
    • • Runtime: Standard
    • • Image: Standard:5.0
    • • The rest of the setting should be left as the default options
    • • Add a buildspec.yml file to your ReactJS project directory. The buildspec file from the YouTube screencast (with updates for version 0.2 of buildspec) is included in the project description. Commit the buildspec.yml file to and push it to GitHub.
  • Within the deploy stage, choose Amazon S3 as your deploy provider. Select your bucket that created in a previous step and make sure to select the option 'Extract file before deploy'.
  • Make a change to your src/App.js file so that it renders your name. Take a screenshot of your CodePipeline successfully processing the GitHub repository change.

Tests / Verification / Project Completion

  • When I change my source code and push the code to GitHub, does the change get automatically reflected on the S3 site?
  • Is my site publicly accessible? Can I see my site running properly
  • Turn in the following items:
    • • Your website url
    • • Your GitHub repository url
    • • Your screenshots from your NodeJS and NPM version commands
    • • A screenshot of your CodePipeline that was successfully processed a change reflected in your GitHub repository

What did I learn?

  • Creating and managing a GitHub repository
  • Using GitHub to trigger a CodePipeline deployment
  • Setting up S3 to host a ReactJS application