1*cf78ab8cSAndroid Build Coastguard Worker<p align="center"> 2*cf78ab8cSAndroid Build Coastguard Worker <img width="200" src="https://open-wc.org/hero.png"></img> 3*cf78ab8cSAndroid Build Coastguard Worker</p> 4*cf78ab8cSAndroid Build Coastguard Worker 5*cf78ab8cSAndroid Build Coastguard Worker## netsim web UI 6*cf78ab8cSAndroid Build Coastguard Worker 7*cf78ab8cSAndroid Build Coastguard WorkerThis directory contains the Web UI for netsim. 8*cf78ab8cSAndroid Build Coastguard Worker 9*cf78ab8cSAndroid Build Coastguard Worker## Prerequisite 10*cf78ab8cSAndroid Build Coastguard Worker 11*cf78ab8cSAndroid Build Coastguard WorkerThe netsimd web server must be up and running. 12*cf78ab8cSAndroid Build Coastguard Worker 13*cf78ab8cSAndroid Build Coastguard Worker## Build Commands 14*cf78ab8cSAndroid Build Coastguard Worker 15*cf78ab8cSAndroid Build Coastguard WorkerFirstly, you must enter the ui directory and run npm install. 16*cf78ab8cSAndroid Build Coastguard Worker 17*cf78ab8cSAndroid Build Coastguard Worker```sh 18*cf78ab8cSAndroid Build Coastguard Workercd $REPO/tools/netsim/ui 19*cf78ab8cSAndroid Build Coastguard Workernpm install 20*cf78ab8cSAndroid Build Coastguard Worker``` 21*cf78ab8cSAndroid Build Coastguard Worker 22*cf78ab8cSAndroid Build Coastguard WorkerCommand for compiling and building web UI: 23*cf78ab8cSAndroid Build Coastguard Worker 24*cf78ab8cSAndroid Build Coastguard Worker```sh 25*cf78ab8cSAndroid Build Coastguard Workernpm run build 26*cf78ab8cSAndroid Build Coastguard Worker``` 27*cf78ab8cSAndroid Build Coastguard Worker 28*cf78ab8cSAndroid Build Coastguard WorkerCommand for translating netsim's model.proto into model.ts: 29*cf78ab8cSAndroid Build Coastguard Worker 30*cf78ab8cSAndroid Build Coastguard Worker```sh 31*cf78ab8cSAndroid Build Coastguard Workernpm run tsproto 32*cf78ab8cSAndroid Build Coastguard Worker``` 33*cf78ab8cSAndroid Build Coastguard Worker 34*cf78ab8cSAndroid Build Coastguard WorkerCommand for running local web development server: 35*cf78ab8cSAndroid Build Coastguard Worker 36*cf78ab8cSAndroid Build Coastguard Worker```sh 37*cf78ab8cSAndroid Build Coastguard Workernpm start 38*cf78ab8cSAndroid Build Coastguard Worker``` 39*cf78ab8cSAndroid Build Coastguard Worker 40*cf78ab8cSAndroid Build Coastguard WorkerLocal web server will be served in `http://localhost:8000/web/` 41*cf78ab8cSAndroid Build Coastguard Worker 42*cf78ab8cSAndroid Build Coastguard Worker## Scripts 43*cf78ab8cSAndroid Build Coastguard Worker 44*cf78ab8cSAndroid Build Coastguard Worker- `build` compiles TypeScript into JavaScript and bundle to distribution with rollup 45*cf78ab8cSAndroid Build Coastguard Worker- `tsproto` translates netsim's model.proto into model.ts 46*cf78ab8cSAndroid Build Coastguard Worker- `start` runs your app for development, reloading on file changes 47*cf78ab8cSAndroid Build Coastguard Worker 48*cf78ab8cSAndroid Build Coastguard Worker## Tooling configs 49*cf78ab8cSAndroid Build Coastguard Worker 50*cf78ab8cSAndroid Build Coastguard Worker- `package.json` contains all npm packages and scripts for web development 51*cf78ab8cSAndroid Build Coastguard Worker- `rollup.config.mjs` applies import mappings to CDNs and bundles to distribution 52*cf78ab8cSAndroid Build Coastguard Worker- `tsconfig.json` has configurations for typescript compiling. 53*cf78ab8cSAndroid Build Coastguard Worker 54*cf78ab8cSAndroid Build Coastguard Worker## Authors 55*cf78ab8cSAndroid Build Coastguard Worker 56*cf78ab8cSAndroid Build Coastguard Worker[Hyun Jae Moon] [email protected] 57*cf78ab8cSAndroid Build Coastguard Worker 58*cf78ab8cSAndroid Build Coastguard Worker[Bill Schilit] [email protected]
