Forem: Younis Ahmed

Shopify CLI: Setting Up Your Local Environment Made Simple

Younis Ahmed — Tue, 31 Dec 2024 06:48:01 +0000

This tutorial explores using Shopify CLI to safely customize Shopify themes in a local development environment without impacting the live store.

What You'll Learn

Setup Your Local Development Environment
Clone Shopify Store’s Theme
Preview Changes Made To Your Local Code

Prerequisites

Before you start, ensure you have the following:

Node.js: Shopify CLI requires Node.js. You can download it from the official website.
Git: If you don't have Git installed, download it from here.
A Shopify Partner Account: You need a Shopify Partner account to create and manage development stores. Sign up here.
```
npm install -g @shopify/cli @shopify/theme
```

Why Set Up a Local Environment?

Setting up a local environment for Shopify theme development is important for several reasons:

Improved Workflow Efficiency: Developing locally allows for quicker iterations and smoother collaboration among team members. Changes can be tested and implemented swiftly without the delays of live deployment.
Reduced Risks and Errors: A local setup provides a safe space to experiment with new features and designs, minimizing the risk of introducing bugs into the live store and enhancing overall platform stability.
Better Theme Customization: Developers can customize themes more flexibly and accurately. This setup supports thorough testing of design elements and functionality, ensuring a top-notch user experience on the live store.

Setup Your Local Development Environment

Let's walk through the steps to set up your local development environment for Shopify theme development using the Shopify CLI.

To setup a local environment you’ll need to setup your shopify partners account first.

Head to shopify partners and login to your account.
Click on the Stores from the right panel

Create a new Developer store by clicking on the green button New Store

After setup the store, You can choose a theme and publish

Note: You can choose not to publish, it’s just makes it easier to find the store on your CLI as we will see later on. You can draft the theme if you are not ready to publish.

Local Environment

Create your directory and make sure Shopify CLI and themes are installed

    pnpm install -g @shopify/cli @shopify/theme && shopify version

Create a file shopify.theme.toml

    touch shopify.theme.toml

Write your development variable

    [environments.development]
    store="<storefront_URL>"

Pull your theme files into local

    shopify theme pull -e development

Note: You will be asked to authenticate if this is your first time.

Go to the link and enter your credentials

After logging in, the interactive prompts will ask you a couple of questions about which theme to use. It will automatically detect if the directory is a theme directory and ask you to proceed. Choose Yes (y).

You’ve successfully pull your theme and ready hack away ✨

Running hot reload server within Local Environment

Hot reload is a great feature in development that lets developers see code changes instantly without restarting the app. This speeds up development by reducing downtime and boosting productivity. With hot reload, developers can make changes in real-time, try out new ideas, and quickly fix problems, leading to more efficient development cycles. It improves the development experience by giving immediate feedback and reducing the hassle of recompiling and redeploying apps.

You can run a local hot reload server within your environment to start developing the theme.

       shopify theme dev -e development

Note: You will be asked to provide a password, Can be found on the bottom of Sales channels -> Online Store -> Preferences on shopify admin panel

Now you can view your shopify theme locally 👍

Other useful features of Shopify CLI server

Sharing your preview with team members or clients without pushing code is incredibly helpful. You don't need an external service or to push code to get feedback on your work.
Spin up the no-code theme editor locally

Push local changes to shopify

shopify theme push -e development

Integrating GitHub with shopify theme

Integrating GitHub with shopify will assist you in streamline the process of collaborating in theme development, Any changes made using shopify theme editor will be updated to the repository.

Navigate to Add Theme --> Connect from Github
Go through OAuth portal to connect with github
Choose the repository and branch to add your theme to shopify admin panel

Conclusion

In conclusion, setting up a local development environment using Shopify CLI is a crucial step for developers looking to customize Shopify themes efficiently and safely. By working locally, developers can enhance their workflow, reduce risks, and ensure better theme customization. The process involves setting up a Shopify Partner account, creating a development store, and using Shopify CLI to manage and preview theme changes. Additionally, integrating GitHub with Shopify streamlines collaboration and version control, making it easier to manage theme development projects. With these tools and practices, developers can create high-quality, customized Shopify themes that enhance the user experience on live stores.

Improve Shopify Templates with TypeScript and Tailwind CSS

Younis Ahmed — Thu, 24 Oct 2024 10:07:08 +0000

As developers, we aim to utilize tools that enhance our code quality, maintainability, and overall productivity. Personally, I’ve become attached to using Tailwind CSS and TypeScript. I frequently incorporate these tools into my Next.js projects and find them particularly useful when creating Shopify themes. This post serves as a guide for implementing TypeScript and Tailwind within Shopify themes.

Dev Dependencies

To begin, we will need to install a few development dependencies in our project. Although we'll be using pnpm for this tutorial, npm or yarn can also be used.

Create your package.json in the root directory of the theme.

pnpm init

Create or update the package.json file in the root directory. Initialize it and follow the instructions in the terminal.

Vite

Our development environment will utilize Vite. Vite will transpile our TypeScript into JavaScript and construct Tailwind using JIT, which generates a stylesheet containing only the classes utilized in your project. We will also leverage PostCSS to add vendor-specific prefixes for cross-browser compatibility.

pnpm add vite fast-glob -D

This command installs Vite and fast-glob. Fast-glob is a plugin that helps traverse our directory and find files matching the patterns we specify.

TypeScript

TypeScript has proven valuable in catching minor bugs early during development. It also integrates seamlessly with editors such as VS Code, providing helpful auto-completions.

