Giter Club home page Giter Club logo

shopify-workflow-poc's Introduction

Shopify Workflow PoC

This is a Proof of Concept of workflow with different environments using Github and GitHub Actions.

Workflow

GitHub Actions

Pre-requisites :

  • GitHub account and repository
  • Shopify store of production
  • Shopify store of staging (development)

Shopify stores

We're using 2 stores for our workflow with multiple themes :

  • Production store
    • Production theme
    • Pre-production theme
  • Staging store
    • Staging theme
    • n theme(s) for developers

Branches

  • master (for production theme on production environment)
  • preprod (for pre-production theme on production environment)
  • develop (for staging theme on development environment)

Philosophy

Production and staging store have same configuration. But we often have the same content between the two environments.

  • In production store, we have all real products and collections.
  • In staging store, we have ~10 or less products and one or two collections (for testing).

Workflow

Workflow is pretty simple, based on GitFlow but with no release branch nor tags.

master, preprod and develop branches are protected. It's not possible to push directly on them. The best way is to use pull requests.

Principal

  1. Create a new branch from master (eg. feature/store-locator)
    • Best practice : prefix branch with fix/ for a fix or feature/ for a new feature
  2. Apply commit(s) to this branch
  3. Merge feature/store-locator into develop
    • It will deploy on staging theme, then test your changes
  4. If changes are not good, return to step 2. Otherwise, merge feature/store-locator into preprod
    • It will deploy on pre-production theme, then test your changes
  5. If changes are not good, return to step 2. Otherwise, merge feature/store-locator into master
    • It will deploy on production theme, your changes are now live!

Basic workflow

Workflow with multiple branches

Workflow with fix

New branch always start from master one, even if the purpose is a new feature or a fix.

Local development

We're using Theme Kit for local developers : https://shopify.github.io/themekit/ We created a template on development store for each developer.

CI/CD with GitHub Actions

Actions

Workflow files are available here. They used the Deploy Shopify theme Actions : https://github.com/marketplace/actions/deploy-shopify-theme

Secrets

First you have to generate a private app to get an API KEY on Shopify. Get API Access.

Then you'll need to provide some secrets :

  • SHOPIFY_STAGING_PASSWORD: Your password from your private app previously created.

  • SHOPIFY_STAGING_STORE_URL: Your development store url. (e.g. demo-staging.myshopify.com).

  • SHOPIFY_STAGING_THEME_ID: Your theme id on your Shopify development Store.

  • SHOPIFY_PRODUCTION_PASSWORD: Your password from your private app previously created.

  • SHOPIFY_PRODUCTION_STORE_URL: Your production store url. (e.g. demo.myshopify.com).

  • SHOPIFY_PREPRODUCTION_THEME_ID: Your preproduction theme id on your Shopify production Store.

  • SHOPIFY_PRODUCTION_THEME_ID: Your production theme id on your Shopify production Store.

  • THEME_PATH: Path of your theme on your GitHub repository. If your theme is at the root of your repository, just use ./.

env vars

License

The Dockerfile and associated scripts and documentation in this project are released under the MIT License.

shopify-workflow-poc's People

Contributors

pgrimaud avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.