Frontend

Scope

  • API Product
    • Website
      • NX Integrated
        • APP Name: mobile
        • APP Name: app
          • New Version
    • CMS
      • NX Packaged-Based
        • packages/dlh-web
        • packages/cms-webpack

Node

nvm use 16.16

Pre Development (1/1)

NX Packaged-Based

cd ./packages/dlh-web
npm install --legacy-peer-deps
npm run dev:in

cd ./packages/cms-webpack
npm install --legacy-peer-deps
npm run dev:in

Pre Development (1/2)

NX Integrated

Install Packages Management Tool

pnpm

Install Build System

nx

pnpm add -g nx

Install Packages

pnpm install


Development

HMR

# Run App
# nx serve [APP Name]
# Run mobile app
nx serve mobile

# Run Admin app (old)
cd packages/dlh-web
npm run dev:in

# Run Admin app (new)
cd packages/cms-webpack4
npm run dev:in

Storybook

# Generating Storybook Configuration
nx g @nx/react:storybook-configuration [project-name]
# Storybook
# nx storybook [APP Name]

# Storybook mobile app
nx storybook mobile

# Storybook lib: shared-ui
nx storybook mobile-shared-ui

# Storybook admin app

---

Lint

# Lint
# nx lint [APP Name]

# Lint mobile app
nx lint mobile

# Lint admin app

Format

# Format
# nx format
nx format:check
nx format:write
# nx format [APP Name]

# Format mobile app
nx format:check mobile
nx format:write mobile

# Format admin app
nx format:check admin
nx format:write admin

Show Dependencies

# Graph Apps
nx graph

Build

# Build App
# nx build [APP Name]

# Build mobile app
nx build mobile

# Build admin app

Projects Command

Base

nvm use 16.16.0
node -v
rm -rf node_modules
npm uninstall nx --location=global
npm install nx --location=global
npm install -g pnpm
pnpm install
npm -v
nx reset

Mobile

pnpm nx build mobile
pnpm nx serve mobile

dlh-web (old admin)

cd ./packages/dlh-web
npm install
npm run [scripts]

Admin (new dlh-web)

cd ./packages/cws-webpack4
npm run [scripts]

pnpm workspace (未使用)

# use pnpm workspace to manage packages
#Run pnpm import to generate a pnpm-lock.yaml file
pnpm import # root path cannot have pnpm-lock.yaml, otherwise cannot generate packages's pnpm-lock.yaml
# install packages's dependecies in workspace
pnpm install

Lerna (未使用)

# install lerna
# pnpx learn init # 無效
pnpx lerna init

# Bootstrapping Projects
pnpx lerna bootstrap --use-workspaces

nx + lerna (未使用)

# install nx + pnpm workspace's packages
pnpm install

pnpm nx run build

#pnpx lerna run build --scope=dlh-web
#pnpx lerna run build --scope=backstage_system

# install package
pnpm -F  backstage_system  add webpack-dev-server@3.11.0 -D

Senty

Why am I seeing events with "Non-Error exception (or promise rejection) captured with keys: ..." using the JavaScript SDK? http://%5B%E4%BD%BF%E7%94%A8@sentry/webpack-plugin%E4%B8%8A%E4%BC%A0SourceMap](https://www.jianshu.com/p/11ebf61aca6e) Webpack 前端打包工具 - 依照指定環境挑選適合的 SourceMap 類型


semver

https://github.com/jscutlery/semver