Sage Theme Deployment

When you work on a Sage theme with Trellis for your server stack  the final step tends to be the deployment of the theme itself. The Sage theme does get pulled onto the server using Trellis, but the dist folder isn’t. This folder dist is excluded. This is done using the .gitignore. This is done as it is considered better practice not to have your compiled CSS and scripts on the repository. And those files wind up in that directory. Therefore it is left out.

Sage Theme Deployment Preparation

I assume you already provisioned your server running

ansible-playbook server.yml -e env=production

and did the general deployment using:

./deploy.sh production domain.com

This already installed the LEMP server and WordPress and the them to begin with. See more information on Trellis setups here. I also assume you either installed online or imported the database with all the content.

Compiling all Assets for Production

Then, to have all the assets do a:

gulp --production

This to compile all files and remove source maps. This so you have all necessary CSS and JavaScript files without the unnecessary stuff for development of the theme.

Uploading Dist

Now to upload this dist folder as well I recommend using scp and the admin user. From the theme folder locally execute this command using the terminal:

scp -r dist/ admin@domain.com:/srv/www/domain.com/current/web/app/themes/theme-name/

This will copy over the dist folder with all its assets to your theme on the server. After that you will have no more 404s. The theme will load properly with all the CSS and JavaScript files present. Done! NB Downside is that new deploys keep on removing the dist folder due to git setup.

Update: Better Alternative

Better alternative is to activate the build-before.yml hook file located in trellis/deploy-hooks.

# Placeholder `deploy_build_before` hook for building theme assets locally
# and then copying the files to the remote server
#
# Uncomment the lines below and replace `sage` with your theme folder:
---
- name: Run npm install
 command: npm install
 connection: local
 args:
 chdir: "{{ project.local_path }}/web/app/themes/sage"

- name: Run bower install
 command: bower install
 connection: local
 args:
 chdir: "{{ project.local_path }}/web/app/themes/sage"

- name: Run gulp
 command: gulp --production
 connection: local
 args:
 chdir: "{{ project.local_path }}/web/app/themes/sage"

- name: Copy project local files
 synchronize:
 src: "{{ project.local_path }}/web/app/themes/sage/dist"
 dest: "{{ deploy_helper.new_release_path }}/web/app/themes/sage"
 group: no
 owner: no
 rsync_opts: --chmod=Du=rwx,--chmod=Dg=rx,--chmod=Do=rx,--chmod=Fu=rw,--chmod=Fg=r,--chmod=Fo=r