Storify Setup & Installation

Storify is a production-ready AI-powered ecommerce platform built with Next.js 16, React 19, MongoDB, Better Auth, and Tailwind CSS. This documentation covers setup, configuration, payments, AI, POS, localization, deployment, and ongoing maintenance.

If you already have Node, pnpm, and MongoDB ready, this is the fastest path to a working Storify installation. Each step is expanded later in the docs.

1. 1

   Install dependencies

   From the unzipped Storify source folder, install all packages with pnpm.

   bashCopy

   cd storify
   pnpm install

2. 2

   Create the env file

   Create .env in the project root, then add the keys from the bundled .env.example. Payment, SMTP, OAuth, analytics, and storage credentials are managed later from Admin -> Settings.

   bashCopy

   touch .env

3. 3

   Connect MongoDB and seed

   Set MONGODB_URI, then load demo store data so you can explore admin, vendor, customer, products, orders, POS, and settings immediately.

   bashCopy

   pnpm db:seed

4. 4

   Start the dev server

   Open http://localhost:3000. The seed command prints demo credentials in your terminal. Change all demo passwords before production.

   bashCopy

   pnpm dev

Storify runs anywhere modern Node.js apps can run. These versions match the bundled package and are the supported baseline for buyer installs.

Download from CodeCanyon, unzip the package, and install dependencies. Storify ships as a ready-to-run Next.js project.

1. 1

   Download from CodeCanyon

   Sign in to CodeCanyon -> Downloads -> Storify. Choose 'All files & documentation'.

2. 2

   Unzip the package

   Extract the archive to a permanent location. The main application folder is usually /storify.

   bashCopy

   unzip storify-v1.0.0.zip -d ~/projects/
   cd ~/projects/storify

3. 3

   Install dependencies

   Storify uses pnpm for fast, deterministic installs. Run this once after every download or update.

   bashCopy

   pnpm install

4. 4

   Verify the install

   Run lint, tests, and a production build before deployment. If your package does not include tests for a custom module, lint and build are the minimum smoke checks.

   bashCopy

   pnpm lint
   pnpm test
   pnpm build

Storify scripts read from .env, and Next.js also loads it during development and production builds. Keep this file private and never commit real secrets.

# Database
MONGODB_URI=mongodb://localhost:27017/storify
MONGODB_DB_NAME=storify

# Better Auth (generate a random 32+ character string)
BETTER_AUTH_SECRET=your-secret-here
BETTER_AUTH_URL=https://your-app-url.com

# App Configuration
NEXT_PUBLIC_APP_URL=https://your-app-url.com

OPENAI_API_KEY=your-openai-api-key-here
WEB_PUSH_PUBLIC_KEY=your-web-push-public-key-here
WEB_PUSH_PRIVATE_KEY=your-web-push-private-key-here
WEB_PUSH_SUBJECT=your-web-push-subject-here

Storify stores users, vendors, products, categories, orders, settings, payments, reviews, blog posts, inventory, and AI conversations in MongoDB.

1. 1

   Create a MongoDB database

   Create a MongoDB Atlas cluster and database named storify, or prepare a self-hosted MongoDB instance.

   bashCopy

   # MongoDB Atlas example
   MONGODB_URI=mongodb+srv://username:password@cluster0.mongodb.net/storify
   MONGODB_DB_NAME=storify

2. 2

   Allow network access

   In MongoDB Atlas, add your local IP address for development and your hosting provider's outbound IPs for production.

   txtCopy

   Atlas -> Network Access -> Add IP Address

3. 3

   Seed demo data

   Loads demo settings, admin, vendors, customers, staff, categories, products, orders, coupons, collections, inventory locations, and sample store data.

   bashCopy

   pnpm db:seed

4. 4

   Reset only for testing

   Use reset only on a disposable database. It clears existing records before loading demo ecommerce data.

   bashCopy

   pnpm db:reset

