Skip to content

Frontend Deployment — AWS Amplify

The frontend is deployed as a CDN-hosted SPA via AWS Amplify hosting.


Build Specification

File: amplify.yml (monorepo root)

yaml
version: 1
applications:
  - frontend:
      phases:
        preBuild:
          commands:
            - npm install -g pnpm
            - pnpm install --frozen-lockfile
            - pnpm --filter @my-app/shared build
        build:
          commands:
            - pnpm --filter @my-app/frontend build
      artifacts:
        baseDirectory: apps/frontend/dist
        files:
          - "**/*"
      cache:
        paths:
          - node_modules/**/*
    appRoot: .

Build Steps Explained

StepCommandPurpose
1npm install -g pnpmInstall pnpm on the Amplify build agent
2pnpm install --frozen-lockfileInstall all workspace deps from lockfile
3pnpm --filter @my-app/shared buildBuild shared package first (generates types + dist)
4pnpm --filter @my-app/frontend buildBuild Vite SPA to apps/frontend/dist/

Required Environment Variables

Set these in the Amplify Console → App Settings → Environment Variables:

VariableValue
VITE_API_BASE_URLhttps://app.intecoglogistech.com
VITE_APP_ENVproduction

WARNING

VITE_ prefixed variables are embedded into the bundle at build time by Vite. They are visible in the browser. Never put secrets here.


Artifact Directory

apps/frontend/dist/

Amplify serves all files in this directory as a static website with CloudFront CDN.


SPA Routing

Since the app uses createWebHashHistory, URLs contain # (e.g. https://app.intecoglogistech.com/#/dashboard). This means:

  • The server only ever serves index.html for all requests
  • No server-side rewrite rules are needed
  • Browser refresh always loads the correct page

If you switch to createWebHistory, you must add an Amplify rewrite rule:

Source:      </^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>
Target:      /index.html
Type:        200 (Rewrite)

Continuous Deployment

Amplify is connected to the Git repository. Every push to the main (or configured) branch automatically triggers a new build and deployment.

Intecog Logistech IoT Monitoring Platform