We launched the multi-tenant WordPress Marketplace! 🎉

How to Merge your Agency Sites, Automate, and Continuously Develop like a SaaS

roger@wpcs.io
Roger Rosweide, co-founder and CCO of WPCS.io, shows you how to merge your agency’s website portfolio in WPCS where each website has a different tech stack, automate your business with a storefront, and continuously develop your sites like a SaaS.

If you’re using software like ManageWP and MainWP, you already know that you can streamline your agency to a certain degree. But, you’re likely also aware that there’s a limit to how much you can “SaaS-ify” your agency. If you want to experience true scale, like the big website builders such as Shopify and Wix, you have to employ the same SaaS cloud architecture.

This webinar shows you what you need to do to benefit from it right away. You can use this platform to replace your current hosting and set yourself up for true SaaS-like scalability. You can use this alongside helpful software like ManageWP and MainWP or try it as-is.

This webinar consists of 3 parts:

Merging your Website Portfolio

Install the necessary software

First, we must install some additional software. Takes only a few minutes to install and is for free.

  1. LocalWP
  2. Visual Studio Code
  3. Node.js
  4. WP CLI

Configure LocalWP

Pushing a local WP installation to WPCS gives you 2 options. Push it as a:

  1. New Version (the development environment that hosts and influences your sites)
  2. New Tenant (your websites)

For the Version:

  • Merge your WP installs into a new WP install by copying the plugin, theme, and language folder inside of this new WP install in LocalWP.

For Tenants:

  • Any WordPress installation that you have that has the exact same plugins and themes as whatever you’re using as your Version (you need to keep functional parity with your version if you’re uploading different installations as tenants).

Sidenote: even though your tenants need to have the same plugins, themes, and language files as your version, your Version does not need to have the same files as your tenant. It can have more. This idea lends itself to having varying tenants within the same Version.

Configure a .env file in your local WP-installs with WPCS API keys

To make sure that WPCS knows which Product you want to send your local installations to, you need to connect it with LocalWP using API credentials from your Product.

Open the WP folder of your local installs in LocalWP and, using a visual editor such as Visual Code, make a file in the WP folder in “Public”, where also wp_config is and name it: .wpcs-cli.env

Then, add:

WPCS_DEFAULT_REGION=eu1-or-us1
WPCS_DEFAULT_API_KEY=your-api-key
WPCS_DEFAULT_API_SECRET=your-api-secret

After you’ve pasted the above, go to the WPCS Console, open up your Product and go to API keys. Click on the + button, give your API key a name and generate the key and secret.

You’re now setting up the API credentials in the .wpcs-cli.env by editing these lines:

  • Choose your region: eu1 or us1 (strike what you won’t use)
  • Replace the “your-api-key” line with the API key you’ve generated
  • Replace the “your-api-secret” line with the API secret

Now, save the visual editor and open the site shell of the wp install from the LocalWP dashboard.

Important note: make sure the WP install is active (that means "start" the site in LocalWP).

Opening up the site shell from LocalWP brings you into the terminal.

Inside the terminal, check if the CLI works:

  1. Check Node: node -v
  2. Check WP CLI: wp —version
  3. npx @wpcs.io/cli check

Deploy local WP install to WPCS

Now that you’re ready, use any of these commands to either create a Version or a Tenant.

Creating a Version from local:

  • npx @wpcs.io/cli local deploy --name [NAME]

Creating a Tenant from local:

To send a local installation to WPCS as a tenant we first need to turn it into a Snapshot that WPCS can receive:

  • npx @wpcs.io/cli local package

This will give you a path, that might look something like this:

  • /var/folders/w_/ht692v116vn8ckq7cv2phng40000gn/T/wpcs/jobs/export_241b0e48-71e7-4f3d-abef-e46e4b13963b.tgz

Next, you enter the command that will send this Snapshot to WPCS:

  • npx @wpcs.io/cli tenant create [NAME] --customSnapshotPath= [INSERT PATH]

