# CHIP Web Components
New project to replace the old styleguide and bring our frontend to a new level.
## Styleguide
Styleguide will be generated dynamic from the comments in the `CSS` `JS` files.
The tool we use for that is **SourceJS** ([sourcejs.com](https://sourcejs.com/))
## Install
Before you start, please make sure that [Git](http://git-scm.com/downloads) and [Node.js](http://nodejs.org/download/) are already installed on your system. Then install the npm packages packages:
```
npm install
```
After you installed the npm packages you have to initialize the **SourceJS** (build the source):
```
grunt build
```
## Run the Server
After you have done this you can run the server:
```
grunt server
```

If you are having a conflict with running the server it could be because the Port is already taken. For this case try:
```
grunt server --port=8081
```

Together with the internal server for the page it starts a watch-task which reacts if something gest changed in the files.

## Deploy the Styleguide to Staging or Production
First step to deploy a new version to staging is to build it: 
```
grunt tag && npm install
```

Since the npm install is also triggered also with the docker-command (but will fail) we need (for the time being) to empty all dependencies & devDependencies in the package.json (but not commit it) 

After we emptied the package.json we need to run the following commands 
(For this you need a docker-hub account which is connected to the team "devs" in the organisation "chip" & probably need to login (docker login) )

```
docker build -t chip/webcomponents:(versionNr) .
```
(versionNr is for example 0.6.1) (small info: the dot at the end tells to search directly in root-folder for the Dockerfile)


if build successfully tag the docker image as newest staging and push it to dockerhub
```
docker tag chip/webcomponents:(versionNr) chip/webcomponents:latest-stg
```
```
docker push chip/webcomponents:latest-stg
```

As soon as the Docker-Image is on dockerhub we run got to the Server 
https://ops-styleguide-jenkins-ber-01.int.chip.de/ 
run the task **11 deploy styleguide.chip.de to staging**
(Login here is your normal LDAP-User)

After this you could preview the Styleguide at http://stg-styleguide-web-ber-01.int.chip.de:8080/

If everything ist alright with the Staging-Deploy we could push it to live: 
```
docker tag chip/webcomponents:(versionNr) chip/webcomponents:latest-prd
```
```
docker push chip/webcomponents:latest-prd
```

And run task **12 deploy styleguide.chip.de to production** on the Jenkins https://ops-styleguide-jenkins-ber-01.int.chip.de/
After this the styleguide is available with following address http://prd-styleguide-web-ber-01.int.chip.de:8080/
or from external http://styleguide.chip.de/ (htaccess secured)