Experts UI Development Guide

This is a guide to help you get up and running UCS front end.

Press Ctrl+Shift+V to view this file on preview mode on Visual Studio Code

Quick Start Guide

Pre-requirment

• Node: LTE
• Yarn

Clone the repo

git clone https://office.visualstudio.com/DefaultCollection/MAX/_git/universal.campaign.service

In order for you to be able to install private packages, you need to configure the project to be able to pull scoped packages using your credentials. Here's how:

1. Go to the feed page on devops, for example the experts feed: https://office.visualstudio.com/MAX/_packaging?_a=feed&feed=experts

2. Click the Connect to feed button.

3. Select npm from the menu on the left hand side of the dialog, and follow the instructions in the dialog based on your development environment.

Scoped packages (not pulled from npm's public registry) are defined in the root .npmrc file.

This repo is managed by yarn workspaces which is a tool for managing monorepos with multiple smaller projects.

// in ucs.creative.service/
yarn install

This will call yarn run bootstrap as a postinstall hook which will install inner-project dependencies and link internal projects together. If inner dependencies change (e.g. if you run yarn add to bring in a new package in an internal project), or changing branches you'll likely need to run yarn run bootstrap again.

Once you do this, you do not need to / should not run yarn install on internal projects

The command yarn run clean will remove all inner dependencies (removing all node_modules) and should be your first resort if the project is acting strangely. You do NOT need to run this as part of initial setup.

// in ucs.creative.service/
yarn run clean

If you're running any of the various webapp packages, they likely consume some of our common packages. To build these to be consumable by create-react-app, please run the build command from the root of the repo. You may need to do this if you modify files in the following packages: packages/common, packages/telemetry

// in ucs.creative.service/
yarn run build

All sub-projects are found in the ucs.creative.service/packages/ folder. To run any of them, change to that directory and run yarn start. They should build and automatically launch the web

// in ucs.creative.service/packages/web
yarn start

Making changes

The following information applies to all internal projects in this repo

Branch Naming

When making changes, please use the following pattern for naming your branches for automatic builds to be run on push.

dev/{your-alias}/{feature-description}

Adding new dependencies

When adding new dependencies at the root level, run

yarn add [options] {dependency}

where the options include -W to explicitly add the package to the root. For example:

yarn add -DW eslint

When adding new dependencies at the individual package level, run at the inner package directory:

yarn add [options] {dependency}

For example

yarn add -D jest packages/web

Git Hooks

On Commit: Your code will be run through a linter, which will auto format your code as well as validate its content (e.g. checking if you forgot a debugger). If validation succeeds your code will be committed.

Pull requests

For each pull request, please update the package's version according to semantic versioning. For example: 0.1.0 to 0.1.1. Otherwise, the build pipeline will fail.

Build/Deploy pipelines

We have a pipeline to run a gated build on each PR iteration: https://office.visualstudio.com/MAX/_build?definitionId=14286

Once we complete a PR, we run a pipeline to publish the built assets into the nuget feed: https://office.visualstudio.com/MAX/_build?definitionId=14285

Currenty the nuget package is published under the name MS.UniversalCampaignServiceReact to the Office feed: https://office.visualstudio.com/MAX/_packaging?_a=feed&feed=Office

Recommended Tools & Settings

The team uses VSCode and a handful of useful extensions that hook into our linting rules to improve the development experience

• ESLint: Javascript linting with auto fixers
• Prettier: Formatting linting with auto fixers
• Stylelint: CSS linting

Visual Studio Code settings are in the .vscode/settings.json, as well as the recommended set of extensions listed in .vscode/extensions.json. Make sure to open workspace at the root level (ucs.creative.service/) in order for these to take effect.