blanklob / helium

Helium is a modern Shopify development workflow ⚙️, with Online Store 2.0 features. Built with performance ⚡️ and best practices in mind..

Helium

A Shopify theme environment from scratch ⚙️, with Online Store 2.0 features. Built with performance ⚡️ and best practices in mind, has sensible defaults for structured data, open graphs. Hot Module Reloading on SASS/ES6 file changes for rapid development and many other features...

This was made as a follow-up to the Shopify Unite 2021 event revealing the new theme online store 2.0 that has supports for JSON templates and section everywhere concept and few other features.

Quick starter

Make sure you have the following minimum versions:

• Shopify CLI >= 2.4.0
• Node >= 14.0.0

ℹ️ You'll need to authenticate to your development Shopify store before runing the development server.

shopify login --store your-store.myshopify.com

Get started by cloning the repository.

shopify theme init -u https://github.com/blanklob/helium.git

Pro tip: click the Use this template button above to start from a fresh repositry.

Then lunch the development server on localhost:9292 using NPM/Yarn.

The command will also run Helium's watch mode on files.

npm run serve

Happy coding 🐧

Contributing

Everyone is welcome to make Shopify theme development better! Please read the Contributing guide before creating issues or submitting pull requests.

License

MIT License Copyright (c) 2022 Blanklob. See LICENSE for further details.

helium's Issues

Use Webpack CopyPlugin with the Flat Directory Structure

Hi,

How can I use the Webpack CopyPlugin with flat directory structure (I mean without any directory)?

Currently if I add image folder into shared directory like this:

...Workflow is copying all items into assets folder with directory structure:

But I think all files in the asset folder must be flat structure in the Shopify to use them in templates.

Create new themes through CLI commands

Is your feature request related to a problem? Please describe.
When running yarn deploy I only have the option of deploying to an existing theme or my remote theme.

Describe the solution you'd like
It would be great if running yarn deploy gave me the option to create a new theme before deploying my code. So if I were to select the option "Create New Theme" it would automatically run yarn zip and then upload the zip file.

Describe alternatives you've considered
Instead of mixing it with yarn deploy maybe the above could be done with a new command like yarn create or something similar.

Additional context
Add any other context or screenshots about the feature request here.

Vendor scripts

Is there a reason why this line is commented? I have found that you cannot include any external package without this line. Is there a better way to achieve this?

Some Image Formats Are Not Showing on the Browser

Describe the bug
When I create <img> tag to show images within the .liquid files as like <img src="{{ 'filename.ext' | asset_url }}" /> the browser shows the SVG, JPEG and WEBP but not PNG or JPG. Also, I can see the "successfully" message on the terminal without any error.

To Reproduce
Steps to reproduce the behavior:

1. Initiated a new project with the Workflow like this: shopify theme init -u https://github.com/younessidbakkasse/workflow, installed the Node modules with yarn install and started project with yarn start.
2. Dropped the image files on the publicfolder and wrote <img> tags in the header.liquid to show images on the browser as like this
3. All images shown on the browser but PNG and JPG files (screenshot).

Expected behavior
See all images without any issue.

Desktop (please complete the following information):

• OS: macOS 11.6
• Browser Chrome 94 / Safari 15.0
• Workflow Version: 1.2.0

Hot Reload when changes in SCSS

(Je sais pas si c'est possible... mais genre reload quand y'a un changement dans le SCSS => reload le 127.0.0.1:9292)

manifest.json Error

I've created a project with Workflow from zero but its showing error like: ERROR update src/public/manifest.json: 404

Actually, the manifest.json file is located on the correct folder as you can see on the screenshot above.

It's not big deal as I see but I just want to inform you about this error message.

Update scripts in docs from start to serve

Currently readme says yarn start is the command to start developing while in package json yarn serve is the corresponding script

Pushing a theme overwrites settings and section data

When running yarn start or yarn deploy, any dynamic section data or theme settings that have been added since the last start / deploy are erased. I'm imaging this has something to do with this similar issue and might be able to be resolved with adding an --ignore option for the json templates like described here. Any ideas on how to implement a fix to stop the overwriting of data when starting / deploying?

Npm & yarn error

I'm getting an error on both npm and yarn when running "yarn start" and or "npm start"

npm ERR! missing script: start

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/shawn/.npm/_logs/2021-10-03T07_55_25_191Z-debug.log

yarn run error Command "start" not found. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I followed the installation guide but I'm not sure why this giving an error. Any ideas? Am I missing something?

Thanks

Missing "collections" section

list-collections.json requires collections section which does not exists so serve displays error

Can't Reach the Local Shopify Development Environment on the Safari

When I try to enter http://127.0.0.1:9292/ URL in the Safari, first it's showing the password screen (because of this is development store and Shopify enforces this) and after entering correct password, Safari can't open the URL.

I'm using Safari as primary browser and rarely using the Chrome and I think it's related with the SSL thing.

Documentation link takes to some demo Shopify Store.

Error when runing the development server

Describe the bug
When I start the theme npm run serve it gives me the following error:

Error: Error: spawn shopify ENOENT

This is the full output:

[email protected] serve C:\laragon\www\shopify\vanrycke
helium serve
Info: Helium is Serving files
Warning: Helium is waiting for theme upload to finish
Info: Helium is watching over your changes
Error: Error: spawn shopify ENOENT
Warning: Helium command finished

Environement
Windows 10
Node 14.16.1
npm 6.14.12

To Reproduce
run npm run serve
See error

Expected behavior
The shop should be served on the 9292 port

Documentation link not working

Describe the bug
Readme points to https://helium.idbakkasse.com/ for documentation but it's not loading. I get the following error "DNS_PROBE_FINISHED_NXDOMAIN"

To Reproduce
Steps to reproduce the behavior:

1. Go to https://helium.idbakkasse.com
2. See error

Expected behavior
readme documentation appears

Screenshots
attached