luancaius / udacity-clouddeveloper-proj3

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Docker Images

  1. reverse proxy - https://hub.docker.com/repository/docker/luancaius/reverseproxy2
  2. frontend - https://hub.docker.com/repository/docker/luancaius/udacity-frontend2
  3. backend-feed - https://hub.docker.com/repository/docker/luancaius/udacity-restapi-feed2
  4. backend-user - https://hub.docker.com/repository/docker/luancaius/udacity-restapi-user2

Udagram Image Filtering Application

Udagram is a simple cloud application developed alongside the Udacity Cloud Engineering Nanodegree. It allows users to register and log into a web client, post photos to the feed, and process photos using an image filtering microservice.

The project is split into two parts:

  1. Frontend - Angular web application built with Ionic Framework
  2. Backend RESTful API - Node-Express application

Solution Notes

  • With the solution, we can run the application through Docker rather than independently installing packages and running the Backend API and Frontend App. Refer to the README in udagram-deployment on notes on how to run with docker-compose.

  • The backend API has been decomposed into two independent microservices for users and for the feed. As such, there is a bit of duplicate code across the two codebases. In real-world scenarios, this would often be done to get our microservice up and running. To clean this up, the approach would be to abstract out common code into a library such as an internal npm package that each project would use.

Getting Started

tip: it's recommended that you start with getting the backend API running since the frontend web application depends on the API.

Prerequisite

  1. The depends on the Node Package Manager (NPM). You will need to download and install Node from https://nodejs.com/en/download. This will allow you to be able to run npm commands.
  2. Environment variables will need to be set. These environment variables include database connection details that should not be hard-coded into the application code.

Database

Create a PostgreSQL database either locally or on AWS RDS. Set the config values for environment variables prefixed with POSTGRES_ in set_env.sh.

S3

Create an AWS S3 bucket. Set the config values for environment variables prefixed with AWS_ in set_env.sh.

Backend API

  • To download all the package dependencies, run the command from the directory udagram-api/:
    npm install .
  • To run the application locally, run:
    npm run dev
  • You can visit http://localhost:8080/api/v0/feed in your web browser to verify that the application is running. You should see a JSON payload. Feel free to play around with Postman to test the API's.

Frontend App

  • To download all the package dependencies, run the command from the directory udagram-frontend/:
    npm install .
  • Install Ionic Framework's Command Line tools for us to build and run the application:
    npm install -g ionic
  • Prepare your application by compiling them into static files.
    ionic build
  • Run the application locally using files created from the ionic build command.
    ionic serve
  • You can visit http://localhost:8100 in your web browser to verify that the application is running. You should see a web interface.

Tips

  1. Take a look at udagram-api -- does it look like we can divide it into two modules to be deployed as separate microservices?
  2. The .dockerignore file is included for your convenience to not copy node_modules. Copying this over into a Docker container might cause issues if your local environment is a different operating system than the Docker image (ex. Windows or MacOS vs. Linux).
  3. It's useful to "lint" your code so that changes in the codebase adhere to a coding standard. This helps alleviate issues when developers use different styles of coding. eslint has been set up for TypeScript in the codebase for you. To lint your code, run the following:
    npx eslint --ext .js,.ts src/
    To have your code fixed automatically, run
    npx eslint --ext .js,.ts src/ --fix
  4. Over time, our code will become outdated and inevitably run into security vulnerabilities. To address them, you can run:
    npm audit fix

About


Languages

Language:TypeScript 78.2%Language:HTML 7.4%Language:JavaScript 6.1%Language:CSS 5.2%Language:Dockerfile 1.5%Language:Shell 1.5%