Help deploying and building my sage theme from git

Hi there,

I’m hosting my theme repos in bitbucket and currently using DeployBot (dploy.io) to push my commits to my live server (via FTP) as they are made. DeployBot has been great but I’m having a really hard time with performing my build script upon deployment.

Here are the commands that I am carring out…

As far as I understand, DeployBot copies the files to a container, carries out the commands above then copies everything to my server over FTP. The problem with this is it is taking forever! Yesterday I waited 6 hours while it attempted to create 39,502 new files… until I realised I must have been doing something wrong so I cancelled it.

I was hoping I might be able to get in touch with someone who is using DeployBot who may be able to share their experience on how it does or doesn’t work for them or else ANYONE who can share how they deploy their sage themes to their live environment and how their assets are compiled in the process?

We recommend to build the assets locally and then push your files up without the bower_components or node_modules directories.

Also, instead of gulp you’ll want to use gulp --production

I haven’t used DeployBot so I can’t comment on any specifics related to that

Thanks for getting back @ben

Even though DeployBot automatically generates bower_components and node_modules (they aren’t included in my repo), they are generated in DeployBot’s container (and are detected as a new files) and therefore deployed to the live server. Can I just confirm, the live server shouldn’t contain “assets”, “bower_components” or “node_modules” but instead “dist” only correct?

Ah yes -oops. Thank you.

Are you/anyone else able to share how they best deploy their sage themes to a live server?

UPDATE: In my build script I included rm -rf node_modules in order to delete the node_modules folder that DeployBot creates within its container so that it doesn’t copy it over to the live site. This means that npm install will execute each time I initiate a deployment to recreate the node modules dependencies within the container (otherwise I can’t run gulp).

The only issue I face now is that seeing as how the dist folder is re-generated each time I make a deployment, it’s entire contents is re-deployed even if I have made changes to only one file in my assets.

Can this be avoided? (not in relation to my specific deployment strategy). In whatever strategy you use, when you make a change to a single theme asset, does that mean the entire contents of your dist folder is then re-deployed?

This sounds better. I’ve set up Codeship before to deploy after it runs tests. It would also run npm and bower installs and then run gulp, and then after deploying the code copy over the dist folder.

Yes, running npm install fresh each deployment is a bit of a pain, but at least it’s automated. And since you’re obviously working locally, you can make all changes there without hold up.

And yes, you do need to upload the entire dist folder. Running gulp or gulp --production deletes or cleans the dist folder anyways.

Yeah true, I’ve been looking at this all day. I found some people are deploying their files within gulp using FTP modules such as “vinyl-ftp”. Looks like “vinyl-ftp” is capable of comparing date modified/file size of destination and source and copy the necessary files which would be really handy and to be honest, exactly what I’m after… However it keeps throwing an error as described here which according to the author is a problem with node-ftp as noted here

Unless you have a buttload of images, it really shouldn’t take that long to upload anyways. And if you are running gulp --production, remember it’s also generating a hashed file for cache busting. So it’s probably good if you clean out the dist folder anyways

i am using deploybot and bitbucket as well and after some trying it works pretty good.

your npm install will run every time deploybot is triggered, better you run npm install in the “advanced” section at the bottom.

official howto:
http://support.deploybot.com/customer/portal/articles/2045626-setting-up-and-using-build-tools

i dont know what exactly your repo looks like (whole bedrock project or just the sage theme) but i first had to cd into my theme to build assets:
cd web/app/themes/themename/ gulp --production
same with npm install

i also had to use an exclude because deploybot wants to upload all node_modules from the container. (maybe this happens because i use a subdirectory, the theme folder or because its just beta)

p.s. i removed all bower stuff and let npm handle that. anyway i wonder why we use 2 package managers

Hi Fabian
I found this code; https://gist.github.com/jepser/e362b9336b483be5251a296036812137 to use in deploybot, I’m runngin bedrock, using valet and a sage theme too.

but it’s throwing up this error;

/usr/local/rvm/scripts/extras/bash_zsh_support/chpwd/function.sh: line 5: cd: {/web/app/themes/bedvalet/}: No such file or directory
output [11:53:23] Local gulp not found in /source
output [11:53:23] Try running: npm install gulp
output npm WARN enoent ENOENT: no such file or directory, open ‘/source/package.json’
output npm WARN source No description
output npm WARN source No repository field.
output npm WARN source No README data
output npm WARN source No license field.
output npm ERR! Linux 4.4.0-116-generic
output npm ERR! argv “/usr/bin/nodejs” “/usr/bin/npm” “run” “build:production”
output npm ERR! node v6.9.2
output npm ERR! npm v3.10.9
output npm ERR! path /source/package.json
output npm ERR! code ENOENT
output npm ERR! errno -2
output npm ERR! syscall open
output npm ERR! enoent ENOENT: no such file or directory, open ‘/source/package.json’
output npm ERR! enoent ENOENT: no such file or directory, open ‘/source/package.json’
output npm ERR! enoent This is most likely not a problem with npm itself
output npm ERR! enoent and is related to npm not being able to find a file.
output npm ERR! enoent
output npm ERR! Please include the following file with any support request:
output npm ERR! /source/npm-debug.log

Any ideas please?

You’re mixing gulp (Sage 8) and npm run build:production (Sage 9)… did you read any of those errors? They state exactly what is wrong

I’m mixing up and not understanding most of this. I’ve been a web developer for 6 months.

Okay, but coming here and bumping a 3 year old thread & expecting people to volunteer to do your work for you isn’t really appropriate.

I’ve previously pointed out our support page to you, and you can also post a topic in the jobs category if you’re looking to hire someone to get the work done.

I’m hoping people will help me. I’m just missing a couple of lines of code. Didn’t think it would cause such offence. I’m sorry.