The dev ops system - Sound Decisions

Setting up shopify and git for multiple developer management

Shopify + Git

Or

How I Managed to Not Go Completely Insane(anymore) Working with Shopify

 

Inspired by this article

 

What We Are Going To Accomplish

  1. Set up a new development store
    1. Setting up a method that multiple developers can work on the “same store”
  2. Create a git repository that will version all of our working files and theme files
  3. Use gulp to create optimized images and minify our scss and js and get our development environment under control ( not shopify’s strict asset folder nonsense, although all of our files will eventually automatically adhere to shopify’s rules once they deploy  )
  4. Make sure your theme is exportable and self contained

 

Before we start you will need a few things.

Requirements:

  1. Node.js / npm
  2. Gulp
  3. Git

Getting What We Need

Step 1: Go to your Shopify Store

Step 2: Go to your desired theme, export/download it

Step 3: If all of your Store’s images are in your theme’s Asset folder, good job, skip to the next section, otherwise go to step 4

Step 4: you need to find every image that is being used in your theme and download it. There is no easy way to do this. However it is easier if you install a browser extension called “ShopifyFD” that allows you to export a file list to a text file and then you can use a variety of download managers to download the files from the list.

Step 5: Once you have all your required files we are going to make good on what we said earlier

“Make sure your theme is exportable and self contained”

– Me 45 seconds ago

The only way to do this is to make all those files ASSET files. and then change your liquid tags in your theme to reflect an asset_url. If you have many files in your settings->files… I feel your pain.

 

Setting up the File Structure

my-shopify-folder
├── lib
│   └── images
│   └── js
│   └── scss
├── yourTheme
│   └── assets

│   └── config
│   └── layout
│   └── locales
│   └── snippets
│   └── templates

 

Once you have your theme and a new lib folder, and it’s child folders,  it’s time for the next step

Setting up NPM and Gulp

  1. Open terminal/bash and go to your my-shopify-folder
  2. Then npm install –global gulp this will install gulp on your machine globally
  3. Then npm init then press enter over and over until the questions go away, this will create a package.json in your file structure so it will look like this

my-shopify-folder
├── lib
│   └── images
│   └── js
│   └── scss
├── yourTheme
│   └── assets

│   └── config
│   └── layout
│   └── locales
│   └── snippets
│   └── templates
├── package.json <- your shiny new file

 

  1. Then npm install –save-dev gulp gulp-watch gulp-shopify-upload

 

What did we just do?

You now have the power to use gulp to do whatever you want with your files and the ability to automatically upload them to a shopify theme so that you can see your changes live online right away. But hold your horses we need to create a development store first.

 

Setting up our Theme

This is where things get a little different than what some are used to. First thing first sign up for the Shopify Partners Program, don’t worry it’s free.

Now that you are a Shopify Partner you have the ability to create what is known as a Development Store. These Development Stores are completely free and are the key to having multiple developers all working on the same theme.

Did you know that you can only ever have 1 active theme preview on a Shopify store? That means that only 1 version of a file can ever be looked at. That means if you don’t want developers stepping on each others toes they are going to need their own stores. Luckily Shopify makes this almost painless.

 

Go ahead and make a development store for every developer you have.

Then upload your yourTheme folder to your dev stores

Now on each store go to Apps and generate a new Private App, I called mine “gulpUpload”

You should see a page that lists some long random strings, we are interested in grabbing these values

 

Shopify_api_key

Shopify_api_password

Shopify_url

 

NOTE: make sure you allow the permission of the app you just created to modify theme files aka READ/WRITE. Nothing will work unless you do this.

 

Now make a new file called config.json at the root of your project

So your file structure should look like this now

 

my-shopify-folder
├── lib
│   └── images
│   └── js
│   └── scss
├── yourTheme
│   └── assets

│   └── config
│   └── layout
│   └── locales
│   └── snippets
│   └── templates
├── node_moudles <- this folder was created automatically by our npm install
├── package.json
├── config.json <- your shiny new file

 

Make  config.json look like this