Use dev for local work and build/start for production validation. The storefront, admin, vendor, staff, POS, and API routes all run from the same Next.js app.

1. 1

   Start in development

   Hot reload, fast refresh, and source maps. Defaults to port 3000.

   bashCopy

   pnpm dev

2. 2

   Run a production build

   Compiles, optimizes, and runs the Next.js production server. Use this before deploying changes.

   bashCopy

   pnpm build
   pnpm start

3. 3

   Create a real admin

   For production, create your own admin account instead of relying on seed credentials.

   bashCopy

   pnpm create-admin admin@yourdomain.com "StrongPassword123!" "Store Admin"

Use this as the checklist for Admin -> Settings. It maps every visible settings page to the configuration it controls, so buyers know exactly where each store behavior is managed.

/en/admin/settings/general
/en/admin/settings/appearance
/en/admin/settings/marketplace
/en/admin/settings/pos
/en/admin/settings/locations
/en/admin/settings/two-factor
/en/admin/settings/oauth
/en/admin/settings/security
/en/admin/settings/payment
/en/admin/settings/email
/en/admin/settings/orders
/en/admin/settings/shipping
/en/admin/settings/seo
/en/admin/settings/social
/en/admin/settings/analytics
/en/admin/settings/maintenance
/en/admin/settings/storage

Storify supports S3-compatible storage for product images, 3D model files, category thumbnails, blog images, and storefront media. Cloudflare R2 and AWS S3 are supported from admin settings.

1. 1

   Create a bucket

   Create a Cloudflare R2 bucket or AWS S3 bucket for Storify uploads. Use a lowercase bucket name with numbers and hyphens only.

   txtCopy

   storify-media

2. 2

   Create scoped access credentials

   For R2, create an API token with Object Read & Write permission scoped to the bucket. For S3, create an IAM user or access key with least-privilege object access.

3. 3

   Connect a public media URL

   For production, connect a custom domain such as assets.yourdomain.com. For local testing, an R2 public development URL can work.

   txtCopy

   https://assets.yourdomain.com

4. 4

   Verify uploads

   In Admin -> Settings -> Storage, save the provider settings and run the built-in test. Then upload a product image and a 3D model from the product editor.

https://<ACCOUNT_ID>.r2.cloudflarestorage.com

Storify supports Stripe, PayPal, Razorpay, Paystack, and cash-on-delivery. Enable only the gateways you want from Admin -> Settings -> Payments.

1. 1

   Add Stripe keys

   Open Admin -> Settings -> Payment Settings, enable Stripe, then enter the publishable key, secret key, and webhook secret. Saved secrets are hidden after save.

   Stripe fields

   txtCopy

   Publishable Key
   Secret Key
   Webhook Secret
   Test connection

2. 2

   Configure webhooks

   Point Stripe, Razorpay, and Paystack webhooks to the matching deployed endpoints so orders are marked paid after gateway confirmation.

   bashCopy

   https://yourdomain.com/api/payments/webhook
   https://yourdomain.com/api/payments/razorpay/webhook
   https://yourdomain.com/api/payments/paystack/webhook

3. 3

   Add PayPal, Razorpay, and Paystack

   Use sandbox/test keys first. Store credentials in Admin -> Settings -> Payment Settings, then test each enabled gateway before switching to live mode.

   Gateway fields

   txtCopy

   PayPal: Client ID, Client Secret, Mode, Webhook ID
   Razorpay: Key ID, Key Secret, Webhook Secret
   Paystack: Public Key, Secret Key
   COD: Instructions, minimum amount, maximum amount

4. 4

   Switch to live mode

   When ready, replace test keys with live keys, create production webhooks, make a small real payment, then verify order and transaction records.

Password resets, staff invites, order emails, abandoned checkout recovery, and customer notifications use the SMTP transport.

The AI Sales Agent helps shoppers with product advice, payment questions, delivery guidance, and buying decisions. PWA and web push make Storify feel app-like from the browser.

