Skip to content
Example e-commerce site to explore PWA (Progressive Web App) use cases.
JavaScript HTML CSS Shell
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Merge pull request #139 from yoavweiss/preload_images Jul 10, 2019
tasks Preloading images for each category Jul 10, 2019
test
tools Updated to use fei for Firebase initialization following errors with … Apr 23, 2019
.babelrc Enable Travis CI (#41) Dec 15, 2017
.eslintignore Initial empty commit. Sep 13, 2017
.eslintrc.yaml Enable search (#119) Aug 20, 2018
.gcloudignore Explain format Jun 28, 2018
.gitignore Enable search (#119) Aug 20, 2018
.stylelintrc Code cleanup (#65) Jun 6, 2018
.travis-deploy-key.json.enc Deploy to Google AppEngine via Travis Jul 10, 2018
.travis.yml Disable auto deploy unti fei is removed Jul 10, 2019
CONTRIBUTING.md Initial commit. Sep 13, 2017
DEPLOY.md
LICENSE
README.md Updated README to fix layout glitches Apr 23, 2019
app.yaml Move to Node10 and SSL only Jul 8, 2019
karma.conf.js Fix client side tests. They run through webpack now. Nov 28, 2017
package-lock.json Attempted to fix eslint-utils vulnerability Sep 4, 2019
package.json Attempted to fix eslint-utils vulnerability Sep 4, 2019
webpack.common.js Enable search (#119) Aug 20, 2018
webpack.dev.js
webpack.prod.js Improvements to SW logic (#120) Aug 6, 2018

README.md

Online store PWA sample

Build Status

This sample demonstrates best practices for e-commerce websites.

It also demonstrates some useful features enabled by new technologies and APIs on the web.

Development

Create a fork of the original project GoogleChromeLabs/sample-pie-shop and clone to your development environment.

Install dependencies

Change to the top level project directory run the following:

cd sample-pie-shop
npm ci

Note: This will install the dependencies as per the package-lock.json whereas npm install will update them. If you need to update the dependencies, submit the updated package-lock.json as a new PR.

Run the development server

The project uses Firebase Cloud Firestore for product data. You will need to create a project and download the JSON configuration for the Admin SDK. You can do this in the Firebase console using the Generate new private key button. Save this to src/data/firebase-admin-key.json.

The start:dev target will build the site and serve it locally while watching for any changes. Once the script completes the initial build, the site should be available at localhost:3000.

npm run start:dev

Note: You can override the default location for the config file by specifying a path in the FB_KEYS environment variable.

FB_KEYS=/path/to/alternative-key.json npm run start:dev

Check package.json for the other build targets.

Import data to the database

Sample data for products, product categories and homepage content is stored as JSON in the /src/data directory.

You can import (upload) this data to your remote Firestore database by running the following Node scripts from the /tools directory:

cd tools
node --experimental-modules import_home.mjs
node --experimental-modules import_products.mjs

This project uses ECMAScript Modules, which currently require the --experimental-modules flag.

Check your version of Node using node -v and update to the LTS or Current version if necessary. The import code above has been tested in versions 10.15.3 and 11.14.0.

Create a search index from your own data

This demo uses the Algolia search engine. This is free for open source projects with up to 100k records and 200k operations monthly.

The search functionality provided by this sample will work as-is for the product data in /src/data/products.json. In other words, if you're happy to use the sample product data as it is, you don't need to do anything!

However, if you want to use different product data, you will need to create your own Algolia application, then build a search index from your data. The index.js application in the /tools/algolia directory enables you to create an Algolia search index from a Firebase data source. It can also be used to monitor updates to your data, and update the Algolia search index in response.

Follow these steps to build a search index if you want to use your own data:

  1. Follow the Algolia tutorial to create a search application.
  2. Follow the tutorial instructions to create a .env configuration file in the /tools/algolia directory.
  3. Run node index.js in the same directory to get data from Firebase and create the index for the Algolia app.
  4. Update the APP_ID (Algolia app) and API_KEY (search key) values in /src/services/algolia.js.

Images

Images are served from Cloudinary and displayed responsively using the srcset and sizes attributes in combination with lazy-img for lazy loading.

Deploying

See DEPLOY.md.

You can’t perform that action at this time.