{
 “shopify_api_key”: “whateveryourapikeyishere”,
 “shopify_api_password”: “whateveryourapipasswordishere”,
 “shopify_url”: “YOUR-STORE-NAME.myshopify.com”
}

 

Now lets build that gulpfile.js at your site root

It should look like this now

my-shopify-folder
├── lib
│   └── images
│   └── js
│   └── scss
├── yourTheme
│   └── assets

│   └── config
│   └── layout
│   └── locales
│   └── snippets
│   └── templates
├── node_moudles
├── package.json
├── config.json
├── gulpfile.js <- your shiny new file

 

Go ahead and copy the following into your gulpfile.js file

// Gulp plugin setup
var gulp = require(‘gulp’);
// Watches single files
var watch = require(‘gulp-watch’);
var gulpShopify = require(‘gulp-shopify-upload’);
// Grabs your API credentials
var config = require(‘./config.json’);
gulp.task(‘shopifywatch’, function() {
var options = {
   “basePath”: “./yourTheme/”
};

return watch(‘./yourTheme/+(assets|layout|config|snippets|templates|locales)/**’)
 .pipe(gulpShopify(config.shopify_api_key, config.shopify_api_password, config.shopify_url, null, options));
});
// Default gulp action when gulp is run
gulp.task(‘default’, [
 ‘shopifywatch’
]);

 

That’s it we are done! Well almost

At this point you could go to your bash window at the root and type gulp and it will start to watch your files and upload to the currently active theme on your development store.

 

We are actually about halfway there

For the sake of time I am going to just give you my gulp file that is configured to handle compiling scss and javascript and minifying it.

Go ahead, just copy it

// Gulp plugin setup

var gulp = require(‘gulp’);

// Watches single files

var watch = require(‘gulp-watch’);

var gulpShopify = require(‘gulp-shopify-upload’);

// Grabs your API credentials

var config = require(‘./config.json’);

 

// Compiles SCSS files

var sass         = require(‘gulp-sass’);

var autoprefixer = require(‘gulp-autoprefixer’);

var cssnano = require(‘gulp-cssnano’);

var concat = require(‘gulp-concat’);

 

var jshint = require(‘gulp-jshint’);

var uglify = require(‘gulp-uglify’);

var rename = require(‘gulp-rename’);

 

// Notifies of errors

var notify = require(“gulp-notify”);

 

// Includes the Bourbon Neat libraries

var neat = require(‘node-neat’).includePaths;

 

function handleErrors() {

  var args = Array.prototype.slice.call(arguments);

 

  // Send error to notification center with gulp-notify

  notify.onError({

      title: “Compile Error”,

      message: “<%= error %>”

  }).apply(this, args);

 

  // Keep gulp from hanging on this task

  this.emit(‘end’);

}

 

gulp.task(‘images’, function() {

  return gulp.src(‘./lib/images/**’)

      //.pipe(changed(‘./yourTheme/assets/’)) // Ignore unchanged files

      //.pipe(imagemin()) // Optimize

      .pipe(gulp.dest(‘./yourTheme/assets/’))

});

 

gulp.task(‘sass’, function () {

  gulp.src(‘./lib/scss/*.{sass,scss}’)

      .pipe(sass({includePaths: neat}))

      .on(‘error’, handleErrors)

      .pipe(autoprefixer({ browsers: [‘last 2 version’] }))

      .pipe(rename({suffix: ‘.min’}))

      .pipe(cssnano())

      .pipe(concat(‘style-main.min.css’))

      .pipe(gulp.dest(‘./yourTheme/assets’))

      .pipe(notify({ message: ‘SCSS task complete’ }));

 

});

 

gulp.task(‘styles’, function () {

  gulp.watch(‘./lib/scss/**/*.{sass,scss}’, [‘sass’]);

});

 

gulp.task(‘scriptsWatch’, function () {

  gulp.watch(‘./lib/js/**/*.js’, [‘scripts’]);

});

 

