dfds-platform v1.0.0

DFDS-Platform workspace

Yarn workspace for working with the business-components packages

Installation

Install with npm:

npm install --save @dfds-platform/business-components-ts

Install with yarn:

yarn add @dfds-platform/business-components-ts

Start Storybook

Start Storybook: Run yarn run storybook in the workspace root folder to start Storybook.

Example App

There is a example app at https://dfds.visualstudio.com/DefaultCollection/Platform%20team/_git/platform-sample-app

Environment

For development you need to create a .env file with they following keys.

Look in .env.development for default values.

Publishing

New releases are created in github which will create a new tag. ADO will pick up on the new tag and publish a version with the that tag using the ci:publish npm script

Login component and AuthProvider configuration example:

Go to example

Developing using yarn link

It can be handy to use developing functionality in the context of an existing app. yarn link can be used in that case.

Getting started

A common problem when using yarn link is that you end of with multiple versions of packages (eg. react). This is because dependencies are resolved upwards from within the symlinked react-components folder.

webpack

If you are using webpack you can try setting resolve.symlinks to false in your webpack.config.js to only resolve dependencies from the apps node_modules folder.

Gatsby

Gatsby uses webpack under the hood, so in order to set resolve.symlinks add the following to the gatsby-node.js file

exports.onCreateWebpackConfig = ({ getConfig, actions, stage }) => {
  const config = getConfig();
  config.resolve.symlinks = false;
  actions.replaceWebpackConfig(config);
};

Setting up the link

In a terminal navifate to the packages/business-components-ts folder

cd ./packages/business-components-ts

Run build which will create a dist folder

yarn run build

Run watch to watch for changes and re-build

yarn run watch

Navigate into the dist folder and run yarn link

cd ./dist
yarn link

You are now ready to use the linked package from within you app while developing. Change to you app source folder (where the package.json file is located) and use the linked version of the @dfds-platform/business-components-ts package

yarn link @dfds-platform/business-components-ts