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 documentation on the docs site
• 👀 Checkout the examples workspace

Contributors

Thanks goes to these wonderful people (emoji key):

Sebastian Duque Gutierrez 💻 🚇 🤔 📝 📖

Karen Santana 💻 🤔

Andisa Diaz 💻

Mauricio Vuljevas 🤔

Jesus Salinas Vela 🤔 📆

Sophie 📆

Jibin Mathew 💻 🐛

This project follows the all-contributors specification. Contributions of any kind welcome!

nx-shopify's Issues

Upgrade to Dart Sass

LibSass Deprecation

Since 26 October 2020 LibSass has been deprecated. This means that we ideally need to start working with the latest version of Dart Sass.

LibSass Deprecation Announcement

Motivation

With Dart Sass we're going to be able to use all the improvements that this release has, like the use of @use instead of @import and behind the upgrade there's a performance improvement from the code base.

Suggested Implementation

Instead of node-sass we should use just sass

Generated theme is missing the default shopify cart template

Current Behavior

After running the nx generate @trafilea/nx-shopify:theme <theme-name> command, the cart template directory, which is part of the default shopify templates is missing. Without it the cart page returns a 404

Expected Behavior

After running the nx generate @trafilea/nx-shopify:theme <theme-name> command, the src/theme/templates/cart should also be generated along with

cart.liquid.template
cart.template.scss.template
cart.template.spec.ts.template
cart.template.ts.template 

Steps to Reproduce

1. Run nx generate @trafilea/nx-shopify:theme <theme-name> in the CLI
2. Verify that src/theme/templates/cart doesn't exist

Environment

  Node : 14.17.0
  OS   : linux x64
  npm  : 6.14.13
  
  nx : Not Found
  @nrwl/angular : Not Found
  @nrwl/cli : 12.3.4
  @nrwl/cypress : Not Found
  @nrwl/devkit : 12.3.4
  @nrwl/eslint-plugin-nx : Not Found
  @nrwl/express : Not Found
  @nrwl/jest : 12.0.8
  @nrwl/linter : 12.3.4
  @nrwl/nest : Not Found
  @nrwl/next : Not Found
  @nrwl/node : Not Found
  @nrwl/react : Not Found
  @nrwl/schematics : Not Found
  @nrwl/tao : 12.3.4
  @nrwl/web : Not Found
  @nrwl/workspace : 12.3.4
  @nrwl/storybook : Not Found
  @nrwl/gatsby : Not Found
  typescript : 4.2.4

Template Generator produces liquid template file with article.liquid content

Current Behavior

Running the template generate command causes the new .liquid template's content to match that of article.liquid

{% assign number_of_comments = article.comments_count %}
{% if comment and comment.created_at %}
  {% assign number_of_comments = article.comments_count %}
{% endif %}

<h1>{{ article.title }}</h1>
{% capture author %}<strong>{{ article.author }}</strong>{% endcapture %}
{% capture date %}<time datetime="{{ article.published_at | date: '%Y-%m-%d' }}">{{ article.published_at | date: format: 'month_day_year' }}</time>{% endcapture %}
{{ article.author }} @ {{ article.created_at }}

<div>{{ article.content }}</div>
{% if blog.comments_enabled? %}
  <h2>{{ number_of_comments }} comments</h2>
  {% paginate article.comments by 5 %}
    {% for comment in article.comments %}
      <div>
        <div>{{ comment.content }}</div>
        {{ comment.author }} @ {{ comment.created_at }}
      </div>
    {% endfor %}
    {% if paginate.pages > 1 %}
      {{ paginate | default_pagination }}
    {% endif %}
  {% endpaginate %}

  <div>
    {% form 'new_comment', article %}
      {{ form.errors | default_errors }}
      <label for="CommentAuthor">name</label>
      <input type="text" name="comment[author]" id="CommentAuthor" placeholder="name" value="{{ form.author }}" autocapitalize="words">

      <label for="CommentEmail">email</label>
      <input type="email" name="comment[email]" id="CommentEmail" placeholder="email" value="{{ form.email }}" autocorrect="off" autocapitalize="off">

      <label for="CommentBody">message</label>
      <textarea name="comment[body]" id="CommentBody" placeholder="message">{{ form.body }}</textarea>

      <input type="submit" value="post">
    {% endform %}
  </div>
{% endif %}

