Shop is a sample e-commerce Progressive Web App .
In this fork we added build yaml files to deploy it in Cloud Run and App Engine
We will deploy it from HERE!
a sample e-commerce shopping site
pattern for a real-life shopping cart and store checkout flow
pattern for using custom announcers for accessibility
<style type="text/css">@import url('https://themes.googleusercontent.com/fonts/css?kit=DFQxm4rd7fRHgM9OTejWVSenZfp837hVvoP-hutgaAq_3Swf5ldba0y0Edq9sboY81Zzpb1JNPPKAi2Fm-hxSQ');.lst-kix_juahkucen63h-1>li:before{content:"- "}.lst-kix_wfca2rvpj78j-0>li{counter-increment:lst-ctn-kix_wfca2rvpj78j-0}.lst-kix_juahkucen63h-0>li:before{content:"- "}ol.lst-kix_wfca2rvpj78j-0.start{counter-reset:lst-ctn-kix_wfca2rvpj78j-0 0}.lst-kix_au87rekvnaza-5>li:before{content:"\0025a0 "}ul.lst-kix_juahkucen63h-1{list-style-type:none}ul.lst-kix_juahkucen63h-0{list-style-type:none}.lst-kix_juahkucen63h-7>li:before{content:"- "}.lst-kix_au87rekvnaza-4>li:before{content:"\0025cb "}ul.lst-kix_juahkucen63h-3{list-style-type:none}ul.lst-kix_juahkucen63h-2{list-style-type:none}.lst-kix_au87rekvnaza-3>li:before{content:"\0025cf "}ul.lst-kix_juahkucen63h-5{list-style-type:none}.lst-kix_juahkucen63h-4>li:before{content:"- "}ul.lst-kix_juahkucen63h-4{list-style-type:none}.lst-kix_juahkucen63h-8>li:before{content:"- "}.lst-kix_au87rekvnaza-2>li:before{content:"\0025a0 "}ol.lst-kix_wfca2rvpj78j-6.start{counter-reset:lst-ctn-kix_wfca2rvpj78j-6 0}ol.lst-kix_wfca2rvpj78j-3.start{counter-reset:lst-ctn-kix_wfca2rvpj78j-3 0}.lst-kix_juahkucen63h-3>li:before{content:"- "}.lst-kix_au87rekvnaza-1>li:before{content:"\0025cb "}.lst-kix_juahkucen63h-2>li:before{content:"- "}.lst-kix_au87rekvnaza-0>li:before{content:"\0025cf "}.lst-kix_juahkucen63h-5>li:before{content:"- "}.lst-kix_wfca2rvpj78j-2>li{counter-increment:lst-ctn-kix_wfca2rvpj78j-2}.lst-kix_juahkucen63h-6>li:before{content:"- "}ol.lst-kix_wfca2rvpj78j-2.start{counter-reset:lst-ctn-kix_wfca2rvpj78j-2 0}.lst-kix_fyfpbit4y9y5-7>li:before{content:"\0025cb "}.lst-kix_fyfpbit4y9y5-6>li:before{content:"\0025cf "}.lst-kix_fyfpbit4y9y5-8>li:before{content:"\0025a0 "}.lst-kix_fyfpbit4y9y5-1>li:before{content:"\0025cb "}.lst-kix_wfca2rvpj78j-3>li{counter-increment:lst-ctn-kix_wfca2rvpj78j-3}.lst-kix_fyfpbit4y9y5-2>li:before{content:"\0025a0 "}ul.lst-kix_juahkucen63h-7{list-style-type:none}ul.lst-kix_juahkucen63h-6{list-style-type:none}.lst-kix_fyfpbit4y9y5-3>li:before{content:"\0025cf "}.lst-kix_fyfpbit4y9y5-5>li:before{content:"\0025a0 "}ul.lst-kix_juahkucen63h-8{list-style-type:none}.lst-kix_fyfpbit4y9y5-4>li:before{content:"\0025cb "}ol.lst-kix_wfca2rvpj78j-1{list-style-type:none}ol.lst-kix_wfca2rvpj78j-2{list-style-type:none}.lst-kix_wfca2rvpj78j-3>li:before{content:"" counter(lst-ctn-kix_wfca2rvpj78j-3,decimal) ". "}.lst-kix_wfca2rvpj78j-4>li:before{content:"" counter(lst-ctn-kix_wfca2rvpj78j-4,lower-latin) ". "}ol.lst-kix_wfca2rvpj78j-3{list-style-type:none}ol.lst-kix_wfca2rvpj78j-4{list-style-type:none}ol.lst-kix_wfca2rvpj78j-5{list-style-type:none}.lst-kix_wfca2rvpj78j-1>li:before{content:"" counter(lst-ctn-kix_wfca2rvpj78j-1,decimal) ". "}ol.lst-kix_wfca2rvpj78j-1.start{counter-reset:lst-ctn-kix_wfca2rvpj78j-1 0}.lst-kix_wfca2rvpj78j-5>li:before{content:"" counter(lst-ctn-kix_wfca2rvpj78j-5,lower-roman) ". "}ol.lst-kix_wfca2rvpj78j-6{list-style-type:none}ol.lst-kix_wfca2rvpj78j-7{list-style-type:none}ol.lst-kix_wfca2rvpj78j-8.start{counter-reset:lst-ctn-kix_wfca2rvpj78j-8 0}ol.lst-kix_wfca2rvpj78j-8{list-style-type:none}.lst-kix_wfca2rvpj78j-2>li:before{content:"" counter(lst-ctn-kix_wfca2rvpj78j-2,lower-roman) ". "}.lst-kix_wfca2rvpj78j-6>li{counter-increment:lst-ctn-kix_wfca2rvpj78j-6}.lst-kix_wfca2rvpj78j-0>li:before{content:"" counter(lst-ctn-kix_wfca2rvpj78j-0,decimal) ". "}.lst-kix_wfca2rvpj78j-5>li{counter-increment:lst-ctn-kix_wfca2rvpj78j-5}ol.lst-kix_wfca2rvpj78j-7.start{counter-reset:lst-ctn-kix_wfca2rvpj78j-7 0}.lst-kix_wfca2rvpj78j-4>li{counter-increment:lst-ctn-kix_wfca2rvpj78j-4}.lst-kix_wfca2rvpj78j-7>li:before{content:"" counter(lst-ctn-kix_wfca2rvpj78j-7,lower-latin) ". "}.lst-kix_wfca2rvpj78j-8>li:before{content:"" counter(lst-ctn-kix_wfca2rvpj78j-8,lower-roman) ". "}.lst-kix_wfca2rvpj78j-6>li:before{content:"" counter(lst-ctn-kix_wfca2rvpj78j-6,decimal) ". "}ol.lst-kix_wfca2rvpj78j-0{list-style-type:none}ul.lst-kix_7csvh5t2albn-0{list-style-type:none}ul.lst-kix_7csvh5t2albn-1{list-style-type:none}ul.lst-kix_7csvh5t2albn-2{list-style-type:none}ul.lst-kix_7csvh5t2albn-3{list-style-type:none}ul.lst-kix_7csvh5t2albn-4{list-style-type:none}ul.lst-kix_7csvh5t2albn-5{list-style-type:none}ul.lst-kix_7csvh5t2albn-6{list-style-type:none}ul.lst-kix_7csvh5t2albn-7{list-style-type:none}ul.lst-kix_7csvh5t2albn-8{list-style-type:none}.lst-kix_fyfpbit4y9y5-0>li:before{content:"\0025cf "}ul.lst-kix_fyfpbit4y9y5-4{list-style-type:none}ul.lst-kix_fyfpbit4y9y5-3{list-style-type:none}ul.lst-kix_fyfpbit4y9y5-2{list-style-type:none}ul.lst-kix_fyfpbit4y9y5-1{list-style-type:none}ul.lst-kix_fyfpbit4y9y5-8{list-style-type:none}ul.lst-kix_fyfpbit4y9y5-7{list-style-type:none}ul.lst-kix_fyfpbit4y9y5-6{list-style-type:none}ul.lst-kix_fyfpbit4y9y5-5{list-style-type:none}.lst-kix_7csvh5t2albn-6>li:before{content:"\0025cf "}.lst-kix_7csvh5t2albn-5>li:before{content:"\0025a0 "}.lst-kix_7csvh5t2albn-7>li:before{content:"\0025cb "}.lst-kix_7csvh5t2albn-4>li:before{content:"\0025cb "}.lst-kix_wfca2rvpj78j-8>li{counter-increment:lst-ctn-kix_wfca2rvpj78j-8}.lst-kix_7csvh5t2albn-8>li:before{content:"\0025a0 "}ul.lst-kix_fyfpbit4y9y5-0{list-style-type:none}ol.lst-kix_wfca2rvpj78j-5.start{counter-reset:lst-ctn-kix_wfca2rvpj78j-5 0}.lst-kix_wfca2rvpj78j-7>li{counter-increment:lst-ctn-kix_wfca2rvpj78j-7}.lst-kix_au87rekvnaza-6>li:before{content:"\0025cf "}.lst-kix_au87rekvnaza-8>li:before{content:"\0025a0 "}.lst-kix_au87rekvnaza-7>li:before{content:"\0025cb "}.lst-kix_wfca2rvpj78j-1>li{counter-increment:lst-ctn-kix_wfca2rvpj78j-1}ul.lst-kix_au87rekvnaza-0{list-style-type:none}ul.lst-kix_au87rekvnaza-1{list-style-type:none}ul.lst-kix_au87rekvnaza-2{list-style-type:none}ul.lst-kix_au87rekvnaza-3{list-style-type:none}ul.lst-kix_au87rekvnaza-4{list-style-type:none}ul.lst-kix_au87rekvnaza-5{list-style-type:none}ul.lst-kix_au87rekvnaza-6{list-style-type:none}ul.lst-kix_au87rekvnaza-7{list-style-type:none}ul.lst-kix_au87rekvnaza-8{list-style-type:none}ol.lst-kix_wfca2rvpj78j-4.start{counter-reset:lst-ctn-kix_wfca2rvpj78j-4 0}.lst-kix_7csvh5t2albn-0>li:before{content:"\0025cf "}.lst-kix_7csvh5t2albn-2>li:before{content:"\0025a0 "}.lst-kix_7csvh5t2albn-1>li:before{content:"\0025cb "}.lst-kix_7csvh5t2albn-3>li:before{content:"\0025cf "}ol{margin:0;padding:0}table td,table th{padding:0}.c30{border-right-style:solid;padding-top:0pt;border-top-width:0pt;border-bottom-color:null;border-right-width:0pt;padding-left:0pt;border-left-color:null;padding-bottom:0pt;line-height:1.15;border-right-color:null;border-left-width:0pt;border-top-style:solid;background-color:#ffffff;border-left-style:solid;border-bottom-width:0pt;border-top-color:null;border-bottom-style:solid;orphans:2;widows:2;text-align:left;padding-right:0pt}.c13{border-right-style:solid;padding-top:0pt;border-top-width:0pt;border-bottom-color:null;border-right-width:0pt;padding-left:0pt;padding-bottom:0pt;line-height:1.15;border-right-color:null;border-top-style:solid;background-color:#ffffff;margin-left:36pt;border-bottom-width:0pt;border-top-color:null;border-bottom-style:solid;orphans:2;widows:2;text-align:left;padding-right:0pt}.c5{border-right-style:solid;padding-top:0pt;border-top-width:0pt;border-bottom-color:null;border-right-width:0pt;padding-left:0pt;padding-bottom:0pt;line-height:1.15;border-right-color:null;border-top-style:solid;margin-left:72pt;border-bottom-width:0pt;border-top-color:null;border-bottom-style:solid;orphans:2;widows:2;text-align:left;padding-right:0pt}.c2{background-color:#263238;color:#c3cee3;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:9pt;font-family:"Courier New";font-style:normal}.c1{background-color:#263238;color:#89ddff;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:9pt;font-family:"Courier New";font-style:normal}.c7{padding-top:18pt;padding-bottom:6pt;line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.c3{color:#ea4335;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:14pt;font-family:"Google Sans";font-style:normal}.c28{padding-top:0pt;padding-bottom:3pt;line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:center}.c24{padding-top:20pt;padding-bottom:6pt;line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.c33{padding-top:12pt;padding-bottom:4pt;line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.c25{padding-top:16pt;padding-bottom:4pt;line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.c8{padding-top:0pt;padding-bottom:4pt;line-height:1.15;orphans:2;widows:2;text-align:left}.c17{padding-top:0pt;padding-bottom:4pt;line-height:1.15;orphans:2;widows:2;text-align:right}.c16{background-color:#f7f7f7;font-size:9.5pt;font-family:"Roboto Mono";color:#37474f;font-weight:400}.c0{font-size:10.5pt;font-family:"Roboto";color:#212121;font-weight:400}.c29{color:#414141;font-weight:400;font-size:20pt;font-family:"Google Sans"}.c15{color:#545454;font-weight:400;font-size:11pt;font-family:"Google Sans"}.c6{font-size:10.5pt;font-family:"Roboto";color:#1a73e8;font-weight:400}.c23{color:#666666;font-weight:400;font-size:10pt;font-family:"Roboto"}.c26{color:#4285f4;font-weight:400;font-size:16pt;font-family:"Google Sans"}.c27{color:#414141;font-weight:400;font-size:26pt;font-family:"Google Sans"}.c10{color:#545454;font-weight:400;font-size:11pt;font-family:"Courier New"}.c9{font-size:10.5pt;font-family:"Roboto";color:#212121;font-weight:700}.c32{color:#fabb05;font-weight:400;font-size:11pt;font-family:"Google Sans"}.c4{text-decoration:none;vertical-align:baseline;font-style:normal}.c31{background-color:#ffffff;max-width:468pt;padding:72pt 72pt 72pt 72pt}.c18{background-color:#263238;color:#c3e88d}.c11{font-weight:400;font-family:"Courier New"}.c19{padding:0;margin:0}.c12{color:inherit;text-decoration:inherit}.c14{font-size:9pt}.c20{height:11pt}.c21{color:#008800}.c22{color:#006666}.title{padding-top:0pt;color:#414141;font-size:26pt;padding-bottom:3pt;font-family:"Google Sans";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:center}.subtitle{padding-top:0pt;color:#666666;font-size:15pt;padding-bottom:16pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}li{color:#545454;font-size:11pt;font-family:"Google Sans"}p{margin:0;color:#545454;font-size:11pt;font-family:"Google Sans"}h1{padding-top:20pt;color:#414141;font-size:20pt;padding-bottom:6pt;font-family:"Google Sans";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h2{padding-top:18pt;color:#4285f4;font-size:16pt;padding-bottom:6pt;font-family:"Google Sans";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h3{padding-top:16pt;color:#ea4335;font-size:14pt;padding-bottom:4pt;font-family:"Google Sans";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h4{padding-top:14pt;color:#34a853;font-size:12pt;padding-bottom:4pt;font-family:"Google Sans";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h5{padding-top:12pt;color:#fabb05;font-size:11pt;padding-bottom:4pt;font-family:"Google Sans";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h6{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:"Google Sans";line-height:1.15;page-break-after:avoid;font-style:italic;orphans:2;widows:2;text-align:left}</style>Cloud Run
To start playing we decided to use an example PWA to run at different Google Cloud Platform products.
gcloud init
npm init
npm install --save prpl-server
Google App Engine Standard Environment Create file server/app_std.yaml to the project.
runtime: nodejs8
service: pwa-shop
handlers:
- url: '.*'
script: auto
secure: always
redirect_http_response_code: 301
npm run build
gcloud app deploy server/app_std.yaml
To deploy an application to Cloud Run call the gcloud build step to invoke gcloud beta run deploy :
Enable the Cloud Run API . Grant the Cloud Run Admin role to the Cloud Build service account: In GCP Console, access the IAM menu . In the list of members, locate and select [PROJECT_NUMBER]@cloudbuild.gserviceaccount.com . Click on EDIT (pencil) button in that row to grant a new role to that account. Click Add another role . Select Cloud Run , and then Cloud Run Admin . Click Save . Grant the IAM Service Account User role to the Cloud Build service account on the Cloud Run runtime service account : In GCP Console, access the Service Accounts menu . In the list of members, locate and select [PROJECT_NUMBER]-compute@developer.gserviceaccount.com . Click SHOW INFO PANEL in the top right corner. In the Permissions panel, click the Add Member button. Enter the Cloud Build service account ( [PROJECT_NUMBER]@cloudbuild.gserviceaccount.com ) in the New Member input field. In the Role dropdown, select Service Accounts , and then Service Account User . Click Save .
Mexico Cloud Run Club - 2019-08-17 - Page
To test prpl-server build:
$ npm run serve:prpl-server To test static build:
Our production deployment of SHOP is hosted on App Engine with Node.js. It can be deployed with the same steps as PWA Starter Kit .