pnpm add typescript ts-node -D

Tailwind CSS

Tailwind is quite popular nowadays, and for good reason. It enables quicker iterations without the hassle of creating class names or worrying about inheritance.

pnpm add tailwind postcss autoprefixer -D

.shopifyignore

If you’re using the Shopify CLI for themes, you can create a .shopifyignore file in the root of your theme directory to instruct the CLI not to upload specific files to Shopify’s servers.

*.cjs
src
vite.config.ts
tsconfig.json
package.json
pnpm-lock.yaml

Our .shopifyignore file excludes the src directory and other configuration files.

Vite Configuration

In our configuration file, we will define build options that direct Vite on how to operate.

import fg from 'fast-glob'
import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    outDir: 'assets',
    emptyOutDir: false,
    rollupOptions: {
      input: 'src/**/*.{ts,js,css}',
      output: {
        dir: 'assets',
        entryFileNames: '[name].js',
        assetFileNames: '[name].[ext]',
      },
      plugins: [
        {
          name: 'glob-input',
          options(options) {
            const inputs = typeof options.input === 'string' ? [options.input] : options.input
            return Array.isArray(inputs)
              ? { ...options, input: inputs.flatMap((input) => fg.sync(input)) }
              : null
          },
        },
      ],
    },
  },
  plugins: [],
})

Summary

outDir: Specifies the directory relative to the root where the build output will be stored.
emptyOutDir: This is set to false to prevent the outDir from being cleared and replaced each time Vite builds. While this feature is handy, our outDir is the assets folder, where you might also have other files aside from those built by Vite.
rollupOptions: Allows for direct customization of the underlying Rollup bundle (refer to the documentation).
rollupOptions.input: Files that fit this pattern will be processed by Vite.
glob-input: A plugin is added to pass our input to fast-glob, allowing for faster file traversing.

Tailwind Configuration

Let’s create a Tailwind configuration file with some options.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./**/*.liquid', './src/**/*.{ts,js}'],
  theme: {
    extend: {
      fontFamily: {
        body: 'var(--font-body-family)',
        heading: 'var(--font-heading-family)',
      },
      colors: {
        text: 'rgba(var(--color-base-text), <alpha-value>)',
        accent1: 'rgba(var(--color-base-accent-1), <alpha-value>)',
        accent2: 'rgba(var(--color-base-accent-2), <alpha-value>)',
        background1: 'rgba(var(--color-base-background-1), <alpha-value>)',
        background2: 'rgba(var(--color-base-background-2), <alpha-value>)',
      },
    },
  },
  plugins: [],
}

tailwind.config.cjs

Summary

/** @type {import('tailwindcss').Config} */: This adds TypeScript types for improved intellisense.
content: Specifies where Tailwind should look for class names. This powers the Just-In-Time Engine that constructs your stylesheet with only the minimal CSS required.
theme.extend: We can extend Tailwind's default theme to utilize CSS variables defined in theme.liquid or elsewhere in your theme. This functionality allows the Tailwind theme to be controlled from the theme settings in the Shopify admin.

Base Styles

With Tailwind, you don't have to write custom stylesheets; instead, you utilize the class names directly in your markup. You’ll create a single global stylesheet that imports a reset alongside some base styles. This file will reside in your src folder, ensuring it gets built with Vite.

@tailwind base;
@tailwind components;
@tailwind utilities;

src/base.css

PostCSS Configuration

Make sure to include the PostCSS configuration for Tailwind.

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

postcss.config.cjs

Development Workflow

Now that we have everything set up and configured, we’re ready to start building our theme. I typically use two terminal windows to run the pnpm scripts I’ve included in package.json.

{
  "name": "tailwind-typescript-theme",
  "version": "0.0.1",
  "scripts": {
    "dev": "vite build --watch",
    "shopify": "shopify theme dev --store=REPLACE_WITH_YOUR_STORE",
    "build": "tsc && vite build"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.13",
    "fast-glob": "^3.2.12",
    "postcss": "^8.4.21",
    "tailwindcss": "^3.2.4",
    "ts-node": "^10.9.1",
    "typescript": "^4.9.5",
    "vite": "^4.1.1"
  }
}

package.json

PNPM Scripts

pnpm dev: This command runs our Vite configuration and monitors for changes.
pnpm shopify: This launches your development server for your Shopify theme. Ensure you replace the --store flag with your Shopify store.

Once everything is set up, you can modify your theme files and use Tailwind classes. Vite will generate the necessary stylesheet, and the Shopify CLI will notice that Vite has modified a file, triggering a hot reload of your theme to keep everything in sync. You can also incorporate TypeScript files into your src folder for any necessary functionality or user interactions within your theme.

I’ve found this setup to be straightforward to establish yet extremely powerful. I hope this guide assists you in starting to create Shopify themes utilizing Tailwind CSS and TypeScript.

If you have any questions or feedback, feel free to reach out to me on Twitter. Follow me there for more guides and updates like this!

Conclusion

In conclusion, integrating TypeScript and Tailwind CSS into Shopify themes development can significantly enhance the development process by improving code quality, maintainability, and productivity. By leveraging tools like Vite for efficient build processes and PostCSS for cross-browser compatibility, developers can create more robust and responsive themes. This setup not only streamlines the workflow but also allows for greater customization and control over the theme's appearance and functionality. Embracing these modern technologies can lead to a more efficient and enjoyable development experience, ultimately resulting in better-performing Shopify themes.