Expected Behavior

After generating the new template, the content in the .liquid file should be empty

Steps to Reproduce

1. Run nx g template product.alternate
2. Verify that product.alternate.liquid template file was created
3. Verify with content in product.alternate.liquid matches the contents of article.liquid

Environment

Node : 16.1.0
OS : linux x64
npm : 7.14.0

nx : Not Found
@nrwl/angular : Not Found
@nrwl/cli : 12.3.4
@nrwl/cypress : Not Found
@nrwl/devkit : 12.3.4
@nrwl/eslint-plugin-nx : Not Found
@nrwl/express : Not Found
@nrwl/jest : 12.0.8
@nrwl/linter : 12.3.4
@nrwl/nest : Not Found
@nrwl/next : Not Found
@nrwl/node : Not Found
@nrwl/react : Not Found
@nrwl/schematics : Not Found
@nrwl/tao : 12.3.4
@nrwl/web : Not Found
@nrwl/workspace : 12.3.4
@nrwl/storybook : Not Found
@nrwl/gatsby : Not Found
typescript : 4.2.4

Theme not opening when --open (-o) flag is passed to the serve executor

Current Behavior

When a theme is served using the --open flag the local server starts but the theme is not automatically opened in the browser.

Expected Behavior

Whenever the --open or -o flags are passed to the serve executor the theme should be opened in the browser with the local server address (BrowserSync).

Steps to Reproduce

$ npx create-nx-workspace myorg --preset=empty --nxCloud=false
$ cd myorg
$ npm i -D @trafilea/nx-shopify@alpha
$ nx g @trafilea/nx-shopify:theme my-shop
$ nx serve my-shop --open

Environment

>  NX  Report complete - copy this into the issue template

  Node : 12.18.4
  OS   : linux x64
  npm  : 7.5.6
  
  nx : Not Found
  @nrwl/angular : Not Found
  @nrwl/cli : 11.3.2
  @nrwl/cypress : Not Found
  @nrwl/devkit : 11.3.2
  @nrwl/eslint-plugin-nx : Not Found
  @nrwl/express : Not Found
  @nrwl/jest : 11.3.2
  @nrwl/linter : 11.3.2
  @nrwl/nest : Not Found
  @nrwl/next : Not Found
  @nrwl/node : Not Found
  @nrwl/react : Not Found
  @nrwl/schematics : Not Found
  @nrwl/tao : 11.3.2
  @nrwl/web : Not Found
  @nrwl/workspace : 11.3.2
  typescript : 4.0.7

The automated release is failing 🚨

🚨 The automated release from the alpha branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the alpha branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

No name for the package defined.

