Skip to main content

Angular boilerplate guide

Our Angular boilerplate will help you to quickly start developing robust products for Open OS. The boilerplate leverages Open Design System to ensure consistency in design and development.

Instructional image

Prerequisites​

tip

For smooth development experience, use NodeJS v16+.

# Check your current NodeJS version
node --version

Install and run​

#1 Clone the boilerplate and go to the directory that cointains it
git clone https://github.com/WPPOpen/os-angular-app-boilerplate

#2 Create your own .npmrc
cp .npmrc.tmpl .npmrc

#3 Install dependencies
npm install

#4 Start your product in the staging env
npm run start:stage

Open OS runs your product as a micro-frontend under the WPP workspace.

tip

For Mac users, if you are facing an issue with the loading of the Open OS workspace on safari, switch your browser to Chrome/Firefox/Edge.

  • To switch to a different workspace, in the product URL, change the workspace prefix.

    # From
    https://WPP.os.wpp.com/local/8500/sjs/main

    # To
    https://CHOREOGRAPH.os.wpp.com/local/8500/sjs/main

    Switching to a different workspace changes the product theme to that workspace's theme.

    Instructional image

  • To run your product under a specific hierarchy level, add the hierarchy ID to the workspace URL.

    https://ch.wpp-stage.os-dev.io/w/f96a0dff-9435-47d4-9955-71bd24999077/local/8500/sjs/main

Build your app​

# Create a production build
npm run build

This creates a production bundle in the build directory, which you can use to deploy your product.