Disclaimer: This is not an official Google product.
This project works on top of the example application.
You deploy a web application using Firebase Hosting that interacts with backend microservices running on Cloud Run. Firebase hosting is natively integrated with Cloud Run so that you can serve the web application and backend microservices services in the same domain. In other types of deployment, you may have Cross-Origin Resource Sharing (CORS) issues. Refer to the link for details.
-
Complete building the example application following the instruction.
-
Open the Google Cloud Shell and set your project ID.
PROJECT_ID=[your project ID] gcloud config set project $PROJECT_ID
-
We assume that you have cloned the lab repository in your cloud shell directory
$HOME/transactional-microservice-examples
.
nvm install lts/gallium
firebase projects:addfirebase $PROJECT_ID
jq -n --arg project_id $PROJECT_ID '{"projects": {"default":$project_id}}' > $HOME/transactional-microservice-examples/frontend/.firebaserc
cd $HOME/transactional-microservice-examples/frontend
yarn install && yarn build
firebase deploy
The web frontend application is a simple online fashion store using APIs. The application consists of five pages.
-
First page
A page to initialize the application with an identity token.
-
Products page
A page to check a product list. You will add products to the cart on this page.
-
Checkout page
A page to submit an order in the cart.
-
Profile page
A page to check the current budget.
-
Order history page
A page to check the order history.
-
Open the
Hosting URL
url on your browser. You see the first page to input the identity token information. -
Copy a following command or click the copy button in step 1 and paste it to Cloud Shell and execute.
gcloud auth print-identity-token
-
Copy the output from Cloud Shell and paste it to the textarea in step 2.
-
Click [Proceed] to proceed to the product page.
A new customer entry is created and logged in as the customer if the identity token is valid.
Click "Awesome Clothes" on the navigation bar and go to the products page. Click "Add to cart" button of a product and confirm a number on the cart icon increases.
Click the cart icon on the navigation bar to go to the checkout page. You see items in the cart now.
Make sure you are in the checkout page. Click "Submit order (Async)" button to submit an order in the cart using the asynchronous service.
Make sure you are in the checkout page. Click "Submit order (Sync)" button to submit an order in the cart using the synchronous service.
Click "Orders" on the navigation bar to go to the orders page. You see the order history and details of orders.
Make sure you are in the orders page. You see a reload icon if an order is 'pending' state. Click the reload icon and update the status.
Click the customer name (customer-xxx) on the navigation bar to go to the profile page. You see the current budget, how much you used and remains. You cannot order over the budget and the order will be rejected.
Reload the page on your browser. States like cart items, the order history and customer information will be reset and redirected to the first page.