Roots Discourse

Sage WP Engine and SFTP

Hello,

I’m running Trellis, Bedrock and Sage locally and finding it a great experience so far.

I have followed the guides on getting the theme to work on WP Engine and have managed to get it running on a WP Engine development server by following the “Deploying Sage on via FTP” guide and “Sage 9 on WP Engine” thread.

Basically what I have done is run “composer install --no-dev”, “yarn build:production”, uploaded everything except the “node_modules” folder and edited the view.php file to add “compiled’ => ‘/tmp/sage-cache’,”.

I’m planning to go with a super basic SFTP workflow for WP Engine based on what I’ve read setting up CI/CD seems finnicky and overkill for my current project.

I was hoping to ask if there is other people who go with this basic approach and if there is any gotchas to be aware of?

The site itself Im building is not complicated, and will likely only use ACF and a Forms plugin.

I was hoping to set it up in such a way that a non-tech user can login to the admin and update the WP Core and plugins themselves without breaking anything (I’ve never had an issue in the past with people doing this on underscores).

(I’m aware that this is not best practice, but don’t want to leave the client in a situation where they need me to do basic things like update plugins or wordpress).

Thanks

The site won’t break on production, but as soon as someone does this your repo will be out of sync w/r/t to any WP Plugins. Unless you pay close attention to which, if any, plugins have been updated in production, you run the risk of overwriting plugin updates when you deploy local changes.

Bedrock by default also disables the ability for WP to modify files on the production server (i.e. the Editor under Appearance in the admin isn’t available; plugins and core can’t be updated). I don’t know if this is still the case using the workflow you have (I haven’t used WP Engine in years), but if it’s not then you need to make sure you account for any changes a client may have made on the production server before deploying any local changes.

Thank you for your response.

I’m using Trellis/Bedrock/Sage locally but only uploading the contents of my Sage theme folder to the production servers on WP Engine - therefore I should hopefully avoid any issues that may result from Bedrock.

So it seems that my only issue is ensuring that the plugins I have locally are the same versions as the ones on the production site.

Just a couple questions on plugins:

  • Is there a list of recommended plugins that work best with Sage?

  • Is there a specific form plugin that you recommend that plays best with Sage?

No official list, but there’s a blog post with some of the team’s favorites: https://roots.io/favorite-wordpress-plugins-and-utilities/

The list above mentions HTML Forms: https://wordpress.org/plugins/html-forms/

Sorry to revive this post but it is related.

I have done a some more local development and I recently pushed some changes via SFTP to the WP Engine host, following the below routine:

  • composer install --no-dev
  • yarn build:production
  • SFTP upload all files except the node_modules folder

After I run the yarn build:production locally the styling of the site breaks, I notice a lot of my custom SCSS is not added (note: all the custom scss I’m adding to existing files like _header.scss and _global.scss).

I then upload all the files to the production server and it is also broken there. I then delete the /dist folder on the server to make sure that it’s not a caching issue and that doesn’t help either.

When I revert to running yarn build everything works fine.

I’ve had a look at this thread here - Compiled CSS doesn't work as it should in production

I’m using a different implementation of the mobile menu (using the old Bootstrap span element approach) - so I know it’s not related to that issue.

Any ideas on how I can go about debugging this?

I’m using Trellis/Bedrock/Sage locally and just deploying the theme folder with the edited view.php file as mentioned in my earlier post.


Update 1: I also noticed that after the production build, images loaded via css ("../images/foo.jpg") are then converted to src: url(/app/themes/mytheme/dist/font.eot) rather then src: url(/wp-content/themes/mytheme/dist/font.eot)

Is there a way to get it to change all instances of /app/ to /wp-content/ each time a yarn buid:production is run for example? I figured it would keep the relative urls the same rather then changing the ../ to /app/mytheme/.


Update: I found solutions to both of my issues, it appears I had “end of the day brain” at the time of posting this!

Solution 1: it was in fact the solution mentioned in the GitHub that fixed the issue (https://github.com/roots/sage/issues/2017) even though I’m not using that menu, you still need those variables in there.

Solution 2: I forgot to check my own notes, since my remote server doesn’t have bedrock it was simply a matter of running the below

 SAGE_DIST_PATH=/wp-content/themes/mytheme/dist/ yarn build:production

Many thanks.