User Interface Project

(~15 minutes)

The UI Project will rely on the following:

• React -The create-react-app is sufficient starter for this MVP project )

• Apollo Client - Allows the UI to interact with the Apollo GraphQL data tier,

• React Router - An easy to use router for react.

• Ant Design - A versatile UI framework for React.

• Tailwindcss - Adds css styling through class names

• Storybook

Begin by initializing the project with these libraries.

From the azure-quickstart directory open a command prompt or console and issue the following commands:

Terminal / Command Propt

npx create-react-app ui --template typescript
cd ui

##CRACO IS USED FOR LESS (AntDesign Customization)
npm i @craco/craco@7.0.0-alpha.3 
npm i -D craco-less@2.1.0-alpha.0
npm i process browserify-zlib stream-browserify util buffer assert crypto-browserify

## Tailwind CSS is handy for UI design
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p #-p creates a postcss.config.js file

npm install @apollo/client graphql
npm install react-router-dom # ?? @types/react-router-dom
npm install antd


#npm i prop-types @types/prop-types
npx sb init --builder webpack5 # select NO if asked for npm7 migration
##npx -p @storybook/cli sb init
npm i -D @storybook/addons @storybook/theming chromatic
##npm i -D storybook-addon-playwright

In order to enable VS code debugging, the launch.json file will need to be modified.

Launch VS Code:

code .

Create launch.json file

In VSCode, In the left panel, go to the run tab. Click create a launch.json file and select Chrome from the dropdown.

Edit the launch.json file

(update port number as per your settings)

azure-quickstart/ui/.vscode/launch.json

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome",
      "request": "launch",
      "type": "pwa-chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "preLaunchTask": "npm: start",
      "postDebugTask": "kill-terminal",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack://./src/*": "${webRoot}/*"
      }
    },
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Storybook",
      "url": "http://localhost:8081",
      "webRoot": "${workspaceFolder}/src",
      "preLaunchTask": "storybook",
      "postDebugTask": "kill-terminal",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack://./src/*": "${webRoot}/*"
      },
    }
  ]
}

Add a tasks.json file

(update port number as per your settings)

azure-quickstart/ui/.vscode/task.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "npm",
      "script": "start",
      "group": {
        "kind": "test",
        "isDefault": true
      },
      "isBackground": true, // This prevents the launch.json to wait for the completion of the task
      "problemMatcher": {
        "owner": "custom", // This is not needed but, required by the problemMatcher Object
        "pattern": {
          "regexp": "^$" // This is not needed but, required by the problemMatcher Object
        },
        "background": {
          "activeOnStart": true,
          "beginsPattern": "Compiling...", // Signals the begin of the Task
          "endsPattern": "Compiled .*" // Signals that now the initialization of the task is complete
        }
      }
    },
    {
      "type": "shell",
      "command": "npx start-storybook -p 8081",
      "label": "storybook",
      "group": {
        "kind": "test",
        "isDefault": true
      },
      "isBackground": true, // This prevents the launch.json to wait for the completion of the task
      "problemMatcher": {
        "owner": "custom", // This is not needed but, required by the problemMatcher Object
        "pattern": {
          "regexp": "^$" // This is not needed but, required by the problemMatcher Object
        },
        "background": {
          "activeOnStart": true,
          "beginsPattern": ".*storybook\/react*", // Signals the begin of the Task
          "endsPattern": ".*Storybook.*started.*" // Signals that now the initialization of the task is complete
        }
      }
    },
    {
      "label": "kill-terminal",
      "type": "process",
      "command": "${command:workbench.action.terminal.kill}"
    }
  ]
}

Add a .env file

azure-quickstart/ui/.env

PORT=8080
BROWSER=none

Navigate to the source control tab of VS Code, locate the.env file and choose "Add to .gitignore"

In a multi-developer scenario developers will use .env.local, we'll only add default and non-sensitive values to the .env file

Go Ahead and launch the website by using VSCode Debugger.

Note: If the browser window does not open when you launch it from VSCode, then try removing "Browser=none" entry from .env file and relaunching app. This issue may occur when you already have a browser open from another app launch (such as Storybook)

Additional Reading:

• Create React App - Getting Started

• React Router - Documentation

• Apollo Client - Get Started

• Ant Design - Introduction

• Tailwindcss - Introduction