1. 1

   Add OpenAI API key

   Set OPENAI_API_KEY in .env, then restart the app. The admin dashboard will show whether OpenAI is configured.

   bashCopy

   OPENAI_API_KEY=your-openai-api-key-here

2. 2

   Configure the assistant

   Open Admin -> AI Sales Agent to adjust prompt behavior, store context, suggested questions, and assistant availability.

3. 3

   Generate push keys

   Run the bundled command and copy the public/private pair into .env.

   bashCopy

   pnpm push:keys

4. 4

   Set web push variables

   Paste the generated VAPID values into the web push keys from .env.example.

   bashCopy

   WEB_PUSH_PUBLIC_KEY=your-web-push-public-key-here
   WEB_PUSH_PRIVATE_KEY=your-web-push-private-key-here
   WEB_PUSH_SUBJECT=your-web-push-subject-here

5. 5

   Customize PWA assets

   Replace app icons and manifest assets under /public/pwa, then rebuild and test installability in Chrome or Edge.

Storify includes admin-managed store settings plus code-level brand defaults. Use admin settings for day-to-day changes and source files for packaged defaults.

1. 1

   Update general store settings

   Open Admin -> Settings -> General to set store name, default currency, supported currencies, timezone, colors, and other store-wide defaults.

2. 2

   Customize online store content

   Use Admin -> Online Store and Admin -> Content to manage menus, homepage sections, pages, blog posts, collections, and promotional content.

3. 3

   Change packaged defaults

   Edit config/branding.config.ts when you want the source package defaults to match your brand before seeding or deployment.

   config/branding.config.ts

   tsCopy

   export const DEFAULT_STORE_NAME = "Storify";
   export const DEFAULT_CURRENCY = "USD";
   export const DEFAULT_PRIMARY_COLOR = "#2065D1";

4. 4

   Replace favicons and PWA icons

   Update /public/favicon.svg, /public/pwa icons, and any storefront imagery you want bundled with the deployed app.

Storify ships with 15+ locale files and RTL-ready routing. Locales live under /locales and are loaded with next-intl.

1. 1

   Edit existing strings

   Open /locales/<locale>.json and edit values directly. Changes hot-reload in development.

2. 2

   Add a new language

   Copy /locales/en.json to /locales/<your-locale>.json and translate values. Then register the locale in the i18n config.

   lib/i18n

   tsCopy

   // Example locale list
   ["en", "ar", "bn", "de", "es", "fr", "hi", "ja", "zh"]

3. 3

   RTL support

   Arabic is included and should switch layout direction automatically. Test menus, checkout, product pages, and dashboards in RTL before launch.

4. 4

   Currency settings

   Use Admin -> Settings -> General to set default currency and supported currencies. Test product prices, checkout totals, invoices, and POS totals after changes.

Vercel is the fastest path to production for most Storify buyers. Prepare environment variables, MongoDB Atlas, storage, and payment webhooks before launch.

1. 1

   Push to a GitHub repo

   Create a private GitHub repo and push the source. Vercel will pull from it.

   bashCopy

   git init
   git add .
   git commit -m "Initial Storify setup"
   git remote add origin git@github.com:you/storify.git
   git push -u origin main

2. 2

   Import the repo into Vercel

   vercel.com -> New Project -> Import. Vercel auto-detects Next.js.

3. 3

   Add environment variables

   Project Settings -> Environment Variables. Paste the keys from .env.example. Set NEXT_PUBLIC_APP_URL and BETTER_AUTH_URL to your production URL.

4. 4

   Connect MongoDB Atlas

   Add Vercel's outbound access to MongoDB Atlas Network Access, then set MONGODB_URI in Vercel before deploying.

   bashCopy

   MONGODB_URI=mongodb+srv://username:password@cluster0.mongodb.net/storify

