Skip to content

Latest commit

 

History

History
150 lines (114 loc) · 7.63 KB

SETUP.md

File metadata and controls

150 lines (114 loc) · 7.63 KB
Raw

Store

Cloud Commerce: the new Store template

🇧🇷 Tradução em português

Getting started

  1. Start creating new project on Firebase console:

    • Set a nice project name (ID) and remember it;
    • Disable (recommended) Google Analytics for Firebase, will not be used by default;

  2. Go to Creation > Firestore Database page (on sidebar) and Create database:

    • Just bypass with default production mode and rules;
    • Select region us-east4 (recommended, or multi-region nam5 (us-central));

  3. Go to Creation > Storage page and click Let's start:

    • Just bypass with default production mode and same (pre-selected) region;

  4. Go to Creation > Authentication and click Get started:

    • Click Native providers > Email/password and enable Email link (login without password);
    • Go to Authentication configurations and add your store domain(s) to authorized list;
    • Optionally, add other provides by Smartphone (SMS, generates additional costs) and/or social media;

  5. Go to ⚙️ > Project configurations e edit:

    • Default location for GCP resources: Same Firestore region (us-east4);
    • Public settings > Publicly displayed name: Your store name;
    • Public settings > Support email (optional);
    • Under Your apps create a new Web app:
      • Re-enter the store name and enable Firebase Hosting for the new app;
      • Copy only the value of the firebaseConfig object and replace at functions/ssr/src/scripts/InlineScripts.astro;
      • Just click to continue in the next steps until confirmation and return to the console;

  6. Firebase free plan doesn't support sending external HTTP requests, so you'll need to upgrade to Blaze (on demand) plan;

  7. Use this template to generate a new repository for your store;

Proceed with:

First deploy on CLI

  1. Setup and first deploy from your terminal with Firebase CLI:
# Install `firebase-tools` and login
npm install -g firebase-tools && firebase login
# Clone your new store repository
git clone git@github.com:{gh-user}/{new-store}.git
cd {new-store}
npm i
With gcloud CLI (optional) installed 
# Run project configuration and deploy on GitHub Actions
FIREBASE_PROJECT_ID={project-id} npm run setup

[!NOTE] Account key created automatically with only required permissions using gcloud CLI (skip steps 6 and 7).

Without gcloud CLI 
# Run project configuration and first deploy
FIREBASE_PROJECT_ID={project-id} npm run setup -- --no-gcloud
npm run deploy

  1. Create a service account for your Firebase project directly on Google Cloud Platform:

    • Name it Cloud Commerce GH Actions (YOUR REPOSITORY);
    • Describe it A service account with permission to deploy Cloud Commerce from the GitHub repository to Firebase;
    • Continue and select the following roles to the service account:
      1. Firebase Admin
      2. API Keys Viewer
      3. Cloud Run Viewer
      4. Cloud Functions Admin
      5. Artifact Registry Admin
      6. App Engine Creator
      7. App Engine Admin
      8. Cloud Scheduler Admin
      9. Service Account User

  2. Back in the service accounts list, click the 3 dots (actions) and select Manage keys, generate and download a JSON key for the created account;

  1. Set the following secrets to your GitHub repository (Settings > Secrets > Actions):
    • FIREBASE_SERVICE_ACCOUNT: Paste the generated Google Cloud key JSON
    • ECOM_AUTHENTICATION_ID: Get from CLI setup output
    • ECOM_API_KEY: Get from CLI setup output

🏁 🏁 🏁 All done, congrats!

Browser-only setup

Warning

This configuration option is less secure, we recommend first deploy on CLI instead.

  1. Create a service account for your Firebase project directly on Google Cloud Platform:

    • Name it Cloud Commerce GH Actions (YOUR REPOSITORY);
    • Describe it A service account with ALL permissions to deploy Cloud Commerce from the GitHub to Firebase;
    • Continue and select the role Quick access > Basic > Proprietary;

  2. Back in the service accounts list, click the 3 dots (actions) and select Manage keys, generate and download a JSON key for the created account;

  3. Set the following secrets to your GitHub repository (Settings > Secrets > Actions):

    • FIREBASE_SERVICE_ACCOUNT: Paste the generated Google Cloud key JSON
    • ECOM_STORE_ID: Copy your Store ID on the e-com.plus admin
    • ECOM_AUTHENTICATION_ID: Copy your Authentication ID on the e-com.plus admin
    • ECOM_API_KEY: Copy your API Key on the e-com.plus admin

Production best practices

Firebase Hosting CDN is fast, but doesn't support cache Stale-While-Revalidate (context and feature request) and Hosting proxy + Cloud Functions (even without cold starts) will never take less than 1s (TTFB will probably take ~2s). We like "instant" responses but want to keep dynamic server rendered views (for less client-side JS), so stale caching is a must and so we need another CDN layer on production (when pointing the custom domain).

  • Recommended way using bunny.net CDN with Perma Cache and Edge Rules for ISR:

    • Get your API key from bunny.net dashboard account details;
    • Save it with a GitHub repository secret named BUNNYNET_API_KEY;
    • Edit .github/build-and-deploy file (add 1) and commit with message [run:bunny-setup].

  • OR using bunny.net CDN with Stale Cache for SWR:

    • Pull zone with your Firebase Hosting https://project.web.app domain as origin URL;
    • SSL + Force SSL enabled (prevents http://* redirects to origin domain);
    • Smart Cache disabled (cache all MIME types respecting response headers);
    • Caching Query String Sort enabled (awesome for image transformations);
    • Caching Strip Response Cookies enabled;
    • Stale Cache while origin offline and while updating enabled;
    • Other origin and caching configurations may be disabled;
    • You might want to disable some zones in routing configuration depending on store target.

  • OR using Cloudflare Worker for ISR/SWR:

Note

You may want to remove or edit the default LICENSE file before publishing your store content.