Udagram AWS Deployment

Deploy a full-stack website onto AWS using CircleCI - Advanced Web Development egFWD - Third Project

This project was implemented upon a starter project provided by Udacity. Here is the starter project repository.

You can find the website deployed on AWS S3 via live website link.

Table of Contents

• Udagram AWS Deployment
• Table of Contents
• Installation
• Development
  • Architecture
• Installed NPM Packages
  • Development Packages
• Useful Resources

Installation

(Back to top)

To use this project, you need to follow the commands below:

1. Clone the repository into your local machine:

   git clone https://github.com/ibrahimelmokhtar/udagram-deployment.git

2. Redirect inside the cloned repository:

   cd udagram-deployment/

3. Install the required packages:

   npm install

   NOTE: this command will install ALL the required dependencies: server-side and client-side.

4. Copy example.env file into .env file.

5. Fill the created .env file with corresponding/appropriate information.

6. For applying configured styling, run the following commands:

   • Prettier styling:

     npm run prettier

   • ESLint styling:

     npm run lint

7. For running test scripts, run the following command:

   npm run test

   NOTE: this command will test both server and client sides.

8. For working with the production phase, run the following commands:

   npm run build

   Then, Deploy the built versions of both server and client sides:

   npm run deploy

   Then, Open the website deployed on AWS S3 via the following link:

   http://mokhtar-udagram-bucket.s3-website-us-east-1.amazonaws.com

Development

(Back to top) This section will explain how the code works and how everything is put together.

Architecture

(Back to top)

This project has the structure shown below:

Project Structure

├─── circleci/
    └─── config.yml
├─── .runbooks/
   ├─── eb-check-health.md
   ├─── eb-create-application.md
   ├─── eb-deploy-environment.md
   ├─── eb-terminate-environment.md
   ├─── rds-create-instance.md
   ├─── rds-delete-instance.md
   ├─── rds-start-instance.md
   ├─── rds-stop-instance.md
   ├─── README.md
   ├─── s3-create-bucket.md
   ├─── s3-delete-bucket.md
   └─── s3-upload-bucket.md
├─── reviews/
   ├─── AWS EB/
      ├─── aws-eb-1.PNG
      └─── aws-eb-2.PNG
   ├─── AWS RDS/
      ├─── aws-rds-1.PNG
      └─── aws-rds-2.PNG
   ├─── AWS S3/
      ├─── aws-s3-1.PNG
      └─── aws-s3-2.PNG
   ├─── CircleCI Build/
      ├─── circleci-00-workflow.PNG
      ├─── circleci-10-install-client.PNG
      ├─── circleci-11-build-client.PNG
      ├─── circleci-12-deploy-client.PNG
      ├─── circleci-20-install-server.PNG
      ├─── circleci-21-build-server.PNG
      └─── circleci-22-deploy-server.PNG
   └─── CircleCI Environment/
      ├─── circleci-env-1.PNG
      └─── circleci-env-2.PNG
├─── scripts/
   ├─── eb-create.sh
   ├─── eb-deploy.sh
   ├─── eb-health.sh
   ├─── eb-terminate.sh
   ├─── rds-create.sh
   ├─── rds-delete.sh
   ├─── rds-start.sh
   ├─── rds-stop.sh
   ├─── s3-create.sh
   ├─── s3-delete.sh
   └─── s3-upload.sh
├─── udagram-api/
├─── udagram-frontend/
├─── .env
├─── .eslintignore
├─── .eslintrc
├─── .gitignore
├─── .prettierrc
├─── example.env
├─── package.json
└─── README.md

Installed NPM Packages

(Back to top)

These packages are required to run this project smoothly without any errors.

Development Packages

These packages can be found in the "devDependencies" object inside the package.json file.

• @typescript-eslint/eslint-plugin - TypeScript plugin for ESLint.
• @typescript-eslint/parser - An ESLint custom parser which leverages TypeScript ESTree.
• eslint - An AST-based pattern checker for JavaScript.
• eslint-config-prettier - Turns off all rules that are unnecessary or might conflict with Prettier.
• eslint-plugin-prettier - Runs prettier as an eslint rule.
• prettier - Prettier is an opinionated code formatter.
• typescript - TypeScript is a language for application scale JavaScript development.

Useful Resources

(Back to top)

• Documentation: Install AWS CLI
• Documentation: Install AWS EB CLI
• Youtube Video: Install AWS EB CLI
• Documentation: Configure AWS CLI
• Documentation: Manipulate AWS RDS via CLI
• Documentation: Create a DB Instance
• Documentation: Manipulate AWS EB via CLI
• Documentation: AWS EB CLI Commands
• Documentation: Manipulate AWS S3 via CLI
• Documentation: Configuring CircleCI