Hosting a Full-Stack Application

Live Demo 🡥

---

Table of Contents

1. Project Summary
2. Dependencies
3. Installation
   • Environment Variables
4. Testing
5. Diagrams
6. Screenshots
7. Built With
8. Acknowledgements

Project Summary

In this project, will take a newly developed full stack application and deploy it to a cloud service provider so that it is available to customers. This application contains the main components of a 3-tier full stack application (UI, API, and Database).

I did the following:

• Configure the services and infrastructure on AWS
• Create scripts to deploy each component of the application
• Create and document an automated pipeline using CircleCI

Dependencies

➡ Node v14.15.1 (LTS) or more recent. While older versions can work it is advisable to keep node to latest LTS version

➡ npm 6.14.8 (LTS) or more recent, Yarn can work but was not tested for this project

➡ AWS CLI v2, v1 can work but was not tested for this project

➡ A RDS database running Postgres.

➡ A S3 bucket for hosting uploaded pictures.

Installation

Clone the Repo

git clone https://github.com/FADL285/Hosting-a-Full-Stack-Application.git

Environment Variables

Here are the environmental variables that needs to be set in a .env file.

This is the default setting that you can use for development.

POSTGRES_USERNAME=postgres
POSTGRES_PASSWORD="YOUR_POSTGRES_PASSWORD"
POSTGRES_HOST=127.0.0.1
POSTGRES_DB=postgres
JWT_SECRET="YOUR_JWT_SECRET"
AWS_BUCKET=""
AWS_REGION=""
AWS_PROFILE=default
URL=127.0.0.1

Install Dependencies

npm install frontend:install

npm install api:install

Run the Application

npm run frontend:start

npm run api:start

Testing

This project contains two different test suite: unit tests and End-To-End tests(e2e). Follow these steps to run the tests.

1. cd udagram/udagram-frontend
2. npm run test
3. npm run e2e

There are no Unit test on the back-end

Diagrams

• AWS Infrastructure Diagram Check AWS Infrastructure Description for more details.

• Pipeline process Diagram Check CircleCI Pipeline Process for more details.

Screenshots

• App Running on S3

• Testing Postgres Database Connection - RDS

• AWS S3 Config with files uploaded

• Elastic Beanstalk Status & Health

• CircleCi Pipeline & Env Variables

Built With

• Angular - Single Page Application Framework
• Node - Javascript Runtime
• Express - Javascript API Framework
• TypeScript - A strongly typed programming language that builds on JavaScript
• AWS RDS - Used for create a Postgres database
• AWS S3 - Used for hosting frontend static files
• AWS Elastic Beanstalk - Used for hosting backend API

Acknowledgements

➡ Udacity