Styleguide Patternlab

JDD PM E1

Install the project

1. Install Docker
2. Install Docker Compose
3. Install the Docker Development Stack

Launch Traefik at first

Build the project container before the first launch make start make build

Finally, update project assets :

npm install

Compile scss

npm run build

And then launch project

npm start

Now, the FrontEnd is accessible through :

• http://127.0.0.1:3000/?p=all
• http://dev.paris-match-styleguide.com

FrontEnd Linter

JS lint use ESLint with AirBnB coding style, and CSS Lint use stylelint with coding-standard

1. Run npm run csslint or csslint-fix for local.
2. Run npm run jslint or jslint-fix for local.

Create package

Package are automaticaly created when branch is merged on master To create a test package :

1. Run npm run build to compile scss files
2. Edit package version in the package.json of the project [versionId]-[taskId]
3. Go to packages/uikit-[projectName] (packages/uikit-jdd, packages/uikit-pm, packages/uikit-e1)
4. Run npm publish --tag=[tagName]
5. Check in Gitlab if package is created (Deploy > Package Registry)

Defaults tag name

1. Default --tag=lastest (automatic when merged on master)
2. For release branch --tag=next or --tag=releaseName
3. For test --tag=demo-[id]

Upgrade package in projects

1. In the project repo, make bash
2. Run yarn upgrade @styleguide/uikit-[projectName]@[packageVersion] (yarn upgrade @styleguide/[email protected])
3. Build assets make assets-build

Workflow

1. Create a test package to test in the project
2. Merge request in master or release branch
3. Do not merge until the task is tested and validated
4. Edit the package version to have the lastest that is in the package registery
5. Merge
6. Upgrade the package version in the project and ask a code review to merge on master
7. Delete test/release package