Verify the Backend & Storage CORS
A two-minute check in the Firebase console, then one command so the websites can show pictures from Storage.
Check the Firebase console#
Open your project in the Firebase console and look at these five places:
| Where | What you should see |
|---|---|
| FirestoreData | Collections such as settings, categories, products, stores, zones, home_layouts, languages |
| FirestoreIndexes | A long list of indexes. Building for a few minutes is normal. |
| FirestoreRules and StorageRules | Published today |
| Functions | 48 functions in us-central1, all with a green tick |
| AuthenticationSign-in method | Email/Password, Phone, Google and Apple enabled |
All there?
Your backend is complete. The next steps connect the apps to it.
Storage CORS for the websites#
The admin panel, store panel and customer website load pictures straight from Firebase Storage. Browsers only allow this when the Storage bucket says so (a CORS setting). The phone apps do not need it. You set it once for the whole project.
Open Google Cloud Shell#
Go to console.cloud.google.com, select your Firebase project at the top, and click the Activate Cloud Shell button (the >_ icon, top right). A terminal opens at the bottom of the page.
Find your bucket name#
In the Firebase console, open Storage. The bucket name is shown at the top, for example gs://your-shop-a1b2c.firebasestorage.app.
Run these two commands#
Replace the bucket name with yours:
echo '[{"origin":["*"],"method":["GET","HEAD"],"responseHeader":["Content-Type","Cache-Control"],"maxAgeSeconds":3600}]' > cors.json
gcloud storage buckets update gs://your-shop-a1b2c.firebasestorage.app --cors-file=cors.jsonYou should see Updating gs://… and no error. That is all.
Signs that CORS is missing
Pictures show in the phone apps but stay blank on the websites, and the browser console (F12) says blocked by CORS policy.
Only reading is allowed
The setting allows browsers to read pictures (GET, HEAD). Uploads still go through Firebase and its Storage rules, so this does not open your bucket to writes.
Step 1 is done
Your backend is live. Next is Step 2: choose your package names, then connect every app to this Firebase project.