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:

PreviousDirectory Structure NextConfiguring StoryBook

Last updated 2 years ago

Was this helpful?

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

{ // 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}/*" }, } ] }

{ "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}" } ] }