Login

Connecting A WP Environment to GitHub

Table of Contents

In this article, we will cover how to set up a WP Engine environment, GitHub Repository, Local and how to link the 3, along with the best practices for working locally with the WordPress database.

Video Tutorial #

Written Tutorial #

Creating the WP Engine Environments #

Follow the below steps to ensure WP Engine is fully setup with the website and it’s environments ready for connecting to GitHub.

  1. Login to WP Engine
  2. Go to “Sites”
  3. Click “+ Add site”
  4. Select “Copy or move an environment”
  5. Ensure “I will own it” is selected and click “Next”
  6. Ensure “Copy an environment” is selected
  7. Search for “Layers Theme” in the “Environment to copy” dropdown
  8. Select the latest backup from the “Backup to copy” dropdown and click “Next”
  9. Enter the company name for the “Name”
  10. Select “[DEV] Development” as the “Type”
  11. The name of the domain should now auto-populate, if it didn’t, enter the name of the company suffixed with “dev”
  12. Ensure “Smart Plugin Manager” is unticked and click “Add site”
  13. This should now create your website in WP Engine along with the DEV Environment, we now need to create the [STG] Staging and [PRD] Production Environments.
  14. Follow the below steps for both of them to ensure they’re created correctly:
    • Make sure you’re on the website you just created in WP Engine
    • Click “+ Add staging” or “+ Add production” You’ll need to add both regardless
    • Select “Start with a blank site” then click “Next”
    • Enter the company name as the domain name, adding “stg” as a suffix if creating the staging environment.
    • Click “Add Environment”

Creating the GitHub Repository #

Follow the below steps to ensure the GitHub Repository has been created from the correct template and has all the required repository secrets configured for auto-deployment to WP Engine.

  1. Login to GitHub
  2. From your Dashboard, click the dropdown icon on the left sidebar next to your profile, and select “Layers Studio”
  3. Then click “Browse organization’s repositories”
  4. Now click “New repository”
  5. In the “Repository template” dropdown select “Layers-Studio/layers-theme”
  6. Tick the “Include all branches” checkbox
  7. Enter the company name as the “Repository name”
  8. Ensure the repository is set to “Private”
  9. Click “Create repository”
  10. Once created open the repository and along the top bar click “Settings”
  11. Expand the “Secrets and variables” dropdown and select “Actions”
  12. Click “New repository secret”, and add the following secrets, click “Add secret” after populating each one:
    • Name: WPE_PRD_ENV
    • Secret: This should be the name of the PRD environment you made in WP Engine (THISPART.wpengine.com)
    • Name: WPE_STG_ENV
    • Secret: This should be the name of the STG environment you made in WP Engine (THISPART.wpengine.com)
    • Name: WPE_DEV_ENV
    • Secret: This should be the name of the DEV environment you made in WP Engine (THISPART.wpengine.com)
  13. The GitHub repository is now set up and ready for connecting to Local

Connecting Local and GitHub #

These next steps will outline how to get your local GitHub repository to work with the codebase you pull down and manage inside the Local application.

  1. Open the “Local” application on your computer
  2. From the left-hand menu select the “Connect” icon (Cloud with signal coming down)
  3. Search for the name of your website you just made in WP Engine
  4. Click “Pull to Local”
  5. Choose “Development” from the “Select environment” dropdown and click “Connect & pull site”

Whilst that is pulling we’re going to clone the GitHub repository ready for integrating with Local:

  1. Open the “GitHub Desktop” app
  2. Click the “Add” dropdown and select “Clone Repository…”
  3. In the “Filter your repositories” box search for the repository we just created
  4. Select the repository from the list
  5. IMPORTANT: In the “Local Path” box ensure that the repository is going to be created on your desktop and that it is cloned to a folder named “public”
    • Example: /Users/daniel-work/Desktop
  6. Click “Clone”

Hopefully, by now the website has pulled from WP Engine into Local if it has you’re ready for the next steps:

  1. Select the site in Local, and click “Go to site folder”. This should open a finder/file manager window
  2. Click into the “app” folder and then the “public” folder
  3. In another finder/file manager open the GitHub Repository we just created on our desktop in the “public” folder
  4. Now move the root contents of the Repository folder into the public folder in Local
    • This should include:
      • .gitignore (File)
      • .git (Folder)
      • .github (Folder)
  5. Now navigate to the “wp-content” folder in our Local site, and then into the “plugins” folder
  6. Delete all of the files out of the folder
  7. Now in our repository also navigate to the “wp-content” folder and then “plugins” and move all of the files out of our repository folder, into the plugins folder for our Local site
  8. Now navigate to the “wp-content” folder in our Local site, and then into the “themes” folder
  9. Delete all of the files out of the folder
  10. Now in our repository also navigate to the “wp-content” folder and then “themes” and move all of the files out of our repository folder, into the plugins folder for our Local site
  11. Your repository should now be empty bar an empty “themes” and “plugins” folder inside the “wp-content” folder
  12. Return to GitHub Desktop, it should now have a screen saying “Can’t find {repository name}”, click the button that says “Locate…”
  13. Now navigate through your files until you get to the public folder of your Local website and select it, this should return the GitHub window to how it was before allowing you to push and pull as you wish
  14. You can now delete the “public” folder from your Desktop as it’s no longer needed
  15. The last step is to push deployment to each of the branches to make sure they’re working and the files are sent to WP Engine, to do this make a simple change in any of the “layers” theme files such as adding a new line in to a file
  16. Once you’ve sent a push for each of the branches you can check to see if they worked or failed by viewing the “actions” tab of your repository
    • Login to GitHub
    • From your Dashboard, click the dropdown icon on the left sidebar next to your profile, and select “Layers Studio”
    • Then click “Browse organization’s repositories”
    • Search for your repository and select it
    • Along the top bar click “Actions”
    • Here you’ll be able to see if it worked (green light), or failed (red light) or is in progress still (orange light)
  17. That’s it, your local files are now linked to GitHub which is linked to WP Engine!

Working Locally With Databases #

This section is more of a guideline on what to do and what not to do when working locally with WordPress.

IF YOU ARE WORKING ALONE ON THE PROJECT: You can work entirely locally, this includes any database changes. In order to push the database to the environment in WP Engine do the following:

  1. In Local select the push icon in the bottom right (Cloud with up arrow)
  2. Select the environment you wish to push to from the dropdown menu
  3. Check the “Include database” checkbox
  4. Once the file list has loaded, uncheck all of the files so that the figures in the top right red “0”, “0” and “0mb” this means the only thing being pushed is the database
  5. Click “Push to WP Engine”

IF YOU ARE NOT WORKING ALONE ON THE PROJECT: You SHOULD NOT work locally for your database changes, any non file changes should occur in the environment in WP Engine.

Reference Links #

  • https://github.com/Layers-Studio/layers-theme
  • https://my.wpengine.com/bulk_sites#all
  • https://localwp.com/
What are your Feelings

Powered by BetterDocs