No BS webpack development tool for Shopify themes (online store 2.0)

Overview

Shopify Theme Development Tool

Development tool for Shopify to create themes for Online Store 2.0.

Features

  • Blank starter theme
  • Webpack 5
  • Switch between bespoke development and production API's that are used to extend Shopify theme capabilities
  • ESLint
  • Babel
  • PostCSS
  • Create chunks

Getting Started

Please make sure the following are installed.

Tool Why?
Homebrew To install Shopify CLI tool
Shopify CLI To connect to Shopify store before development
  1. Install dependencies - npm install
  2. Create a .env file and include this snippet in
    NODE_ENV = development;
    API_LIST_TARGET = development;
  3. Start build and watch for any changes - npm run start

Creating chunks

Webpack will create a chunk for any script or style sheet in scripts/entries and styles/entries.

Entry Output
scripts/entries/collection.js assets/collection.js
styles/entries/product-card.scss assets/product-card.css

Webpack will output the files in assets/ on build therefore if a new entry file is created, npm run start has to be ran again i'm afraid.

Example of referencing entry files in .liquid:

<!-- USE DAWN THEME FOR BEST PRACTICES* -->
<link rel="stylesheet"  href="{{ 'product-card.css' | asset_url }}">
<script type="text/javascript" src="{{ 'collection.js' | asset_url }}" defer="defer">

Commands

Description
npm run build Builds js/scss in development/production
npm run deploy Upload your local theme files to Shopify - Read more
npm run publish Select and publish an unpublished theme from your theme library - Read more
npm run start Shopify CLI uploads the theme as a development theme on the store that you're connected and watches for changes - Read more
npm run test:liquid Lints your theme code - Read more
npm run test:js Check js for errors and best practices using xo

Environment

NODE_ENV=(development|production) for development or production build

API_LIST_TARGET=(development|production) to swap between custom development and production ready api's.

Make sure the object keys for both development-api-list.js and production-api-list.js are the same.

If only one store is used for development + testing and production, feel free to only use production-api-list.js.

Usage

// development-api-list.js
module.exports = {
	FOO_API: JSON.stringify('https://lambda.development-foo-api.com/bar'),
};
// production-api-list.json
module.exports = {
	FOO_API: JSON.stringify('https://lambda.production-foo-api.com/bar'),
};

Reference value in js files:

fetch(FOO_API).then(...)

Notes

  • To minimise the number of dot files, js linting rules are defined in package.json with the help of xo . In addition the postcss configuration is defined within webpack/parts/common.js rather than creating a separate configuration file for it.
  • Fonts, images should be hosted in Shopify CDN, the purpose of the asset folder should be to contain all js/css chunk files.
  • I will be writing up a precise walkthrough soon to integrate Buddy for deployment.
  • If i've missed out on anything please create an issue 😀 .
You might also like...

Forked from hayes0724/shopify-packer Modern development tool for Shopify using Webpack 5. Easy to extend and customize, zero build config, compatible with Slate and existing websites.

Forked from hayes0724/shopify-packer Modern development tool for Shopify using Webpack 5. Easy to extend and customize, zero build config, compatible with Slate and existing websites.

Shopify Packer Modern development tool for Shopify using Webpack 5. Easy to extend and customize, zero build config, comes with starter themes and com

Nov 24, 2022

Build apps, themes, and hydrogen storefronts for Shopify

Build apps, themes, and hydrogen storefronts for Shopify

Shopify CLI With the Shopify command line interface (Shopify CLI 3.0), you can: build custom storefronts and manage their hosting initialize, build, d

Jan 2, 2023

An unofficial, simplified version of the @Shopify/koa-shopify-auth middleware library.

simple-koa-shopify-auth https://www.npmjs.com/package/simple-koa-shopify-auth NOTE: This package is not maintained by or affiliated with Shopify. Desc

Nov 7, 2022

Shopify Landing (Open source landing page shopify application)

Shopify Landing (Open source landing page shopify application)

SHOPIFY Open source landing page shopify application Configuration and Setup Key Features Technologies used 📸 Screenshots Author License Configuratio

May 10, 2023

Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

May 18, 2022

Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

May 3, 2022

Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

Jan 3, 2023

A Gatsby starter using the latest Shopify plugin showcasing a store with product overview, individual product pages, and a cart

A Gatsby starter using the latest Shopify plugin showcasing a store with product overview, individual product pages, and a cart

Gatsby Starter Shopify Kick off your next Shopify project with this boilerplate. This starter creates a store with a custom landing page, individual f

May 12, 2021

Minimal E-Commerce Store built with NextJS using Shopify Storefront API

NextJS Shopify Store Minimal E-Commerce Store built with NextJS using Shopify Storefront API Usage: run: npm install && npm run dev OR If you have doc

Nov 29, 2022

A Gatsby storefront for a Shopify store.

