diff --git a/docs/labs/inventory-app/inventory-appid/index.md b/docs/labs/inventory-app/inventory-appid/index.md index 7cc3b27..c7b6971 100644 --- a/docs/labs/inventory-app/inventory-appid/index.md +++ b/docs/labs/inventory-app/inventory-appid/index.md @@ -165,7 +165,7 @@ The following prerequisites are required for AppID integration: ### AppID redirect url config -- Get the ingress for the UI component by running `igc ingress -n dev-{initials}`. +- Get the ingress for the UI component by running `igc ingress -n inventory-${UNIQUE_SUFFIX}-dev`. - Open the IBM Cloud resource list - `https://cloud.ibm.com/resources` diff --git a/docs/labs/inventory-app/inventory-bff/index.md b/docs/labs/inventory-app/inventory-bff/index.md index 67d5e3c..0f96bb7 100644 --- a/docs/labs/inventory-app/inventory-bff/index.md +++ b/docs/labs/inventory-app/inventory-bff/index.md @@ -13,14 +13,14 @@ The Inventory solution will use [GraphQL](https://graphql.org/) for its BFF laye ## Setup !!! note - Following this section means you have already deployed and configured the backend service from the previous step. Your OpenShift cluster should have the `inventory-${INITIALS}-dev` project (with `${INITIALS}` as your actual initials), that has been configured with `ci-config` and `registry-config` secrets during previous lab. + Following this section means you have already deployed and configured the backend service from the previous step. Your OpenShift cluster should have the `inventory-${UNIQUE_SUFFIX}-dev` project (with `${UNIQUE_SUFFIX}` as your team name or initials), that has been configured with `ci-config` and `registry-config` secrets during previous lab. ### Create your OpenShift project, Git Repository and CI pipeline - Create a new repository from the [Typescript GraphQL template](https://github.com/cloud-design-patterns-journey/template-graphql-typescript/generate). !!! warning - In order to prevent naming collisions if you are running this as part of a workshop, chose the GitHub organization you have been invited to as `Owner` and name the repository `inv-bff-${INITIALS}`, replacing `${INITIALS}` with your actual initials. + In order to prevent naming collisions if you are running this as part of a workshop, chose the GitHub organization you have been invited to as `Owner` and name the repository `inv-bff-${UNIQUE_SUFFIX}`, replacing `${UNIQUE_SUFFIX}` with your team name or initials. - Deploy this application with Tekton: @@ -37,18 +37,18 @@ The Inventory solution will use [GraphQL](https://graphql.org/) for its BFF laye oc login --token= --server= ``` - - Move to your `inventory-${INITIALS}-dev` project created in previous lab: + - Move to your `inventory-${UNIQUE_SUFFIX}-dev` project created in previous lab: ```sh - export INITIALS=ns # CHANGEME - oc project inventory-${INITIALS}-dev + export UNIQUE_SUFFIX=ns # CHANGEME + oc project inventory-${UNIQUE_SUFFIX}-dev ``` - Clone the repo locally: ```sh - git clone https://github.com/cloud-design-patterns-journey/inv-bff-${INITIALS}.git - cd inv-bff-${INITIALS} + git clone https://github.com/cloud-design-patterns-journey/inv-bff-${UNIQUE_SUFFIX}.git + cd inv-bff-${UNIQUE_SUFFIX} ``` - Create the tekton pipeline for the backend service your new project: @@ -60,7 +60,7 @@ The Inventory solution will use [GraphQL](https://graphql.org/) for its BFF laye !!! note - `tkn pac create repository` assumes you have [Pipelines-as-Code](https://pipelinesascode.com/docs/install/overview/) already setup on your cluster and Git provider. If you are running this lab as part of a workshop, this has been configured for you, make sure you use the provided GitHub organization when you create yout Git repository from template above. - - `oc adm policy add-scc-to-user privileged -z pipeline` will make sure that the Tekton pipeline will be able to escalade privileges in your `inventory-${INITIALS}-dev` project/namespace. + - `oc adm policy add-scc-to-user privileged -z pipeline` will make sure that the Tekton pipeline will be able to escalade privileges in your `inventory-${UNIQUE_SUFFIX}-dev` project/namespace. - In OpenShift console (**Pipelines Section > Pipelines > Repositories**), edit the newly created `Repository` YAML to add cluster specific configuration (e.g. image repository): @@ -592,8 +592,8 @@ for GraphQL. - Last step before checking out our changes to git is to make sure our Kubernetes/OpenShift deployment will get the `SERVICE_URL` environment variable configured. To do so, create a secret and patch the deployment to use it as source for environment variables: ```sh - oc create secret generic inv-bff-${INITIALS}-config --from-literal=SERVICE_URL=http://inv-svc-${INITIALS}:8080 - kubectl set env --from=secret/inv-bff-${INITIALS}-config deployment/inv-bff-${INITIALS} + oc create secret generic inv-bff-${UNIQUE_SUFFIX}-config --from-literal=SERVICE_URL=http://inv-svc-${UNIQUE_SUFFIX}:8080 + kubectl set env --from=secret/inv-bff-${UNIQUE_SUFFIX}-config deployment/inv-bff-${UNIQUE_SUFFIX} ``` - After validation, commit and push the changes to git: diff --git a/docs/labs/inventory-app/inventory-service/index.md b/docs/labs/inventory-app/inventory-service/index.md index 98d4bbf..e20ee0e 100644 --- a/docs/labs/inventory-app/inventory-service/index.md +++ b/docs/labs/inventory-app/inventory-service/index.md @@ -7,7 +7,7 @@ - Create a new repository for the service from the [Spring Boot Microservice](https://github.com/cloud-design-patterns-journey/template-java-spring/generate) template. Make the cloned repository public. !!! warning - In order to prevent naming collisions if you are running this as part of a workshop, chose the GitHub organization you have been invited to as `Owner` and name the repository `inv-svc-${INITIALS}`, replacing `${INITIALS}` with your actual initials. + In order to prevent naming collisions if you are running this as part of a workshop, chose the GitHub organization you have been invited to as `Owner` and name the repository `inv-svc-${UNIQUE_SUFFIX}`, replacing `${UNIQUE_SUFFIX}` with your team name or initials. - Deploy this application with Tekton: @@ -24,11 +24,11 @@ oc login --token= --server= ``` - - Create a new `inventory-${INITIALS}-dev` project (setting the `INITIALS` environment variables with your actual initials to have a unique name): + - Create a new `inventory-${UNIQUE_SUFFIX}-dev` project (setting the `UNIQUE_SUFFIX` environment variables with your team name or initials to have a unique name): ```sh - export INITIALS=ns # CHANGEME - oc new-project inventory-${INITIALS}-dev + export UNIQUE_SUFFIX=ns # CHANGEME + oc new-project inventory-${UNIQUE_SUFFIX}-dev ``` - Create `registry-config` and `ci-config` secrets required for your pipeline runs to access your container registry: @@ -61,15 +61,15 @@ If you are doing this lab as part of a workshop secrets have been created for you in the `ci-tools` namespace, you just need to copy them: ```sh - oc get secret registry-config -n ci-tools -o yaml | sed "s/ci-tools/inventory-${INITIALS}-dev/g" | oc apply -f - - oc get secret ci-config -n ci-tools -o yaml | sed "s/ci-tools/inventory-${INITIALS}-dev/g" | oc apply -f - + oc get secret registry-config -n ci-tools -o yaml | sed "s/ci-tools/inventory-${UNIQUE_SUFFIX}-dev/g" | oc apply -f - + oc get secret ci-config -n ci-tools -o yaml | sed "s/ci-tools/inventory-${UNIQUE_SUFFIX}-dev/g" | oc apply -f - ``` - Clone the repo locally: ```sh - git clone https://github.com/cloud-design-patterns-journey/inv-svc-${INITIALS}.git - cd inv-svc-${INITIALS} + git clone https://github.com/cloud-design-patterns-journey/inv-svc-${UNIQUE_SUFFIX}.git + cd inv-svc-${UNIQUE_SUFFIX} ``` - Create the tekton pipeline for the backend service your new project: @@ -81,7 +81,7 @@ !!! note - `tkn pac create repository` assumes you have [Pipelines-as-Code](https://pipelinesascode.com/docs/install/overview/) already setup on your cluster and Git provider. If you are running this lab as part of a workshop, this has been configured for you, make sure you use the provided GitHub organization when you create yout Git repository from template above. - - `oc adm policy add-scc-to-user privileged -z pipeline` will make sure that the Tekton pipeline will be able to escalade privileges in your `inventory-${INITIALS}-dev` project/namespace. + - `oc adm policy add-scc-to-user privileged -z pipeline` will make sure that the Tekton pipeline will be able to escalade privileges in your `inventory-${UNIQUE_SUFFIX}-dev` project/namespace. - In OpenShift console (**Pipelines Section > Pipelines > Repositories**), edit the newly created `Repository` YAML to add cluster specific configuration (e.g. image repository): diff --git a/docs/labs/inventory-app/inventory-ui/index.md b/docs/labs/inventory-app/inventory-ui/index.md index 7d00ed3..123deba 100644 --- a/docs/labs/inventory-app/inventory-ui/index.md +++ b/docs/labs/inventory-app/inventory-ui/index.md @@ -5,14 +5,14 @@ ## Setup !!! note - Following this section means you have already deployed and configured the backend and BFF services from the previous steps. Your OpenShift cluster should have the `inventory-${INITIALS}-dev` project (with `${INITIALS}` as your actual initials), that has been configured with `ci-config` and `registry-config` secrets during previous lab. + Following this section means you have already deployed and configured the backend and BFF services from the previous steps. Your OpenShift cluster should have the `inventory-${UNIQUE_SUFFIX}-dev` project (with `${UNIQUE_SUFFIX}` as your team name or initials), that has been configured with `ci-config` and `registry-config` secrets during previous lab. ### Create your OpenShift project, Git Repository and CI pipeline -- Create a new repository from the [Carbon React template](https://github.com/cloud-design-patterns-journey/template-carbon-react). +- Create a new repository from the [Carbon React template](https://github.com/cloud-design-patterns-journey/template-carbon-react/generate). !!! warning - In order to prevent naming collisions if you are running this as part of a workshop, chose the GitHub organization you have been invited to as `Owner` and name the repository `inv-ui-${INITIALS}`, replacing `${INITIALS}` with your actual initials. + In order to prevent naming collisions if you are running this as part of a workshop, chose the GitHub organization you have been invited to as `Owner` and name the repository `inv-ui-${UNIQUE_SUFFIX}`, replacing `${UNIQUE_SUFFIX}` with your team name or initials. - Deploy this application with Tekton: @@ -29,18 +29,18 @@ oc login --token= --server= ``` - - Move to your `inventory-${INITIALS}-dev` project created in previous lab: + - Move to your `inventory-${UNIQUE_SUFFIX}-dev` project created in previous lab: ```sh - export INITIALS=ns # CHANGEME - oc project inventory-${INITIALS}-dev + export UNIQUE_SUFFIX=ns # CHANGEME + oc project inventory-${UNIQUE_SUFFIX}-dev ``` - Clone the repo locally: ```sh - git clone https://github.com/cloud-design-patterns-journey/inv-ui-${INITIALS}.git - cd inv-ui-${INITIALS} + git clone https://github.com/cloud-design-patterns-journey/inv-ui-${UNIQUE_SUFFIX}.git + cd inv-ui-${UNIQUE_SUFFIX} ``` - Create the tekton pipeline for the backend service your new project: @@ -52,7 +52,7 @@ !!! note - `tkn pac create repository` assumes you have [Pipelines-as-Code](https://pipelinesascode.com/docs/install/overview/) already setup on your cluster and Git provider. If you are running this lab as part of a workshop, this has been configured for you, make sure you use the provided GitHub organization when you create yout Git repository from template above. - - `oc adm policy add-scc-to-user privileged -z pipeline` will make sure that the Tekton pipeline will be able to escalade privileges in your `inventory-${INITIALS}-dev` project/namespace. + - `oc adm policy add-scc-to-user privileged -z pipeline` will make sure that the Tekton pipeline will be able to escalade privileges in your `inventory-${UNIQUE_SUFFIX}-dev` project/namespace. - In OpenShift console (**Pipelines Section > Pipelines > Repositories**), edit the newly created `Repository` YAML to add cluster specific configuration (e.g. image repository): @@ -231,7 +231,7 @@ Based on the requirements of this first use case, we will create a `StockItemLis Now that we've created the initial components, we can start to customize the `StockItemList` to match the data for our application. So far, we've built a UI that displays a hard-coded set of data in a table. Eventually, we want to display dynamic data provided from a database in the table. As a first step towards that goal, we need to separate the UI logic from the logic that retrieves the data. We will do that with a service component. For this first pass the service component will just return mock data. -- Create a `src/services`: +- Create a `src/services` directory: ```sh mkdir src/services ``` @@ -516,8 +516,23 @@ Now that we have a mock service that injects data, we can build an implementatio export default App; ``` + +- Test the application again by setting `API_HOST` before running the app: + ```bash + export API_HOST=http://bff.example.com:3000 # CHANGEME + yarn start:dev + ``` + - Open the application to check that your app is now retrieving data from BFF GraphQL endpoint: ![GraphQL data view](../../../images/inventory-ui/ui-graphql-data.png) + + +- Last step before checking out our changes to git is to make sure our Kubernetes/OpenShift deployment will get the `API_HOST` environment variable configured. To do so, create a secret and patch the deployment to use it as source for environment variables: + + ```sh + oc create secret generic inv-ui-${UNIQUE_SUFFIX}-config --from-literal=API_HOST=http://inv-bff-${UNIQUE_SUFFIX}:3000 + kubectl set env --from=secret/inv-ui-${UNIQUE_SUFFIX}-config deployment/inv-ui-${UNIQUE_SUFFIX} + ``` - Push the changes we've made to the repository: ```bash