akantrocommerce/shopify-theme-bun-vite

visit akantro.com to follow for updates.

Akantro Shopify Theme Framework 1.0

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