Step 5 · Websites & Hosting

The Three Websites

The admin panel, the store panel and the customer website. Each is a Flutter web build you can host anywhere.

15 min

Admin panelFolder admin/. For you: every store, order, product and setting. For example admin.yourdomain.com.

Store panelFolder store/. The store app in the browser. For example store.yourdomain.com.

Customer websiteFolder customer/. Your online shop. For example www.yourdomain.com.

Before you build#

Connect Firebase#

Run FlutterFire in admin, store and customer, and update web/firebase-messaging-sw.js: Connect the apps.

Allow pictures on the websites#

Apply the Storage CORS setting once for the whole project, or pictures stay blank on the websites: Verify the backend.

Set the built-in name#

The browser tab title comes from Branding. The built-in name shows while loading and when someone installs the site. Change it in each web/ folder:

admin/web/index.html

<meta name="description" content="Your Shop admin panel">
<meta name="apple-mobile-web-app-title" content="Your Shop Admin">
<title>Your Shop Admin</title>

In web/manifest.json change name, short_name (about 12 letters) and description.

Replace the install icons#

The favicon is uploaded in Branding, no rebuild needed. The icons used when someone installs the site are in web/icons/. Replace them with the same names and sizes:

File	Size
`Icon-192.png`, `Icon-512.png`	192 × 192 and 512 × 512
`Icon-maskable-192.png`, `Icon-maskable-512.png`	Same sizes, logo inside the middle 80%
`web/favicon.png`	Replace it too

Build#

In each folder, admin, store and customer:

flutter clean
flutter pub get
flutter build web --release

The finished site is in that folder's build/web/. Now put it online: Deploy the websites.