5. 5

   Update gateway webhooks

   After your production domain is live, add Stripe, Razorpay, and Paystack webhook URLs from the Payment Gateways section.

If you prefer your own server, Storify can run behind nginx or Caddy with a managed MongoDB connection or a self-hosted MongoDB container.

1. 1

   Build and start the stack

   From the project root, build the images and run them in the background.

   bashCopy

   docker compose up -d --build

2. 2

   Seed only for evaluation

   Load demo records only when you are setting up a test or evaluation instance.

   bashCopy

   docker compose exec app pnpm db:seed

3. 3

   Front with Caddy

   Use nginx or Caddy to terminate TLS and proxy to localhost:3000. Caddy can provision Let's Encrypt automatically.

   Caddyfile

   nginxCopy

   storify.yourdomain.com {
     reverse_proxy localhost:3000
   }

services:
  app:
    build: .
    ports: ["3000:3000"]
    env_file: .env
    environment:
      MONGODB_URI: mongodb://storify:change-me@mongo:27017/storify?authSource=admin
      MONGODB_DB_NAME: storify
    depends_on: [mongo]
  mongo:
    image: mongo:7
    restart: unless-stopped
    environment:
      MONGO_INITDB_ROOT_USERNAME: storify
      MONGO_INITDB_ROOT_PASSWORD: change-me
    volumes:
      - mongodata:/data/db
    ports: ["27017:27017"]

volumes:
  mongodata:

Once your app is live, route a custom domain to it. Both Vercel and Caddy can provision SSL certificates for free.

1. 1

   Add an A or CNAME record

   For Vercel, add a CNAME pointing to cname.vercel-dns.com. For your VPS, point an A record at the server IP.

2. 2

   Verify in Vercel or Caddy

   Vercel auto-verifies once DNS propagates. Caddy reissues the certificate on the next request.

3. 3

   Update application URLs

   Switch NEXT_PUBLIC_APP_URL and BETTER_AUTH_URL to https://yourdomain.com and redeploy. These are used in emails, auth callbacks, and public metadata.

4. 4

   Update external integrations

   Update payment webhooks, PayPal return/cancel URLs, storage public URL, and email sender links to use the production domain.

After your first deploy, create real users and assign scoped roles for admin, vendors, staff/sellers, and customers.

1. 1

   Create the production admin

   Use the create-admin script to create or upgrade a user to admin with a strong password.

   bashCopy

   pnpm create-admin admin@yourdomain.com "StrongPassword123!" "Store Admin"

2. 2

   Configure multi-vendor mode

   Use Admin -> Settings to enable or disable marketplace mode. In single-vendor mode, Storify uses the default main store vendor.

3. 3

   Approve vendors

   Review vendor applications, approve or reject sellers, configure commission rates, and monitor payouts from the admin dashboard.

4. 4

   Invite staff and sellers

   Create staff users for POS, inventory, orders, products, and customer workflows. Role-based permissions keep admin-only areas protected.

Keep Storify updated while protecting your database, uploaded media, custom translations, and brand customizations.

1. 1

   Download the latest build

   Download updates from your CodeCanyon account and compare the version against the changelog before merging.

2. 2

   Diff and merge

   Use git or your favorite diff tool to merge new files. Review /locales, /public, config files, and any customized components carefully.

3. 3

   Install and rebuild

   Install dependencies and run a production build after merging each release.

   bashCopy

   pnpm install
   pnpm build

4. 4

   Schedule database backups

   Use MongoDB Atlas automated backups or set up nightly mongodump on a VPS.

   bashCopy

   # Cron: nightly backup at 02:00
   0 2 * * * mongodump --uri="$MONGODB_URI" --archive=/backups/storify-$(date +\%F).archive --gzip

5. 5

   Back up uploaded media

   If you use R2 or S3, enable bucket lifecycle/versioning where possible and keep provider credentials safe.

Most install problems fall into the same handful of buckets. Walk through these before opening a support ticket.