Leah Gardner Storefront A Gatsby storefront for a Shopify store. Built as a learning project for Shopify and Gatsby integration. This project is boots

Dec 14, 2022

A beautiful NextJS storefront for a Medusa store (The opensource alternative to Shopify)

A beautiful NextJS storefront for a Medusa store (The opensource alternative to Shopify)

medusa-starter-monster About Participants Yinka - @yinkakun Description Medusa Storefronts don't have to be boring. This starter is an elegant and bea

Dec 16, 2022

A sample app (with TypeScript) to help developers bootstrap their Shopify app development.

⚠️ Please, refer to kanzitelli/shopify-app-template-typescript for the most up-to-date version. This repo was used for testing purposes. Shopify App N

Jun 10, 2022

Microsoft-store - Microsoft Store package for LTSC.

Microsoft Store Microsoft Store package for Windows LTSC. Usage Just download the release and double click the exe file. Can be used in Windows LTSC 2

Jan 2, 2023

Cyberpunk Store - online supermarket project, using cyberpunk inspired theme.

Cyberpunk Store - online supermarket project, using cyberpunk inspired theme.

if you downloaded the project from GITHUB TO START THE PROJECT WITHOUT ERRORS - Copy/Cut the "assets" folder into "Client/src/" folder (i threw the

Jan 2, 2022

This is an imitation of the Amazon online shopping store. Users can add and remove items from the cart, proceed to checkout and make payments.

AMAZON This is an imitation of the Amazon online shopping store. Users can add and remove items from the cart, proceed to checkout and make payments.

Mar 23, 2022

Awesome book website, small online library to store books when added to the list we have implemented this using a plaint JavaScript!

microverse-m2-Awesome-books This project is about building Awsome Books using javascript Live demo Live Demo Link Built With -Lighthouse (An open-sour

Dec 27, 2022

Foot Locker is an online store specialized in selling shoes of all kinds, where you can find all the shoes you want

Foot Locker is an online store specialized in selling shoes of all kinds, where you can find all the shoes you want

Foot Locker Links 🖇 Heroku link Adobe XD link Description Foot Locker is an online store specialized in selling shoes of all kinds, where you can fin

Apr 16, 2022
Owner
null
RISC-V Online Assembler using Emscripten, Gnu Binutils

RISC-V Online Assembler This is a very crude online assembler for RISC-V assembly (all variants that gas supports) It uses a webassembly compiled vers

Lucas Teske 21 Dec 28, 2022
React Starter Kit — isomorphic web app boilerplate (Node.js, Express, GraphQL, React.js, Babel, PostCSS, Webpack, Browsersync)

React Starter Kit — "isomorphic" web app boilerplate React Starter Kit is an opinionated boilerplate for web development built on top of Node.js, Expr

Kriasoft 21.7k Jan 1, 2023
Minimal Electron Starter Kit built with Typescript, React, Webpack 5 and Babel 7

electron-webpack-boilerplate Minimal Electron Starter Kit built with Typescript, React, Webpack 5 and Babel 7 To create a JS library, check out js-lib

Francisco Hodge 10 Aug 16, 2022
The next small thing in web development, powered by Svelte

sapper The next small thing in web development, powered by Svelte. What is Sapper? Sapper is a framework for building high-performance universal web a

Svelte 7.1k Jan 2, 2023
The official, opinionated, batteries-included toolset for efficient Redux development

Redux Toolkit The official, opinionated, batteries-included toolset for efficient Redux development (Formerly known as "Redux Starter Kit") Installati

Redux 9k Jan 8, 2023
Next.js + Tailwind CSS + TypeScript starter packed with useful development features

?? ts-nextjs-tailwind-starter Next.js + Tailwind CSS + TypeScript starter packed with useful development features. Made by Theodorus Clarence Features

Cornelius Denninger 7 Nov 12, 2022
Postgres Node.js Express TypeScript application boilerplate with best practices for API development.

Node TypeScript Boilerplate Postgres Developer Ready: A comprehensive template. Works out of the box for most Node.js projects. This project is intend

Chirag Mehta 9 Aug 28, 2022
A boilerplate for REST API Development with Node.js, Express, and MongoDB using TypesScript

node-mongo-boilerplate A simple boilerplate for NODEJS, EXPRESS and MONGODB REST API development . Quick Start Make sure you have node.js v14 + npm v8

Asamoah Michael 5 Oct 16, 2022
Localtunnel module for Nuxt to allow remote/external access to your Nuxt development server.

Nuxt Localtunnel A Nuxt module for automatically running localtunnnel to externally expose your development instance of Nuxt to the outside world. All

null 14 Sep 7, 2022
A cli tool to generate cra-template from current create-react-app project.

Create Cra Template A cli tool to generate cra-template from current create-react-app project. Create Cra Template Templates cra-template-popular cra-

Yoki 23 Aug 18, 2022