gulp.task(‘imageWatch’, function () {

  gulp.watch(‘lib/images/*.{jpg,jpeg,png,gif,svg}’, [‘images’]);

});

 

gulp.task(‘scripts’, function() {

  return gulp.src(‘./lib/js/**/*.js’)

      .pipe(jshint(‘.jshintrc’))

      .pipe(jshint.reporter(‘default’))

      .pipe(concat(‘main.js’))

      .pipe(gulp.dest(‘./yourTheme/assets’))

      .pipe(rename({suffix: ‘.min’}))

      .pipe(uglify())

      .pipe(gulp.dest(‘./yourTheme/assets’))

      .pipe(notify({ message: ‘Scripts task complete’ }));

});

 

gulp.task(‘shopifywatch’, function() {

  var options = {

      “basePath”: “./yourTheme/”

  };

 

  console.log(config)

 

  return watch(‘./yourTheme/+(assets|layout|config|snippets|templates|locales)/**’)

      .pipe(gulpShopify(config.shopify_api_key, config.shopify_api_password, config.shopify_url, config.theme_id, options));

});

 

// Default gulp action when gulp is run

gulp.task(‘default’, [

  ‘shopifywatch’, ‘styles’, ‘scriptsWatch’, ‘imageWatch’

]);

 

Before this will work however we need to install a couple more node_modules

Lets make this easy as well

  1. Go ahead and replace the “devDependencies”  in your your package.json file with the following
  2. Then go to your terminal/bash run npm install

“devDependencies”: {

“del”: “^2.2.2”,

“gulp”: “^3.9.1”,

“gulp-autoprefixer”: “^3.1.1”,

“gulp-cache”: “^0.4.5”,

“gulp-concat”: “^2.6.1”,

“gulp-concat-css”: “^2.3.0”,

“gulp-cssnano”: “^2.1.2”,

“gulp-imagemin”: “^3.1.1”,

“gulp-jshint”: “^2.0.4”,

“gulp-livereload”: “^3.8.1”,

“gulp-notify”: “^2.2.0”,

“gulp-rename”: “^1.2.2”,

“gulp-ruby-sass”: “^2.1.1”,

“gulp-sass”: “^2.3.2”,

“gulp-shopify-upload”: “^2.0.0”,

“gulp-uglify”: “^2.0.0”,

“gulp-watch”: “^4.3.11”,

“jshint”: “^2.9.4”,

“node-bourbon”: “^4.2.8”,

“node-neat”: “^1.7.2”

}

 

Now your project is ready to handle pretty much anything you throw into your lib folder and it will compile automatically to your themeFolder and upload to the dev store we made earlier. Cool right?

 

“But what about Git?”

Thats right we still have to finish setting up git.

First How about that .gitignore

Go ahead and create a .gitignore that has these lines

node_modules

config.json

 

This will allow our shopify site credentials to stay safe

 

I use phpStorm which have git controls built into it making this incredible easy but i’ll share the command line way of doing it as well.

  1. Go to your my-shopify-folder in terminal/bash and type git init
  2. Then type git remote add origin remote repository URL
  3. git add .
  4. git commit -m “First commit”
  5. git push -u origin master

 

If you are using phpStorm you only have to do steps 1 & 2 and then use php storm to git add your my-shopify-folder then push

 

Multiple Developer Time

This last step is easy

Just have your other developers git clone the repository and change their config file to point to their own Shopify Development Stores.

Now when they run gulp they will only affect their store. Whenever they want a feature to be deployed to the master store they can create a branch and then eventually merge it into master and everyone call pull the code and deploy it to their stores.

 

“Deploying to Master”

So your master store is just whatever store you decide to not have be a development store.

Same setup, different config.json credentials

Everything automatically gets uploaded as you change it as long as you are running gulp.

Every Time you want to make a new feature create a new branch on git, and ALWAYS PULL AND PUSH

 

Happy Coding 

1 Comments

  • Evren
    January 21, 2017

    How can I use this information for my Shopify theme? I simply want to compress CSS?JS for Pagespeed and UX needs. I feel like this is getting me there, but I don’t have a need for the partners portion of this guide… I simply wish to compress/re-upload. Can you assist?

    Reply

Leave Your Comments

Your email address will not be published. Required fields are marked *