Merge frontend repo into backend repo (#31)

* merge frontend + nginx into backend

* fix readme

* add frontend

* add in xss code

Author: stanleegoodspeed

.env.template

@@ -11,4 +11,41 @@ ATTACK_HOST=nginx
 ATTACK_PORT=80
 ATTACK_SSH_INTERVAL=0
 ATTACK_GOBUSTER_INTERVAL=0
-ATTACK_HYDRA_INTERVAL=0
+ATTACK_HYDRA_INTERVAL=0
+
+
+COMMERCE_PROVIDER=@vercel/commerce-spree
+# NEXT_PUBLIC_* are exposed to the web browser and the server #
+NEXT_PUBLIC_SPREE_API_HOST=http://web:4000
+NEXT_PUBLIC_SPREE_CLIENT_HOST=http://localhost:4000
+NEXT_PUBLIC_SPREE_DEFAULT_LOCALE=en-us
+NEXT_PUBLIC_SPREE_CART_COOKIE_NAME=spree_cart_token
+# cookie expire in days #
+NEXT_PUBLIC_SPREE_CART_COOKIE_EXPIRE=7
+NEXT_PUBLIC_SPREE_USER_COOKIE_NAME=spree_user_token
+NEXT_PUBLIC_SPREE_USER_COOKIE_EXPIRE=7
+NEXT_PUBLIC_SPREE_IMAGE_HOST=http://localhost:4000
+NEXT_PUBLIC_SPREE_ALLOWED_IMAGE_DOMAIN=localhost
+NEXT_PUBLIC_SPREE_CATEGORIES_TAXONOMY_PERMALINK=/t/categories
+NEXT_PUBLIC_SPREE_BRANDS_TAXONOMY_PERMALINK=/t/brands
+NEXT_PUBLIC_SPREE_ALL_PRODUCTS_TAXONOMY_ID=false
+NEXT_PUBLIC_SPREE_SHOW_SINGLE_VARIANT_OPTIONS=false
+NEXT_PUBLIC_SPREE_LAST_UPDATED_PRODUCTS_PRERENDER_COUNT=10
+NEXT_PUBLIC_SPREE_PRODUCT_PLACEHOLDER_IMAGE_URL=/product-img-placeholder.svg
+NEXT_PUBLIC_SPREE_LINE_ITEM_PLACEHOLDER_IMAGE_URL=/product-img-placeholder.svg
+NEXT_PUBLIC_SPREE_IMAGES_OPTION_FILTER=false
+NEXT_PUBLIC_SPREE_IMAGES_SIZE=1000x1000
+NEXT_PUBLIC_SPREE_IMAGES_QUALITY=100
+NEXT_PUBLIC_SPREE_LOGIN_AFTER_SIGNUP=true
+NEXT_PUBLIC_ADS_PORT=7676
+NEXT_PUBLIC_DISCOUNTS_PORT=2814
+NEXT_PUBLIC_ADS_ROUTE="http://localhost"
+NEXT_PUBLIC_DISCOUNTS_ROUTE="http://localhost"
+NEXT_PUBLIC_DD_APPLICATION_ID=""
+NEXT_PUBLIC_DD_CLIENT_TOKEN=""
+NEXT_PUBLIC_DD_SITE="datadoghq.com"
+NEXT_PUBLIC_DD_SERVICE="frontend"
+NEXT_PUBLIC_DD_VERSION="1.0.0"
+NEXT_PUBLIC_DD_ENV="development"
+NEXT_PUBLIC_AUTH_ROUTE="http://localhost"
+NEXT_PUBLIC_AUTH_PORT="7578"

.github/workflows/frontend.yml

@@ -0,0 +1,50 @@
+name: Frontend
+
+on:
+  push:
+    branches: [ main ]
+    paths:
+      - services/frontend/**
+  workflow_dispatch:
+    branches: [ main ]
+
+defaults:
+  run:
+    working-directory: frontend
+
+jobs:
+
+  build:
+
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v2
+
+    - name: Set up Docker Buildx
+      uses: docker/setup-buildx-action@v1
+
+    - name: Configure AWS credentials
+      uses: aws-actions/configure-aws-credentials@v1
+      with:
+        aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+        aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+        aws-region: us-east-1
+
+    - name: Login to ECR
+      id: login-ecr
+      uses: docker/login-action@v1
+      with:
+        registry: public.ecr.aws
+        username: ${{ secrets.AWS_ACCESS_KEY_ID }}
+        password: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+
+    - name: Build and push
+      uses: docker/build-push-action@v2
+      with:
+        context: ./services/frontend
+        platforms: linux/amd64
+        push: true
+        tags: ${{ secrets.PUBLIC_ECR_REGISTRY }}/storedog/frontend:latest
+

.github/workflows/nginx.yml

@@ -0,0 +1,50 @@
+name: Nginx
+
+on:
+  push:
+    branches: [ main ]
+    paths:
+      - services/nginx/**
+  workflow_dispatch:
+    branches: [ main ]
+
+defaults:
+  run:
+    working-directory: nginx
+
+jobs:
+
+  build:
+
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1
+
+      - name: Configure AWS credentials
+        uses: aws-actions/configure-aws-credentials@v1
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: us-east-1
+
+      - name: Login to ECR
+        id: login-ecr
+        uses: docker/login-action@v1
+        with:
+          registry: public.ecr.aws
+          username: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          password: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+
+      - name: Build and push
+        uses: docker/build-push-action@v2
+        with:
+          context: ./services/nginx
+          platforms: linux/amd64
+          push: true
+          tags: ${{ secrets.PUBLIC_ECR_REGISTRY }}/storedog/nginx:latest
+

.github/workflows/release.yml

@@ -42,6 +42,8 @@ jobs:
             ${{ secrets.PUBLIC_ECR_REGISTRY }}/storedog/ads-java
             ${{ secrets.PUBLIC_ECR_REGISTRY }}/storedog/attackbox
             ${{ secrets.PUBLIC_ECR_REGISTRY }}/storedog/auth
+            ${{ secrets.PUBLIC_ECR_REGISTRY }}/storedog/nginx
+            ${{ secrets.PUBLIC_ECR_REGISTRY }}/storedog/frontend
           )
 
           for i in "${IMAGES[@]}"

.gitignore

@@ -45,3 +45,10 @@ yarn-debug.log*
 /yarn-error.log
 /app/assets/builds/*
 !/app/assets/builds/.keep
+
+# local env files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local

README.md

@@ -1,21 +1,27 @@
-# Storedog Backend
+# Storedog
+
+This a dockerized [Spree Commerce](https://spreecommerce.org) application consumed by a NextJS frontend.
 
-This a dockerized [Spree Commerce](https://spreecommerce.org) application consumed by [Storedog - Frontend](https://github.com/DataDog/storedog-frontend).
 ## Local development
 
-**1.** Before starting the containers, you will need to define the required env vars. Run the following command to copy the env var template to the `.env` file:
+**1.** Before starting the containers, you will need to define the required env vars. Run the following command to copy the env var template:
+
+`cp .env.template .env && cp .env.template ./deploy/docker-compose/.env && cp .env.template ./services/frontend/site/.env.local`
+
+**2.**
+Open the `.env` file under the project root and enter the values for the variables. The default values should all work except for the empty `DD_API_KEY`, which is required to run the DD agent.
 
-`cp .env.template .env && cp .env.template ./deploy/docker-compose/.env`
+**3.**
+Open the `./services/frontend/site/.env.local` file and enter the values for the variables. The default values should all work except for the empty `NEXT_PUBLIC_DD_APPLICATION_KEY` and `NEXT_PUBLIC_CLIENT_TOKEN`, which are required to enable RUM.
 
-Then, open the `.env` file and enter the values for the variables. The default values should all work except for the empty `DD_API_KEY`, which is required to run the DD agent.
+**4.** Start the app: `docker-compose up`
 
-**2a.** To start the backend containers using the local build context, run:
-`docker-compose up`
+## Image publication
+Images are stored in our public ECR repo `public.ecr.aws/x2b9z2t7`. On PR merges, only the affected services will be pushed to the ECR repo, using the `latest` tag. For example, if you only made changes to the `backend` service, then only the `backend` Github workflow will trigger and publish `public.ecr.aws/x2b9z2t7/storedog/backend:latest`. 
 
-**2b.** To start the backend containers using the published images in ECR, run:
-`docker-compose -f ./deploy/docker-compose/docker-compose.yml -p storedog-backend up`
+Separately, we tag and publish *all* images when a new release is created with the corresponding release tag e.g. `public.ecr.aws/x2b9z2t7/storedog/backend:1.0.1`. New releases are made on an ad-hoc basis, depending on the recent features that are added.
 
-To build the frontend, please see the README in the [Storedog - Frontend](https://github.com/DataDog/storedog-frontend) repo.
+# Backend
 ## Database rebuild
 
 The current database is based off sample data provided by the Spree starter kit. To create a new `.sql` dump file, run the following command while the application is running.
@@ -58,7 +64,101 @@ Username: [email protected]
 Password: spree123
 ```
 
-## Image publication
-Images are stored in our public ECR repo `public.ecr.aws/x2b9z2t7`. On PR merges, only the affected services will be pushed to the ECR repo, using the `latest` tag. For example, if you only made changes to the `backend` service, then only the `backend` Github workflow will trigger and publish `public.ecr.aws/x2b9z2t7/storedog/backend:latest`. 
 
-Separately, we tag and publish *all* images when a new release is created with the corresponding release tag e.g. `public.ecr.aws/x2b9z2t7/storedog/backend:1.0.1`. New releases are made on an ad-hoc basis, depending on the recent features that are added.
+# Frontend
+
+## Considerations
+
+- `packages/commerce` contains all types, helpers and functions to be used as base to build a new **provider**.
+- **Providers** live under `packages`'s root folder and they will extend Next.js Commerce types and functionality (`packages/commerce`).
+- We have a **Features API** to ensure feature parity between the UI and the Provider. The UI should update accordingly and no extra code should be bundled. All extra configuration for features will live under `features` in `commerce.config.json` and if needed it can also be accessed programatically.
+- Each **provider** should add its corresponding `next.config.js` and `commerce.config.json` adding specific data related to the provider. For example in case of BigCommerce, the images CDN and additional API routes.
+
+## Configuration
+
+### Enable RUM
+
+To enable RUM, generate a new RUM application in DD and then set the `NEXT_PUBLIC_DD_APPLICATION_KEY` and `NEXT_PUBLIC_CLIENT_TOKEN` values in `./site/.env.local`. Then start the app, click around the site, and you should start to see RUM metrics populating in DD.
+
+### Features
+
+Every provider defines the features that it supports under `packages/{provider}/src/commerce.config.json`
+
+#### Features Available
+
+The following features can be enabled or disabled. This means that the UI will remove all code related to the feature.
+For example: Turning `cart` off will disable Cart capabilities.
+
+- cart
+- search
+- wishlist
+- customerAuth
+- customCheckout
+
+#### How to turn Features on and off
+
+> NOTE: The selected provider should support the feature that you are toggling. (This means that you can't turn wishlist on if the provider doesn't support this functionality out the box)
+
+- Open `site/commerce.config.json`
+- You'll see a config file like this:
+  ```json
+  {
+    "features": {
+      "wishlist": false,
+      "customCheckout": true
+    }
+  }
+  ```
+- Turn `wishlist` on by setting `wishlist` to `true`.
+- Run the app and the wishlist functionality should be back on.
+
+## Troubleshoot
+
+<details>
+<summary>When run locally I get `Error: Cannot find module '...@vercel/commerce/dist/config'`</summary>
+
+```bash
+commerce/site
+❯ yarn dev
+yarn run v1.22.17
+$ next dev
+ready - started server on 0.0.0.0:3000, url: http://localhost:3000
+info  - Loaded env from /commerce/site/.env.local
+error - Failed to load next.config.js, see more info here https://nextjs.org/docs/messages/next-config-error
+Error: Cannot find module '/Users/dom/work/vercel/commerce/node_modules/@vercel/commerce/dist/config.cjs'
+    at createEsmNotFoundErr (node:internal/modules/cjs/loader:960:15)
+    at finalizeEsmResolution (node:internal/modules/cjs/loader:953:15)
+    at resolveExports (node:internal/modules/cjs/loader:482:14)
+    at Function.Module._findPath (node:internal/modules/cjs/loader:522:31)
+    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:27)
+    at Function.mod._resolveFilename (/Users/dom/work/vercel/commerce/node_modules/next/dist/build/webpack/require-hook.js:179:28)
+    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
+    at Module.require (node:internal/modules/cjs/loader:1005:19)
+    at require (node:internal/modules/cjs/helpers:102:18)
+    at Object.<anonymous> (/Users/dom/work/vercel/commerce/site/commerce-config.js:9:14) {
+  code: 'MODULE_NOT_FOUND',
+  path: '/Users/dom/work/vercel/commerce/node_modules/@vercel/commerce/package.json'
+}
+error Command failed with exit code 1.
+info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
+```
+
+The error usually occurs when running yarn dev inside of the `/site/` folder after installing a fresh repository.
+
+In order to fix this, run `yarn dev` in the monorepo root folder first.
+
+> Using `yarn dev` from the root is recommended for developing, which will run watch mode on all packages.
+
+</details>
+
+<details>
+<summary>When run locally I get `Error: Spree API cannot be reached'`</summary>
+
+The error usually occurs when the backend containers are not yet fully healthy, but the frontend has already started making API requests.
+
+In the docker logs output for storedog-backend, check to see if the backend has fully started. You should see the following log for the `web` container:
+```
+web_1       | [1] * Listening on http://0.0.0.0:4000
+```
+
+</details>

deploy/docker-compose/docker-compose.yml

@@ -1,5 +1,27 @@
 version: '3.7'
 services:
+  frontend:
+    image: public.ecr.aws/x2b9z2t7/storedog/frontend:1.0.2
+    command: yarn dev
+    volumes:
+      - "../../services/frontend/site:/storedog-app/site"
+    depends_on:
+      - worker
+    ports:
+      - 3000:3000
+    networks:
+      - storedog-net
+  nginx:
+    image: public.ecr.aws/x2b9z2t7/storedog/nginx:1.0.2
+    restart: always
+    ports:
+      - "80:80"
+    depends_on:
+      - frontend
+    labels:
+      com.datadoghq.ad.logs: '[{"source": "nginx", "service": "nginx"}]'
+    networks:
+      - storedog-net
   postgres:
     image: postgres:13-alpine
     restart: always