/shopify-theme-bun-vite

visit akantro.com to follow for updates.

Primary LanguageLiquidMIT LicenseMIT

Akantro Shopify Theme Framework 1.0

Bun

Visit akantro.com to follow for updates.

About

Akantro Shopify Theme Framework is a Shopify Theme development workflow built on top of Bun and Vite. It is designed to be a lightweight, fast, and easy to use framework for building Shopify Themes. It is built to work with any Shopify Theme. It is not a theme itself, but a framework for building themes.

Bun is a new JavaScript runtime created for the modern JavaScript ecosystem with a focus on speed, elegant APIs, and a cohesive developer experience. It is designed as a drop-in replacement for Node.js, implementing numerous Node.js and Web APIs. The primary objectives of Bun are to run server-side JavaScript efficiently and enhance developer productivity by offering a complete toolkit, including a package manager, test runner, and bundler.

Vite is a build tool designed to enhance the development experience for modern web projects. It comprises a fast development server with features like Hot Module Replacement (HMR) and a build command that uses Rollup to create optimized static assets for production. Vite comes with opinionated defaults but allows customization through Plugins and a Config Section. It is highly extensible, offering a Plugin API and JavaScript API with typing support. For further details, the Features Guide and Why Vite sections provide additional information.

We've coupled Vite with TailwindCSS to provide a fast, modern, and easy to use development workflow for building Shopify Themes.

Together, Bun and Vite provide a fast, modern, and easy to use development workflow for building Shopify Themes.

Shopify's Dawn Theme v12.0.0 comes packed in this workflow by default. Visit the repo shopify-dawn-theme for more information on Dawn.

This framework is compatible with ANY Shopify Theme.

Akantro is a digital product design and development agency dedicated to helping Shopify merchants enhance their success. Specializing in cutting-edge technologies like AI, serverless, headless, and composable tech. Founded by an industry expert, the agency provides customized digital solutions, including UX/UI design, storefront development, app development, and more.

Akantro is a Shopify Partner.

Features

  • Bun
  • Vite
  • TailwindCSS
  • Live Reload
  • Shopify CLI
  • JS Modules
  • Sass
  • PostCSS
  • Autoprefixer
  • Packaged w/ Dawn Theme v12.0.0
  • Compatible with ANY Shopify Theme

Install Bun

curl -fsSL https://bun.sh/install | bash

Install Shopify CLI

brew tap shopify/shopify brew install shopify-cli

More details on Shopify CLI can be found here.

Theme setup

  • If you're not using Dawn, you may place your custom theme files in the /theme directory.

    • You must follow the Shopify Theme file structure:
      theme
        ├── assets
        ├── config
        ├── layout
        ├── locales
        ├── sections
        ├── snippets
        └── templates
    
  • Install the site-wide scripts and styles in your theme.liquid file:

      {% comment %} Theme index.js {% endcomment %}
      <script src="{{ 'index.js' | asset_url }}" defer="defer"></script>
    
      {% comment %} Theme index.css {% endcomment %}
      {{ 'index.css' | asset_url | stylesheet_tag }}
    
  • Install the Theme Access app from the Shopify App Store.

  • Generate a private key for the Theme Access app.

  • Configure your shopify.theme.toml file with your theme ID, store name, and password.

  • Login to your Shopify store using the Shopify CLI.

  • When you set up a store, run shopify theme list -e development to ensure that your theme and environment are set up correctly.

Example shopify.theme.toml file

[environments.development]
theme = "{theme_id}"
store = "{store_name}.myshopify.com"
password  = "{password}"
path = "./dist"
output = "json"
host = "localhost"
ignore = [
  "config/settings_data.json",
  "**/*.json"
]
live-reload = "off"

[environments.production]
theme = "{theme_id}"
store = "{store_name}.myshopify.com"
password  = "{password}"
path = "./dist"
ignore = [
  "config/settings_data.json",
  "**/*.json"
]
output = "json"

Install Project Dependencies

bun install

Start

bun run start

Build

bun run build

Push

bun run push