Modern Shopify Themes Development with Nx-Shopify

Sebastián Duque G — Fri, 14 May 2021 14:03:18 +0000

TL;DR

Nx-Shopify is an Nx plugin for developing Shopify themes with performance, modern tooling, and ergonomics in mind.

Check the Getting Started guide and the full docs at the Nx-Shopify official website.

trafilea / nx-shopify

Nx plugin for developing performance-first Shopify themes 🚀

Nx-Shopify

🔎 An Nx plugin for developing performance-first Shopify themes 🚀

Be it you need to build a custom Shopify store theme, develop a generic theme or even maintain multiple stores/themes with shared code across them, this Nx plugin helps you power-up your development experience

Getting Started

Install the Nx CLI globally

# npm
$ npm install --global nx

# yarn
$ yarn add --global nx

# pnpm
$ pnpm install --global nx

Create an empty Nx workspace (or use an existing one)

$ npx create-nx-workspace my-org --preset=empty
$ cd ./my-org

Install the Nx-Shopify plugin as a devDependency

# npm
$ npm install --save-dev @trafilea/nx-shopify

# yarn
$ yarn add --save-dev @trafilea/nx-shopify

# pnpm
$ pnpm install --save-dev @trafilea/nx-shopify

Generate a Shopify theme using the Nx CLI

$ nx generate @trafilea/nx-shopify:theme my-theme

Check the generators and executors provided by the plugin

$ nx list @trafilea/nx-shopify

Documentation

🤓 Read the full…

View on GitHub

A little history: Shopify Slate & Themekit

Before being deprecated in January 2020, Shopify's official toolkit for developing Shopify themes was Slate. Slate provided a theme development environment that enabled the developer to have a better project structure than the regular directories found in a Shopify theme. With the deprecation of Slate, the only official tool for theme development left is Themekit.

Themekit acts like a bridge between the developer's local files and the files found in a Shopify store's theme. The folder structure of a Themekit theme is meant more for the theme rendering process than for code maintainability or multiple developers constantly working on the same code base. Additionally, a Themekit project provides little to zero build tooling for the application code.

This is how a basic Themekit project looks like:

Given the context above, the need to have a well-defined project structure, dev ergonomics, high-quality code, and use of modern web technologies, were limited due to lack of tooling.

At Trafilea, we heavily use Shopify themes and are constantly making changes to them according to our business needs and growth. Providing our developers a functional, stable, and feature-rich development experience is crucial, this why we built and open-sourced Nx-Shopify.

Nx-Shopify 🚀

Nx-Shopify is an Nx plugin that adds support for modern Shopify Themes development to an Nx workspace. It comes with various features including:

TypeScript based.
Styling with SASS and PostCSS.
Out of the box unit testing with Jest.
Out of the box code formatting using Prettier and ESLint.
Multiple application and Themekit environments.
Code lazy loading.
Code generator for creating new themes with separate configs.
Code generators for creating theme blocks such as layouts, templates, sections, and snippets.
React integration via @nrwl/react.
Webpack extended configuration.
➕ all features included in an Nx workspace.

Nx-Shopify makes use of Shopify Themekit under the hood, so every project built with Nx-Shopify will be compliant with the themekit project format, in case you need to run specific themekit commands in your project. TIP: you can add custom targets for your projects using the Nx run commands executor.

Ok, but...

What is Nx?

Nx is a set of dev tools for monorepos designed to provide a great development experience in a plug-and-play way. According to their website: "Nx is a suite of powerful, extensible dev tools to help you architect, test, and build at any scale — integrating seamlessly with modern technologies and libraries while providing a robust CLI, caching, dependency management, and more."

Watch this 35 seconds video to have a general overview of some of the things Nx does:

(We ❤️ Nx)

Code Generators

Most Nx plugins include code generators to facilitate developers' life so they can focus on what really matters. Nx-Shopify includes generators for:

A fresh generated Shopify theme would look like this:

Every theme block is organized in a component-based/cohesive design with its respective Liquid, styles, Typescript, and test files. You can also nest blocks under another block's directory if that makes sense to you. You have control of your theme project architecture.

CLI commands

The CLI commands that can be executed against a theme are known in Nx as executors. The list of executors included with Nx-Shopify are:

build - Builds the theme to a Themekit compliant structure ready to be deployed to Shopify
serve - Runs a local web & assets server for local theme development
test - Runs Jest tests against the theme code.
deploy - Deploys a built theme to Shopify according to the Themekit environment configured in the config.yml file

You get a list of all plugin's generators and executors by running the following command in your workspace:

nx list @trafilea/nx-shopify

React integration via `@nrwl/react`

Do not miss the React integration step-by-step guide on our docs site.

Star ⭐ the repo, check the docs, and power up your Shopify themes development experience!

trafilea / nx-shopify

Nx plugin for developing performance-first Shopify themes 🚀

Nx-Shopify

🔎 An Nx plugin for developing performance-first Shopify themes 🚀

Getting Started

Install the Nx CLI globally

# npm
$ npm install --global nx

# yarn
$ yarn add --global nx

# pnpm
$ pnpm install --global nx

Create an empty Nx workspace (or use an existing one)

$ npx create-nx-workspace my-org --preset=empty
$ cd ./my-org

Install the Nx-Shopify plugin as a devDependency

# npm
$ npm install --save-dev @trafilea/nx-shopify

# yarn
$ yarn add --save-dev @trafilea/nx-shopify

# pnpm
$ pnpm install --save-dev @trafilea/nx-shopify

Generate a Shopify theme using the Nx CLI

$ nx generate @trafilea/nx-shopify:theme my-theme

Check the generators and executors provided by the plugin

$ nx list @trafilea/nx-shopify

Documentation

🤓 Read the full…

View on GitHub

Forem: Trafilea

Modern Shopify Themes Development with Nx-Shopify

TL;DR

trafilea / nx-shopify

Nx plugin for developing performance-first Shopify themes 🚀

Nx-Shopify

Getting Started

Documentation

A little history: Shopify Slate & Themekit

Nx-Shopify 🚀

What is Nx?

Code Generators

CLI commands

React integration via @nrwl/react

trafilea / nx-shopify

Nx plugin for developing performance-first Shopify themes 🚀

Nx-Shopify

Getting Started

Documentation

React integration via `@nrwl/react`