Updating Sage projects on MAMP

sage
1

Hi all,

I’m confused… I hope this question will be clear for you guys. I am always wondering how I should perform updates on my Sage (v8.4.0) projects. Let’s say I wanted to give my site a graphical makeover - modify CSS and JS files. I am developing locally on a MAMP environment.

This is my current workflow, and it sucks:

  1. Make a backup of my DEV files on MAMP (this contains my assets/ directory, I will need it in step 8)
  2. Copy PROD to DEV (all wordpress files + database)
  3. Browse to my theme directory on DEV and delete all files!
  4. Restore the original Sage-8.4.0 project from Github to my theme directory on DEV
  5. Open Terminal, browse to the theme directory and run “npm install”
  6. Run “bower install”
  7. Run the “gulp” command
  8. Restore my assets directory (the copy I made earlier in step 1)
  9. Run “gulp” again
  10. Run “gulp watch” - AND NOW I’m ready to do modifications to my website :slight_smile:

I have to go through this entire process every time, even for changing 1 line of CSS code.
Could someone tell me how to update my sites (I will be using MAMP) in a better/more efficient way using MAMP? I have no experience with Git, Bedrock and Trellis for now…

Thanks in advance!
Best regards

2

Hey, are you are talking about making sure the version of Sage stays current? If so, you don’t need to update Sage like that. It’s a starter theme, you just build a theme with it, maintain it, and move on to the next one. You’re going to drive yourself nuts trying to keep it updated as if it were a framework or something.

As far as ongoing work goes - just work on it like you would any other project. Theoretically you should be able to update your Bower dependencies without much fuss because you aren’t editing those files. You can just trash the bower directory, update package.json, and run bower install and gulp again. If there’s problems just undo the changes in bower.json and repeat the install.

Version control is your friend here. You really need to learn it, just get a GUI and dive in. Tower is a great Git client, and they have some free tutorials here - https://www.git-tower.com/learn/

The Tower client isn’t free though, but GitHub has a free client and so does Atlassian (BitBucket).

It’s not as bad as it seems, just think of it as “save as”. All you need to learn is push, pull and commit to start, then branch and merge when you’re comfortable and that will keep you going for a long while.

Roll with MAMP as long as you need to and put off Trellis and Bedrock till you’re comfortable - but trust me, version control is a must know.

Good luck!

2 Likes
3

I agree with everything here but add that Trellis makes version control easier to understand.

I noted in another thread that WordPress deploys without Trellis are SUPER hard to keep in sync with version control. No matter how judicious you are, you’re gonna find yourself updating plugins in production and not in dev, and vice versa.

Remember that time you made a hotfix to your theme in production and didn’t save a copy locally and overwrote it a week later because you forgot? Trellis prevents that.

Trellis actively discourages this by 1) disabling plugin update in production, and 2) making deploys SUPER easy. ALL changes to your site are first made locally on your computer, then committed to version control, then deployed to production.

So for instance I perform monthly updates for all my clients of plugins and WordPress core. On my pre-Trellis sites I 1) run the updates in production, 2) make sure nothing broke, 3) ssh to the server, commit, and push the changes to GitHub. This is straight forward until I’m working on other changes to the site in a local environment at the same time. Suddenly my monthly maintenance is a merge conflict.

With Trellis I 1) update composer.json locally and run composer update, 2) run vagrant up to make sure nothing broke, commit my changes to GitHub (all without touching production), and 3) deploy. All my changes come from the same place and merging is much less of an issue.

Also I’m always sure that my dev and production environments are always in sync, so to make design changes I only have to grab a copy of the production database and import it. No setting up sites in MAMP or copying files down from production. Just vagrant up and I’m good to go.

So, @svdb, I recommend learning Trellis and Git. It’s a steep learning curve but once you’ve done it a couple of times you can pretty easily ditch MAMP. Trust me, you will feel way more relaxed about making changes to sites post launch. Trellis has saved my life in this regard and it can save yours, too.

4

Hi @smutek & @MWDelaney,

Thank you both for your reply. I need to dig into Git and Trellis soon!

I guess my question was not clear. If I need to update non-Sage projects, I always download a copy from the file I want to edit, let’s say app.css from PROD to DEV. Make the changes on DEV, test and upload back to PROD. This workflow is not recommended by most of you guys, but it’s acceptable for me. Of course there is always room for improvement, it’s just that I haven’t had the time to investigate in a better workflow. But I should… thanks for reminding me :wink:

So for now, I’m working with MAMP without Trellis and Version Control and here’s the question: If I needed to change a font color for an non-Sage project, I would simply edit my app.css file, make the change, upload the file back to production - done. This is a matter of 3 minutes.

If I need to make the same change for any of my Sage projects, I would have to go through a whole lot of very complicated and risky steps. As far as I understand there is no easy way to make CSS/JS changes. It takes me at least one hour to change one line of code.

This is what I do: I copy the entire Wordpress directory from PROD to DEV. But after copying to DEV, I still can’t start making changes. The Themes > Sage directory does not contain my assets/ directory! Am I missing an important piece of the puzzle here? I can’t run the Bower and Gulp commands at this point. Right?

So, what I do now is I make a backup and delete the Themes > Sage directory that I just copied from PROD to DEV and restore the Sage 8.4.0 project from Github back to the Themes directory. This contains the assets/ directory BUT it’s missing my custom files. Ok? Now I grab my custom files (See screenshot below) from my backup and copy them in the Themes > Sage folder

sage.jpg288×508 31.3 KB

Not there yet… this is madness!

Now I’m able to run the Bower and Gulp commands! A dist/ directory will be created and and last but not least…
The assets/ directory does not contain my customized files at this stage. I still have to restore my assets/ directory, run Gulp and finally Gulp watch for further development.

5

Why doesn’t your Sage directory in PROD have your assets directory in it when you copy it down? Do you see it in FTP?

You SHOULD be able to copy down your Sage directory, run npm install, bower install, and gulp, and be ready to work. Something unusual is happening if you can’t do that.

6

Good question @MWDelaney, for some reason I thought it was best practice to exclude the assets/ directory on Production servers. Not sure why I started doing that. If I could download my Sage directory and start working after running the npm, bower and gulp commands, that would be a serious improvement already. I’ll try it out… thanks again!

7

I believe you should always have a canonical “full” copy of your project in a predictable place. When we work in Git, all the files needed to build exactly what’s in production are always stored in Git and PROD is simply a deployment of that canonical source. We might exclude assets from deployment (I don’t, but you could) because PROD is a copy, not canon.

When we work with Trellis we actually get to keep all the files necessary to build AND deploy the site, too, which is awesome.

The way you’re working your PROD is basically that canonical source. It’s the most accurate copy of your code. So I recommend thinking like you’re about to hand the project off to another developer, or you’re about to pick the project back up after a year and don’t remember the process you used to make it workable. That other developer, or future you won’t know that you didn’t store assets with the canonical source for the project and they’ll be lost.

So yeah I hope this rambling is helpful. Learning Git and Trellis really helped me understand what I needed to make my projects supportable and easy to understand. It’s worth the effort.

8

Thanks again @MWDelaney, I’ve decided to give Trellis a try… to be continued.

This is an error message I get when cloning Trellis

9

Nevermind, i assume Git hasn’t setup correctly and GitHub isn’t able to authenticate me. I resolve this first