The result would look something like this:

rogerrosweide@Rogers-MBP public % npx @wpcs.io/cli local package                                                                               
/var/folders/w_/ht692v116vn8ckq7cv2phng40000gn/T/wpcs/jobs/export_ae081c11-29a5-45b2-8066-97d1bb23d6ae.tgz
rogerrosweide@Rogers-MBP public % npx @wpcs.io/cli tenant create roger --customSnapshotPath=/var/folders/w_/ht692v116vn8ckq7cv2phng40000gn/T/wpcs/jobs/export_ae081c11-29a5-45b2-8066-97d1bb23d6ae.tgz
{
  id: 'd7ad9c4b-5775-43ed-8d78-c9dc6259490b',
  externalId: 'd7ad9c4b-5775-43ed-8d78-c9dc6259490b',
  baseDomain: 'roger-d7ad9c4b577543ed8d78c9dc6259490b.tenants.eu1.wpcs.io',
  uploadUrl: 'https://s3.eu-west-1.amazonaws.com/wpcs.eu1.custom-uploads/a2f3db9b-daf1-4030-970e-c4cd23127f0f/8e275543-2480-4747-9877-f6b170b97b92/101bcd41-ef8c-4c70-ba29-47efd07dad4a.tgz?X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEBMaCWV1LXdlc3QtMSJHMEUCIHSNLpRAGYwdO3QlXDDYBl1duYD9C8aDs%2FDsLPPiQUNQAiEAsb2%2FTWjHNsvkR%2BWo%2F0K4cnWCdhwSKCsSQae2QfRxzpAqnQIILBADGgw1ODc4NjQ4Mjk2NjUiDOr8SQiNg3VQXErDLyr6AcoM%2B1DepYRBA38rWNLVkhB81qA6QnMUKOOnkWUHDojM%2Fv8CnGL3daK6HKAhLkaFQ5XgAibEQzmD5YeHze8FovqQ1abhyhbZ%2BeTwSDwRhTmMmW32uV0Tx7%2FsI90BxTPRg%2FWhBNP2LSnOl6mE3FmPHoHXAo3zg6yCbvjqzaNUUV8j8IrP0vDlpqh4xEVX2vHQedeU8Y6yoZzw7maMB2etyvdwwjdU8Ev%2FGT8gnDJqhbKT7A%2FV69uwwQdLckZBjQVY3v72lqUgMhBHeWd0QEA2Z%2BZcUUhlS6fEh%2BTRC3n1ZuZGCO5v1l3Hk7y2rUl0B6olP5tJ34VlsjMoXBgw2qXBlQY6mgGpulk%2FkmzputAjTcnRjpS9WE5rqTcMV0Vof9655wq%2BWweAnKjLt4s1H9gecptVgXx4aWcJ%2BVZouajlFalWORtY2UAzaobVvcvyWGVUrpvNzTmHdt0EUZ%2BtLMPFEHdL1sknsIPPzT6p%2Bs4on%2BVZI8%2BoBE%2FLf96HrMtbH5P2HOdcrO13j7G0tvE1Jwc1DaaPBq%2FZgMYCZ8WVPHRp&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=ASIAYRX3ZN3QZBEPSZNG/20220620/eu-west-1/s3/aws4_request&X-Amz-Date=20220620T110529Z&X-Amz-SignedHeaders=host&X-Amz-Signature=cb1a95acf9d628da6d0c691f44f6d17946a09ee45b29300cc854d45da9723f6b'
}
rogerrosweide@Rogers-MBP public %

Additional commands:

  • npx @wpcs.io/cli tenant create [NAME] (if you want to create a tenant based on your current Production Version)
  • npx @wpcs.io/cli tenant list (if you have several Products, to check if you’re in the right product)
☝🏻 If at any stage you need help while using the WPCS CLI, just type “npx @wpcs.io/cli help” and explore from there. Have fun!

