Our great sponsors
-
-
shopify-packer
Modern development tool for Shopify using Webpack 5. Easy to extend and customize, zero build config, compatible with Slate and existing websites.
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
Themekit - development tools to interact with the Shopify platform to watch for local changes and upload them automatically to Shopify
Shopify Packer written by Eric Hayes is probably the best thing happened to Shopify theme development since Shopify stopped supporting Slate. It's everything we all hoped for and that's a promise. Packer uses Webpack 5 with zero config to compile, bundle, split and minify your modern development technologies and start a server for development with hot module reloading actually working perfectly. It can also create, list and manipulate (delete, download, deploy etc) themes from your shop which is a lifesaver sometimes. I also love using Eric's Shopify Packer because it uses SCSS, Stylelint, ESLint, Babel and PostCSS. It can analyze bundles and have multiple entry points for templates and layouts. It's actually a CLI tool that’s installed globally and you can start a new project or integrate Packer with an existing theme in ridiculously little time. Most importantly you can easily customize all settings for the site and webpack if needed. Eric also provides quick support for the packer so i would highly recommend it and also buy him a beer because he deserves one for this!
B-creative is a modern frontend starter from Bornfight that has standardised opinionated code style and architecture for SCSS, Javascript and HTML/PHP/Liquid. It’s used and contributed by multiple teams. B-creative integrates perfectly with Packer because it uses the same linters so we can just copy their configs and have the same style across all platforms. Templates for SCSS and Javascript modules give us faster development times without having to write the same stuff over and over again. Using b-creative’s SCSS is also future proof because it provides tools to scale the site from 1440px (or any configured base resolution) to any bigger resolution and the site will look the same, while still giving the ability to have the other logic for mobile resolutions.
Next we will copy SCSS and JS architecture from Bornfight's b-creative along with linter configs to achieve standardised code. Best thing to do is not to change names of the Packer main entrance point files and just include b-creative’s files inside existing Packer files (they are empty anyways). Don't forget to copy the fonts folder because it's needed for including fonts with b-creative. Your new SCSS and JS will also need some dependencies installed which you can find in b-creative’s package.json file under dependencies. B-creative comes with Bornfight’s modern CSS reset to help you with developing new features.