A name for the package must be created. Run through npm (npm run to use npm package name or define packageName in the plugin config or SEMANTIC_RELEASE_PACKAGE in the environment

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

Can not serve a live store theme (--allowLive flag not working)

Current Behavior

Serving a theme to a store's live published theme should not work despite using the --allowLive flag with the serve executor. However, when passing the --allowLive flag to the cli it still does fail deploying the changes to the store.

Expected Behavior

When the --allowLive flag is passed to the serve exectuor, you should be able to sync changes to a store's live published theme.

Steps to Reproduce

$ npx create-nx-workspace myorg --preset=empty --nxCloud=false
$ cd myorg
$ npm i -D @trafilea/nx-shopify@alpha
$ nx g @trafilea/nx-shopify:theme my-shop
(configure the theme's config.yml with a store's published theme id)
$ nx serve my-shop --allowLive

Failure Logs

Environment

>  NX  Report complete - copy this into the issue template

  Node : 12.18.4
  OS   : linux x64
  npm  : 7.5.6
  
  nx : Not Found
  @nrwl/angular : Not Found
  @nrwl/cli : 11.3.2
  @nrwl/cypress : Not Found
  @nrwl/devkit : 11.3.2
  @nrwl/eslint-plugin-nx : Not Found
  @nrwl/express : Not Found
  @nrwl/jest : 11.3.2
  @nrwl/linter : 11.3.2
  @nrwl/nest : Not Found
  @nrwl/next : Not Found
  @nrwl/node : Not Found
  @nrwl/react : Not Found
  @nrwl/schematics : Not Found
  @nrwl/tao : 11.3.2
  @nrwl/web : Not Found
  @nrwl/workspace : 11.3.2
  typescript : 4.0.7

Cannot generate new theme

Current Behavior

As per the documentation to create a theme with the following command:

nx generate @trafilea/nx-shopify:theme theme-name

It returns me the following error message:

Cannot set property 'theme-name' of undefined

Expected Behavior

Expect a theme to be generated as per the documentation

Steps to Reproduce

Follow the installation steps from the documentation site and make a new theme

This issue may not be prioritized if details are not provided to help us reproduce the issue.

Failure Logs

Error message returned in console:

Cannot set property 'theme-name' of undefined

Environment

I'm using Ubuntu under WSL on WIndows 10,
Installed Nx with npm.

NX Report

Node : 14.16.1
OS : linux x64
npm : 6.14.12

nx : Not Found
@nrwl/angular : Not Found
@nrwl/cli : 13.1.3
@nrwl/cypress : Not Found
@nrwl/devkit : 13.1.3
@nrwl/eslint-plugin-nx : Not Found
@nrwl/express : Not Found
@nrwl/jest : 12.0.8
@nrwl/linter : 13.1.3
@nrwl/nest : Not Found
@nrwl/next : Not Found
@nrwl/node : Not Found
@nrwl/nx-cloud : Not Found
@nrwl/react : Not Found
@nrwl/schematics : Not Found
@nrwl/tao : 13.1.3
@nrwl/web : Not Found
@nrwl/workspace : 13.1.3
@nrwl/storybook : Not Found
@nrwl/gatsby : Not Found
typescript : 4.3.5

Duplicate default information for serve executor's themekitEnv option

Current Behavior

The deafult value of the serve executor's themekitEnv option is being shown twice in the --help cli output:

Options:
  --buildTarget           Name of the target to be used in the theme build process.
  --analyze               Analyze the generated bundle and open webpack-bundle-analyzer in the browser
  --themekitEnv           Name of the themekit config.yml environment to be used in the deployment ('development' by default) (default: development)
  --allowLive             Enables making changes to the Shopify Live Theme
  --open                  Open theme preview in the broswer when the deployment is done.
  --skipFirstDeploy       Tell if the first deploy should be skipped.
  --devServerIpAddress    Set the local web server ip address. Valid values are: private (default), public, <interface name>, <ip v4/6 address> (default: private)
  --skip-nx-cache         Skip the use of Nx cache.
  --help                  Show available options for project target.

Expected Behavior

The default themekitEnv option value should be shown once as the following example:

Options:
  --buildTarget           Name of the target to be used in the theme build process.
  --analyze               Analyze the generated bundle and open webpack-bundle-analyzer in the browser
  --themekitEnv           Name of the themekit config.yml environment to be used in the deployment (default: development)
  --allowLive             Enables making changes to the Shopify Live Theme
  --open                  Open theme preview in the broswer when the deployment is done.
  --skipFirstDeploy       Tell if the first deploy should be skipped.
  --devServerIpAddress    Set the local web server ip address. Valid values are: private (default), public, <interface name>, <ip v4/6 address> (default: private)
  --skip-nx-cache         Skip the use of Nx cache.
  --help                  Show available options for project target.

Steps to Reproduce

$ npx create-nx-workspace myorg --preset=empty --nxCloud=false
$ cd myorg
$ npm i -D @trafilea/nx-shopify@alpha
$ nx g @trafilea/nx-shopify:theme my-shop
$ nx build my-shop --help

Failure Logs

Environment

>  NX  Report complete - copy this into the issue template

  Node : 12.18.4
  OS   : linux x64
  npm  : 7.5.6
  
  nx : Not Found
  @nrwl/angular : Not Found
  @nrwl/cli : 11.3.2
  @nrwl/cypress : Not Found
  @nrwl/devkit : 11.3.2
  @nrwl/eslint-plugin-nx : Not Found
  @nrwl/express : Not Found
  @nrwl/jest : 11.3.2
  @nrwl/linter : 11.3.2
  @nrwl/nest : Not Found
  @nrwl/next : Not Found
  @nrwl/node : Not Found
  @nrwl/react : Not Found
  @nrwl/schematics : Not Found
  @nrwl/tao : 11.3.2
  @nrwl/web : Not Found
  @nrwl/workspace : 11.3.2
  typescript : 4.0.7