Skip to main content

Theme Dev

Start a development server for your theme in the Qumra platform.

qumra theme dev​

Start a development server for the theme.

Description​

This command starts a local development server for the theme on port 3000. It allows you to:

  • See theme changes instantly
  • Automatically sync files with the Qumra platform
  • Develop in a live development environment

Usage​

qumra theme dev

Interactive Steps​

When you run the command, it will prompt you for:

  1. App selection: Choose one of the available apps to use as a data source
Note

You must have at least one app available in your account.

Output​

After selecting the app, it will:

  • Initialize the app theme
  • Start watching and automatically syncing files
  • Start the development server and display the following links:

  1. 📡 Localhost (http://localhost:3000)

    • Link to access the theme locally on your machine
    • Allows you to test the theme locally before publishing
    • File changes appear immediately here

  2. 🌍 Theme URL (https://[store].qumra.store?theme=[theme-id])

    • Link to the theme on the real store
    • Used to test the theme in a real environment
    • You can share it with others to preview the theme

  3. 📦 Customize Theme (https://app.qumra.cloud/store/[store]/themes/[theme-id])

    • Link to open the theme in the control panel
    • Allows you to edit the theme from the browser
    • You can use the built-in code editor in the panel

Example​

$ qumra theme dev
? Select the app you want to use as a data source: (Use arrow keys)
❯ My Store (mystore)
  Another Store (anotherstore)

🚀 Server started successfully!

📡 Localhost  => http://localhost:3000
🌍 Theme URL  => https://the-one.qumra.store?theme=6919bd44929486cfccb1f892
📦 Customize Theme  => https://app.qumra.cloud/store/the-one/themes/6919bd44929486cfccb1f892

Requirements​

  • You must be inside an existing theme folder
  • You must have at least one app in your Qumra account
  • The qumra.config.json file must exist in the folder

Tips​

Using Links
  • Localhost: Use it for quick local development and instant change preview
  • Theme URL: Use it to test the theme in a real environment or share it with others
  • Customize Theme: Use it to edit the theme from the browser without needing to open a code editor
tip
  • Use Ctrl+C to stop the development server
  • File changes will be automatically synced
  • Make sure you're connected to the internet for syncing with the platform
  • You can use multiple links at the same time
danger

Don't run the dev command in a folder that's not meant for a Qumra theme. Make sure the qumra.config.json file exists first.

Troubleshooting​

Error: "No apps available"​

Solution: Make sure you have at least one app in your Qumra account. Create an app from the control panel first.