This sample demonstrates best practices for e-commerce websites.
It also demonstrates some useful features enabled by new technologies and APIs on the web.
Create a fork of the original project GoogleChromeLabs/sample-pie-shop and clone to your development environment.
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.
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.
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 the remote Firestore database by running
the following Node scripts from the
/tools
directory:
cd tools
node import_home.js
node import_products.js
Images are served from
Cloudinary
and displayed responsively using the srcset
and sizes
attributes in
combination with
lazy-img
for lazy loading.
See DEPLOY.md
.