Giter VIP home page Giter VIP logo

portfolio-front-back-infra's Introduction

Deployment URL

http://ec2-13-239-119-130.ap-southeast-2.compute.amazonaws.com:5000

Solution Architecture

SOLUTION-DIAGRAM

Code Structure

> .github - Github Actions CICD Pipeline
    | cd.yml - continuous deployment workflow
    | ci.yml - continuous integration workflow
> backend - Node & Express & MongoDB code
    | .env local node config/creds
    | package.json - backend dependencies
> diagrams - stores all diagram code(if any)
    | sequence-diagram.txt - sequence diagram code
> e2eTests - playwright e2e tests(chrome only)
    | .env - local playwright configs
> frontend - Vite React
    | .env local frontend config/creds
    | package.json - frontend dependencies
> infrastructure AWS CDK TypeScript
    | package.json - AWS CDK dependencies
> scripts - useful scripts for local dev, CI and CD
> wiremock - mock gemini ai response for local dev
.env - MONGODB local config/creds
docker-compose-ci.yml - docker-compose for CI environment
docker-compose-prod.yml - docker-compose for PROD environment
docker-compose.yml - docker-compose for LOCAL DEV environment
Dockerfile - Frontend & Backend App docker container

Important: How to set up local development environment

Install nvm

Windows

Download the Zip (nvm-noinstall.zip) HERE

Mac

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

Provision nodejs

nvm install 20.11.1
nvm use 20.11.1

Install nodemon globally

npm install -g nodemon

setup frontend react project

cd ./frontend
npm install

setup backend node project

cd ../backend
npm install

Install Docker Desktop

Windows

Follow the instruction HERE

Mac

brew install docker

How to run frontend react, backend node, mongodb in dev mode or as docker containers

1. Run mongodb & wiremock(docker-compose)

Run this from Git Bash if you use Windows

# In a new shell, and keep this shell opened
cd ./backend
npm run start:dep

#Verify the env, Open http://localhost:8080/db/admin/ in your browser, and login with dev/dev

2. Run frontend react

cd ./frontend
npm run dev

3. Run backend node

cd ./backend
npm start
# (starts node server at `localhost:3000`)

MongoDB

Login to MongoDB

  1. default username: devroot
  2. default password: devroot
  3. default database: cs732

Login to MongoDB Admin Portal

http://localhost:8080/db/admin/

Username: dev, Password:dev


Verify the instance of the image is up and running

  1. Visit the backend: http://localhost:8001/api/users
  2. Visit the frontend: http://localhost:8000/
  3. Visit mongodb admin portal: http://localhost:8080 with username: dev, password: dev

How to test the code

Frontend unit tests

  1. cd ./frontend
  2. npm test

Backend unit tests

  1. cd ./backend
  2. npm test

Backend api integration tests

  1. spin up backend node.
  2. spin up mongodb database through docker-compose
cd ./backend
npm run test:e2e

You can also manually test APIs with swagger UI

  1. go to http://localhost:3000/api/api-docs
  2. view and call apis for testing

Testing AWS CDK infrastructure as code

We currently put dev and prod stacks all in one account but you can test deploying the stack with your own suffix. You need to reachout to Mark(mzhu929) for giving you permission to access AWS console and deploying stacks as this is his personal AWS account.

cd ./infrastructure
npm run deploy-dev

Wiremock

Put your mock files under deployment/wiremock/__files and deployment/wiremock/mappings

Refere the json example here: https://wiremock.org/docs/stubbing/

Browser end-to-end tests

Note that we support only Chrome at this time

Prerequisite

install playwright and chromium

npx playwright install --with-deps chromium

Ensure you have spinned up react, node servers & mongodb docker containers locally. If you have not, follow the How to run frontend react, backend node, mongodb in dev mode or as docker containers guide above.

under project root folder:

  1. cd e2eTests
  2. npm run test:e2e

If you raise a pr, Github Actions will trigger the ./github/workflow/ci.yml workflow which runs all automated tests

Q & A

1. sh command not found running npm commands

A: Please make sure you use Git Bash to run the command if you are on Windows

2. For AWS CDK code getting error when running npm run deploy-dev

A: See testing AWS CDK infrastructure as code section for details

3. How do I access latest deployed website

A: We provision new EC2 instances if we have infrastructure change. Need to go to github actions to grab the latest working public DNS. Get it from the latest successful CD build from Github Actions

portfolio-front-back-infra's People

Contributors

markzhuvuw avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.