Categories
WordPress

WordPress VIP Go Local Setup

In this post you’ll learn how to setup your local WordPress installation which exactly replicates your preview and production website on VIP Go hosting. Table of Contents What is WordPress VIP Go? How WordPress VIP Go works? Prerequisite Best Approach for Local Setup Virtual Machine (VVV Setup) Github Repo MU-Plugins Add vip-config.php File Replicate File […]

In this post you’ll learn how to setup your local WordPress installation which exactly replicates your preview and production website on VIP Go hosting.

Table of Contents

What is WordPress VIP Go?

WordPress VIP is the official hosting provider of WordPress by Automattic which is the company behind the world’s largest CMS WordPress. Automattic manages a lot of open source projects which majorly includes WordPress, WooCommerce, Gutenberg etc. Apart from these open source projects Automattic provides some paid services for premium support and VIP is one of them in which they host WordPress sites and provide support for it. The newest hosting offering from VIP is called VIP Go.

How WordPress VIP Go works?

After you purchase hosting from VIP they will setup a repository on Github from their own account and give you access to that repository. This repository have following branches:

  • master – for production
  • develop – for preview
  • preprod (optional) – for QA.

Developers works on develop branch and after verification of changes the code is deployed on master. Anything merged on these branches will be deployed to their respective environments instantly. There is also a code review step in which VIP Developer reviews our code which ensures security, coding standards, best practices etc. Visit docs on VIP Go environments for detailed info around this.

Now you have got some good understanding of VIP Go platform, let’s start to figure out how can you setup your local environment that serves you the best.

Prerequisite

  • Familiarity with command line tools.
  • SSH must be already setup on your user account.

Best Approach for Local Setup

During development it is considered best to match your local environment to preview and production environments so that you will not have to face problems due to deployments on different environments. Follow the following steps for replicating your production or preview environment to your local environment.

  1. Virtual Machine (VVV Setup)
  2. Github Repo
  3. MU-Plugins
  4. Add vip-config.php File
  5. Replicate File Permissions
  6. Verification

1. Virtual Machine (VVV Setup)

VIP recommends VVV (Varying Vagrant Vagrants) for setting up virtual machines which will replicate your server environment. I have written a detailed article on WordPress Setup Using VVV so follow that if your setup is not configured and then continue with this tutorial.

For making things easier to address in tutorial I am supposing that I have made a VVV setup with one custom site having site name vip, host vip.test and on location ~/vagrant-local which means that my WordPress files will resides in ~/vagrant-local/www/vip/public_html/

Note:

  • After VVV setup make a new user in WordPress with administrator rights. This user will help you to access the admin dashboard because after Step 3 login with username admin will be restricted.

2. Github Repo

As explained above that WordPress gives you access to the develop branch of Github repo so you will have to configure that branch in your VVV setup. For replicating / migrating WordPress there are only two important things one is your wp-content folder which contains themes, plugins, uploads etc and the other one is your database.

Develop branch on Github repo represents our wp-content folder of the hosted website. So, for replication you will have to replace the contents of your wp-content folder with the content on develop branch. For database replication you can put data manually for now but we will cover it separately in another post as this is currently not in the scope of this post. So let’s start with the replication of wp-content folder.

  • First step is to delete the currently existing folder which in my case is ~/vagrant-local/www/vip/public_html/wp_content
rm -r  ~/vagrant-local/www/vip/public_html/wp-content
  • Now clone your develop branch to that wp-content folder. The clone command is given below, please change this command according to your own needs.
git clone REPO_URL ~/vagrant-local/www/vip/public_html/wp-content

Note: If your repo requires authentication then SSH will be needed for cloning.

3. MU-Plugins

These are commonly known as must used plugins. By default VIP install these plugins automatically on production and preview environments. These plugins represents VIP specific plugins, dev specific plugins and the mostly used plugins on WordPress sites which everyone almost install and should install. You can found these plugins in vip-go-mu-plugins repository on Github.

These mu-plugins will not be a part of your repository because WordPress handles them separately. As you are replicating your hosted environments therefore you also need to setup these plugins locally. Clone the contents of mu-plugins repo inside wp-content/mu-plugins. Please change below command as per your own need.

git clone git@github.com:Automattic/vip-go-mu-plugins.git --recursive ~/vagrant-local/www/vip/public_html/wp-content/mu-plugins

Notes:

  • For cloning this repo you’ll have to set up an SSH key for your GitHub account
  • Periodically pull changes from this repository for updates. It is suggested to pull changes before the start of development on any given day and the commands for that are below. Change them as per your own need.
$ cd ~/vagrant-local/www/vip/public_html/wp-content/mu-plugins/
$ git pull origin master
$ git submodule update --init --recursive
  • Do not commit mu-plugins directory to your VIP Go site’s repository.

4. Add vip-config.php File

To declare constants in WordPress like API_KEY or something of that nature we normally declares it on wp-config.php file but in this case VIP is handling wp-config.php file which also contains info of database connections and salts so in this case for using constants VIP Go provide us vip-config.php file which is a part of your repository.

To configure this file add the following code to your wp-config.php file just above this line: /* That’s all, stop editing! Happy blogging. */

if ( file_exists( __DIR__ . '/wp-content/vip-config/vip-config.php' ) ) {
    require_once( __DIR__ . '/wp-content/vip-config/vip-config.php' );
}

Note:

There is no need to add database and salts related info in vip-config.php file as VIP Go handles this for you.

5. Replicate File Permissions

VIP Go environment only allows file uploading to tmps and uploads folder. The following constants should also be added in wp-config.php to replicate the file permission setup of VIP Go. This prevents plugins and themes from being uploaded or updated from WP-Admin matching the Go environment.

define( 'DISALLOW_FILE_EDIT', true );
define( 'DISALLOW_FILE_MODS', true );
define( 'AUTOMATIC_UPDATER_DISABLED', true );

6. Verification

Everything is fully configured and now your local environment exactly matches the other two environments so let’s just verify all of that.

  • Go to http://vvv.test and open the url of your site.
  • If you see a screen with message then no problem we will fix that soon. This issue occurred because we delete old themes while deleting wp-content folder and put new theme which is currently not activated.
  • Open WordPress admin dashboard.
    • Verify that VIP menu item is present on sidebar. This appears because we setup MU-Plugins in our local environment.
    • Now fix that screen message by activating your theme and confirm it by visiting your site front end.

Note: If your website is looking different than your hosting environment then it’s because of the difference in database. You can set that up manually for now and we will write an article on it’s automation soon.

Overview of Local Setup

Now let’s see which files are present in local setup. As a whole local setup is composed of all the files that we setup earlier but here we only discuss the files inside wp-content folder because those are the only one that we commit and work on. The files or folders that presents inside wp-content folder are:

  • .circleci – Optional – only present if continuous integration is setup through CircleCI
  • client-mu-plugins – for must used plugins declared by developers which will always remain active.
  • images – for favicon.ico and apple-touch-icon*.png images
  • languages – for translations
  • plugins – for plugins
  • private – for any files which must not be web accessible
  • themes – for themes
  • vip-config – for custom configuration changes

Conclusion

I hope that this article will give you a solid understanding of how WordPress VIP Go platform works and how to setup local environment which exactly replicate preview and production environments. Let me know in the comments if you need clarification in any part of the setup.

For more info on VIP Go visit it’s documentation.