Feathr Web UI MVP

.github/workflows/feature-web-ui.yml

@@ -0,0 +1,47 @@
+name: Feathr Web UI CI/CD on Azure Web App
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    types: [opened, synchronize, reopened, closed]
+    branches:
+      - main
+
+jobs:
+  build_and_deploy_job:
+    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
+    runs-on: ubuntu-latest
+    name: Build and Deploy Job
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          submodules: true
+      - name: Build And Deploy
+        id: builddeploy
+        uses: Azure/static-web-apps-deploy@v1
+        with:
+          azure_static_web_apps_api_token: ${{ secrets.AZURE_DEPLOYMENT_TOKEN_FEATHR_UI }}
+          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
+          skip_deploy_on_missing_secrets: true
+          action: "upload"
+          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
+          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
+          app_location: "/ui" # App source code path
+          api_location: "api" # Api source code path - optional
+          output_location: "build" # Built app content directory - optional
+          ###### End of Repository/Build Configurations ######
+
+  close_pull_request_job:
+    if: github.event_name == 'pull_request' && github.event.action == 'closed'
+    runs-on: ubuntu-latest
+    name: Close Pull Request Job
+    steps:
+      - name: Close Pull Request
+        id: closepullrequest
+        uses: Azure/static-web-apps-deploy@v1
+        with:
+          azure_static_web_apps_api_token: ${{ secrets.AZURE_DEPLOYMENT_TOKEN_FEATHR_UI }}
+          skip_deploy_on_missing_secrets: true
+          action: "close"

ui/.eslintrc

@@ -0,0 +1,28 @@
+{
+  "env": {
+    "commonjs": true,
+    "es6": true,
+    "node": true
+  },
+  "extends": [
+    // https://github.com/eslint/eslint/blob/main/conf/eslint-recommended.js
+    "eslint:recommended",
+    // https://github.com/facebook/create-react-app/tree/main/packages/eslint-config-react-app
+    "react-app"
+  ],
+  "parserOptions": {
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  },
+  "rules": {
+    "dot-notation": "error"
+  },
+  "overrides": [
+    {
+      "files": [
+        "**/*.ts?(x)"
+      ],
+      "rules": {}
+    }
+  ]
+}

ui/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

ui/README.md

@@ -0,0 +1,46 @@
+# Feathr UI
+
+This is Feathr web ui frontend code
+
+## Prerequisites
+Install the latest version of [NodeJS](https://nodejs.org/en/) LTS v14.x or v16.x. Make sure to use npm no later than 6.x. Run **node --version** and **npm --version** to verify installed versions.
+
+## Build and run locally
+
+Each command in this section should be run from the root directory of the repository.
+
+Open terminal, go to root of this repository and run following commands.
+
+```bash
+cd ui
+npm install
+npm start
+```
+
+This should launch [http://localhost:3000/](http://localhost:3000/) on your web browser. The page will reload when you make code changes and save.
+
+## Deploying
+
+For deployment, run `npm run build` and upload `build/` to your server. Docker image based deployment is coming soon.
+
+## Lint
+
+To lint typescript code files, sim run:
+```bash
+npm run lint:fix
+```
+
+This command will Automatically fix all problems that can be fixed, and list the rest problems requires manual fix. 
+Linting rules are configured in [.eslintrc](.eslintrc) file. 
+
+## Project Structure
+
+```
+src/
+  api         // rest client
+  components  // shared react components
+  models      // api data model, view model, etc
+  pages       // a view on the page, can be routed by url path
+  router      // url path and page mapping
+```
+