Automating with a Storefront

Create a new “Storefront” Product

Go back to the Product overview and create a new Product. You can call it whatever you want. For our purposes, we’ve called it Storefront. When the Product is ready, launch a new Version with the Storefront Snapshot.

Create a tenant

Don’t forget: your Versions only act as a development environment. So, even though you will only launch 1 website in this product, you need to create a Tenant from which you’ll trigger the automation. So, create a tenant inside your version and open the wp-admin.

WooCommerce + Uncanny Automator

For this automation, we’ll use WooCommerce and Uncanny Automator. If you’ve created your Version using the Storefront Snapshot, these are already installed. Make sure your Product in the WP-admin has the proper name you want to use and take note of the Product ID (we will need it when we create a groupName). Next, go back to the Agency Product where you want your tenant to be created and create a new API Key called “Storefront”.

Don’t forget the colon between your API Key and API Secret

Convert your API Key and Secret

Go to https://www.base64encode.org/ set the settings to “Encode” and then paste the API Key, insert a colon : and then the API Secret one after the other. Make sure there is no colon in the API Secret when you generate it, otherwise you have 2 (which Base64 finds confusing).

Insert the resulting string into Uncanny Automator

Go to Automator and:

  1. Paste the result from Base64Encode at the Value under Headers behind Basic
  2. Add a Pair. Name this “groupName” (watch the capital N) and then select Product ID

Then go back to Console and create a tenant Snapshot with the groupName corresponding to Product ID (it’s a number!)

Ready to automate! Seriously, it’s that easy. Try it out by “buying” something in the storefront. Of course, you can stylize, customize, and modify the storefront however you like. In any case, your automation now works 🙂

Continuously Develop with the Versioning System

Merge a new website into the “Version” wp-install in LocalWP

As before, merge your new WP installs into the WP install by opening the site folders and copying the plugin, theme, and language folder from your new site inside of your “Version” WP install in LocalWP.

Push “Version” install to WPCS as a new Version

When you’re ready, open up the site shell from LocalWP that brings you into the terminal and type the following commando:

  • npx @wpcs.io/cli local deploy --name [NAME]

Don’t forget to name your new Version progressively. Something like V2 will do. You are now creating a new Version that contains the functionality of all three websites that you’ve merged so far.

Push Tenants to WPCS under the new Version

Now, you want to push your local WP-install to WPCS under the new Version, the one that contains the same functionality.

As before, to send the local installation to WPCS as a tenant we first need to turn it into a Snapshot that WPCS can receive:

  • npx @wpcs.io/cli local package

This will give you a path, that might look something like this:

  • /var/folders/w_/ht692v116vn8ckq7cv2phng40000gn/T/wpcs/jobs/export_241b0e48-71e7-4f3d-abef-e46e4b13963b.tgz

Next, you enter the command that will send this Snapshot to WPCS:

  • npx @wpcs.io/cli tenant create [NAME] --customSnapshotPath= [INSERT PATH]

However, we need one last addition to this commando to make sure it’s created under the new Version: --versionId=

You find the version id by navigating into the Version overview and copying the last bit of the URL after the last /:

  • npx @wpcs.io/cli tenant create [NAME] --customSnapshotPath= [INSERT PATH] --versionId= [Version ID]

Move existing Tenants to the new Version

Now that you’ve pushed your local WP-install to the new version, you can move over your existing tenants from V1 to V2. The idea behind creating new versions is that you can always move tenants back to the old version if something doesn’t work. Just fix what’s wrong and move it back to the new version.

This is how you maintain a safe, scalable development process.

Good luck!

Build a low code SaaS today

Start a 30-day free trial – Cancel anytime

Plugin name

Author

Description

Merging your agency’s website portfolio in WPCS where each website has a different tech stack, automate your business with a storefront, and continuously develop your sites like a SaaS.

Code Snippet