summaryrefslogtreecommitdiffstats
path: root/docs/userguides/developer-guide/running-cds-ui-locally.rst
diff options
context:
space:
mode:
Diffstat (limited to 'docs/userguides/developer-guide/running-cds-ui-locally.rst')
-rw-r--r--docs/userguides/developer-guide/running-cds-ui-locally.rst168
1 files changed, 168 insertions, 0 deletions
diff --git a/docs/userguides/developer-guide/running-cds-ui-locally.rst b/docs/userguides/developer-guide/running-cds-ui-locally.rst
new file mode 100644
index 000000000..030ae356b
--- /dev/null
+++ b/docs/userguides/developer-guide/running-cds-ui-locally.rst
@@ -0,0 +1,168 @@
+.. This work is licensed under a Creative Commons Attribution 4.0 International License.
+.. http://creativecommons.org/licenses/by/4.0
+.. Copyright (C) 2019 IBM.
+
+.. _running_cds_ui_locally:
+
+Running CDS UI Locally
+======================
+
+.. toctree::
+ :maxdepth: 2
+
+Prerequisites
+-------------
+
+Node version: >= 8.9
+NPM version: >=6.4.1
+
+Check-out code
+--------------
+
+.. code-block:: bash
+
+ git clone "https://gerrit.onap.org/r/ccsdk/cds"
+
+Install Node Modules (UI)
+-------------------------
+
+From cds-ui/client directory, execute **npm install** to fetch project dependent Node modules
+
+Install Node Modules (Server)
+-----------------------------
+
+From cds-ui/server directory, execute **npm install** to fetch project dependent Node modules
+
+Run UI in Development Mode
+--------------------------
+
+From cds-ui/client directory, execute **npm start** to run the Angular Live Development Server
+
+.. code-block:: bash
+
+ nirvanr01-mac:client nirvanr$ npm start
+ > cds-ui@0.0.0 start /Users/nirvanr/dev/git/onap/ccsdk/cds/cds-ui/client
+ > ng serve
+
+ ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
+
+Run UI Server
+-------------
+
+From cds-ui/client directory, execute **mvn clean compile** then **npm run build** to copy all front-end artifacts to server/public directory
+
+.. code-block:: bash
+
+ nirvanr01-mac:client nirvanr$ npm run build
+ > cds-ui@0.0.0 build /Users/nirvanr/dev/git/onap/ccsdk/cds/cds-ui/client
+ > ng build
+
+From cds-ui/server directory, execute **npm run start** to build and start the front-end server
+
+.. code-block:: bash
+
+ nirvanr01-mac:server nirvanr$ npm run start
+ > cds-ui-server@1.0.0 prestart /Users/nirvanr/dev/git/onap/ccsdk/cds/cds-ui/server
+ > npm run build
+ > cds-ui-server@1.0.0 build /Users/nirvanr/dev/git/onap/ccsdk/cds/cds-ui/server
+ > lb-tsc es2017 --outDir dist
+ > cds-ui-server@1.0.0 start /Users/nirvanr/dev/git/onap/ccsdk/cds/cds-ui/server
+ > node .
+
+ Server is running at http://127.0.0.1:3000
+ Try http://127.0.0.1:3000/ping
+
+Build UI Docker Image
+---------------------
+
+From cds-ui/server directory, execute docker **build -t cds-ui .** to build a local CDS-UI Docker image
+
+.. code-block:: bash
+
+ nirvanr01-mac:server nirvanr$ docker build -t cds-ui .
+ Sending build context to Docker daemon 96.73MB
+ Step 1/11 : FROM node:10-slim
+ ---> 914bfdbef6aa
+ Step 2/11 : USER node
+ ---> Using cache
+ ---> 04d66cc13b46
+ Step 3/11 : RUN mkdir -p /home/node/app
+ ---> Using cache
+ ---> c9a44902da43
+ Step 4/11 : WORKDIR /home/node/app
+ ---> Using cache
+ ---> effb2329a39e
+ Step 5/11 : COPY --chown=node package*.json ./
+ ---> Using cache
+ ---> 4ad01897490e
+ Step 6/11 : RUN npm install
+ ---> Using cache
+ ---> 3ee8149b17e2
+ Step 7/11 : COPY --chown=node . .
+ ---> e1c72f6caa15
+ Step 8/11 : RUN npm run build
+ ---> Running in 5ec69a1961d0
+ > cds-ui-server@1.0.0 build /home/node/app
+ > lb-tsc es2017 --outDir dist
+ Removing intermediate container 5ec69a1961d0
+ ---> ec9fb899e52c
+ Step 9/11 : ENV HOST=0.0.0.0 PORT=3000
+ ---> Running in 19963303a09c
+ Removing intermediate container 19963303a09c
+ ---> 6b3b45709e27
+ Step 10/11 : EXPOSE ${PORT}
+ ---> Running in 78b9833c5050
+ Removing intermediate container 78b9833c5050
+ ---> 3835c14ad17b
+ Step 11/11 : CMD [ "node", "." ]
+ ---> Running in 79a98e6242dd
+ Removing intermediate container 79a98e6242dd
+ ---> c41f6e6ba4de
+ Successfully built c41f6e6ba4de
+ Successfully tagged cds-ui:latest
+
+Run UI Docker Image
+-------------------
+
+Create **docker-compose.yaml** as below.
+
+**Note:**
+
+- Replace <ip> with host/port where controller & processor mS are running.
+
+.. code-block:: bash
+
+ version: '3.3'
+ services:
+ cds-ui:
+ image: cds-ui:latest
+ container_name: cds-ui
+ ports:
+ - "3000:3000"
+ restart: always
+ environment:
+ - HOST=0.0.0.0
+ - API_BLUEPRINT_CONTROLLER_HTTP_BASE_URL=http://<ip>:8080/api/v1
+ - API_BLUEPRINT_CONTROLLER_HTTP_AUTH_TOKEN=Basic Y2NzZGthcHBzOmNjc2RrYXBwcw==
+ - API_BLUEPRINT_PROCESSOR_HTTP_BASE_URL=http://<ip>:8081/api/v1
+ - API_BLUEPRINT_PROCESSOR_HTTP_AUTH_TOKEN=Basic Y2NzZGthcHBzOmNjc2RrYXBwcw==
+ - API_BLUEPRINT_PROCESSOR_GRPC_HOST=<IP>
+ - API_BLUEPRINT_PROCESSOR_GRPC_PORT=9111
+ - API_BLUEPRINT_PROCESSOR_GRPC_AUTH_TOKEN=Basic Y2NzZGthcHBzOmNjc2RrYXBwcw==
+
+
+Execute **docker-compose up cds-ui**
+
+.. code-block:: bash
+
+ nirvanr01-mac:cds nirvanr$ docker-compose up cds-ui
+ Creating cds-ui ... done
+ Attaching to cds-ui
+ cds-ui | Server is running at http://127.0.0.1:3000
+ cds-ui | Try http://127.0.0.1:3000/ping
+
+
+Next
+----
+
+:ref:`CDS Designer UI <designer_guide>`