Skip to main content

Storefront - Getting Started

Learn how to set up and deploy your Ecomplify storefront on Cloudflare.

Overview​

The Ecomplify Storefront is a modern, fast, and SEO-optimized online store built with React Router 7 and designed to run on Cloudflare Pages. It provides a seamless shopping experience for your customers.

Technology Stack​

The storefront is built with:

  • React Router 7 - Modern routing and server-side rendering
  • TypeScript - Type-safe development
  • Cloudflare Pages - Global CDN and hosting
  • Cloudflare Workers - Serverless backend functions

Prerequisites​

Before you begin, make sure you have:

  • A Cloudflare account (free tier available)
  • Node.js 18 or higher installed
  • npm or pnpm package manager
  • Git installed (for deployment)

Local Development Setup​

1. Clone the Repository​

git clone https://github.com/your-org/ecomplify-storefront.git
cd ecomplify-storefront

2. Install Dependencies​

npm install
# or
pnpm install

3. Configure Environment Variables​

Create a .env file in the project root:

# API Configuration
VITE_API_URL=https://api.ecomplify.com

# Store Configuration
VITE_STORE_ID=your-store-id
VITE_STORE_NAME=Your Store Name

4. Start Development Server​

npm run dev

Your storefront will be available at http://localhost:5173

Deploying to Cloudflare Pages​

  1. Connect Your Git Repository

    • Log in to your Cloudflare Dashboard
    • Go to Pages > Create a project
    • Connect your GitHub/GitLab account
    • Select your storefront repository

  2. Configure Build Settings

    Build command: npm run build
    Build output directory: dist
    Root directory: /

  3. Set Environment Variables

    • Add the same environment variables from your .env file
    • Click Save and Deploy

  4. Deploy

    • Cloudflare will automatically build and deploy your site
    • Your site will be live at your-project.pages.dev

Option 2: Deploy via Wrangler CLI​

  1. Install Wrangler

    npm install -g wrangler

  2. Login to Cloudflare

    wrangler login

  3. Build Your Project

    npm run build

  4. Deploy

    wrangler pages deploy dist

Custom Domain Setup​

To use your own domain:

  1. Go to your Pages project in Cloudflare Dashboard
  2. Click Custom domains
  3. Click Set up a custom domain
  4. Enter your domain (e.g., shop.yourdomain.com)
  5. Follow the DNS configuration instructions
  6. Wait for SSL certificate provisioning (usually takes a few minutes)

Storefront Features​

Product Catalog​

  • Browse products by category
  • Search functionality
  • Product filtering and sorting
  • Product detail pages with images and descriptions

Shopping Cart​

  • Add/remove items
  • Update quantities
  • Cart persistence across sessions
  • Real-time price calculations

Checkout Process​

  • Guest and registered user checkout
  • Multiple payment methods
  • Shipping address management
  • Order confirmation

Customer Account​

  • Order history
  • Address book
  • Wishlist
  • Account settings

Customization​

Styling​

The storefront uses CSS modules and supports theming. To customize:

  1. Edit theme variables in src/styles/theme.css
  2. Modify component styles in their respective CSS modules
  3. Update the primary color to match your brand (#451991 by default)

Content​

Update content in:

  • src/content/ - Static content and copy
  • src/config/ - Site configuration
  • public/ - Images and static assets

Performance Optimization​

The storefront is optimized for performance:

  • Edge Rendering - Pages rendered at Cloudflare's edge
  • Asset Optimization - Automatic image and code optimization
  • Caching - Smart caching strategies for fast page loads
  • Code Splitting - Only load code needed for each page

Monitoring and Analytics​

Track your storefront's performance:

  1. Enable Cloudflare Web Analytics in your Pages project
  2. View metrics in the Cloudflare Dashboard:
    • Page views
    • Unique visitors
    • Performance metrics
    • Geographic distribution

Troubleshooting​

Build Failures​

  • Check build logs in Cloudflare Dashboard
  • Verify all environment variables are set
  • Ensure dependencies are correctly installed

API Connection Issues​

  • Verify API URL is correct
  • Check CORS settings
  • Ensure API keys are valid

Next Steps​

Explore more about your storefront:

  • Customization - Make the storefront match your brand identity
  • Payment Methods - Set up and configure payment processing
  • SEO Optimization - Improve search rankings and visibility
  • Advanced Features - Unlock more capabilities as you grow

More detailed guides coming soon!

Support​

Need help with deployment?