ShopStyle Portal

Requirements

Important, please note the version used here, and make sure to install them ! First make sure you have nvm installed to manage your node version which locked by .nvmrc:

nvm use

If no nvm command is found, please folow the instructions for installing nvm are here: https://github.com/creationix/nvm

Getting Started

To Start Clone this repository locally

git clone [email protected]:ShopStyle/portal.git

Make sure local.shopstyleops.com resolves to localhost

# edit /etc/hosts file
sudo echo "127.0.0.1 local.shopstyleops.com" >> /etc/hosts

We use Visual Studio Code for coding, run script to install all vscode extensions.

./tools/install_extensions.sh

To Install

npm install

To init project

run bash script

cp ./config/env/qa.ts ./config/env/local.ts && sed -i '' "s/'qa'/'development'/g" ./config/env/local.ts

cp ./src/environment/environment.qa.ts ./src/environment/environment.local.ts && sed -i '' "s/'qa'/'development'/g" ./src/environment/environment.local.ts

To Develop - runs the dev server, watches your files and autoreloads modules

npm start

Wait 30s or so until it's running and hit https://local.shopstyleops.com:3000

Having Issues If you are finding strange errors start by

rm -rf node_modules
npm cache clean
npm install

to reinstall and update all the dependencies

To build For production (use NODE_ENV=qa for QA)

NODE_ENV=production npm run build

Development

Portal is an Angular 15+ app written in TypeScript.

The Angular Material is used for better UI experience and user interactions.

Testing

We have unit test Jest and e2e test Playwright.

npm test to run unit test

npm run e2e to run e2e test

Please write unit test for shared components, service, utils, etc.

It's better to have tests as much as you can.

Workflow

Commit Message Format Each commit message includes a type, a scope and a subject. It should also have a footer specifying the ticket number when needed :

<type>(<scope>): <subject>
<BLANK LINE>
<ticket number> #Done

Samples:

docs(changelog): update change log to beta.5

fix(shipping-estimate): update shipping estimate model with the new api calls

ADMIN-504 #Done

Type Must be one of the following:

feat: A new feature

fix: A bug fix

docs: Documentation only changes

style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)

refactor: A code change that neither fixes a bug nor adds a feature

perf: A code change that improves performance

test: Adding missing tests or correcting existing tests

build: Changes that affect the build system or external dependencies (example scopes: webpack, npm, node)

ci: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)

chore: Other changes that don't modify src or test files

Submitting PRs When you want to submit a PR to this repository, use the command

git push mine <branch-name>

and then create a pull request on the main repo setting this branch against the development branch

Build & Deploy to QA

QA builds are built off of the development branch. For periodic QA builds, use the jenkins job SS_Portal-Frontend_Deploy, passing the qa environment. Once staged on QA, ensure that the fix version corresponding to the future release is added to the Jira ticket(s) tracking the feature(s) just staged. To find the latest fix version, either find the last release in the Engineering Release Train and increment by one, or find the latest unreleased fix version in Jira.

Build & Deploy to Production

Deploys to prod should be conducted weekly on Thursdays. Ensure that the most current build on QA has been thoroughly tested and that a subsequent QA deploy hasn't taken place since testing the current build on QA.

The production build is created from the master branch so before you begin, make sure changes you want to release are in that branch.

git checkout master

# make sure your local branch is up-to-date (assumes the popsugar repo is named origin)
git rebase origin/master

Bump version and generate changelog

# this script does:
# 1. git pull --tags origin master
# 2. npm version minor
# 3. node tools/changelog.js v0.000.00
# 4. git add CHANGELOG.md
# 5. git commit --amend with message chore: release 0.000.00
npm run new-version

Push the new version

# push the changes to Github, master is the branch used for releases
git push origin master

# if you don't have the push permission, you can create a PR against master
git push mine master

# push the version tag to Github
git push --tags

Deploy

Once the code is in the master branch, use the jenkins job SS_Portal-Frontend_Deploy, deploying to the production environment.

Mark release

Once the code is released to the production, mark the latest version as "released" in the release page

Roll back to the Latest Stable Build

If a build turns out to be unstable, we may need to roll back. Refer to the GitHub Releases page to find the release immediately prior to the latest release, and copy the commit hash of the release commit (not the tag). Go to the SS_Portal-Frontend_Deploy job, and for the parameters of the build, select production for the envirnment, and in the Branch_To_Build field, paste the commit hash of the good release. Then build; this will build and deploy the last, good release.

If that doesn't resolve the issue, you may need to roll back the backend or any other services that were deployed as part of that release to the versions they were at when stable. Refer to the Engineering Release Train for these services and versions, and use the shopstyle-beanstalk-deploy job to deploy them.