Modern Shopify Themes Development with Nx-Shopify
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.
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.ymlfile
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!