How To Use WPCloudDeploy Sites In Your Development Workflow

Most WordPress Theme & Plugin Developers use a local development environment for their work. In many instances tools such as LOCAL, XAMPP, VVV & DOCKER are used to make it easier to setup virtual environments to work on multiple projects.

There are many advantages to local development. For example:

• Results are faster to see after an edit because there is no ‘upload’ and browser refresh steps.
• You can work off-line – no internet connection is needed.

But there are some disadvantages:

• Even with tools such as LOCAL, XAMPP etc., it can be hard to get a local environment up and running with the configuration you want it, especially when managing multiple projects or environments.
• Moving a local environment to a remote / staging / production environment will often reveal coding errors that weren’t visible or testable locally especially when things like caching starts to get used.
• Sometimes, for simpler projects, it’s overkill to have an entire local dev environment.

In this article we’ll show you how to set up a development environment on Windows that:

• Uses the Windows Subsystem for Linux (WSL)
• Uses VS CODE as the editor for files inside WSL
• Syncs local edits with a WPCloudDeploy site on a remote server
• Does not require a full web server locally for testing – instead it users a remote WPCD site for testing

The advantages of this type of development workflow are:

1. You’re testing your work in an environment that is closer to production level including SSL, Object Caches, etc.
2. It can be easier to create test sites with the correct combination of PHP version, SSL, object caches etc. (compared to finagling local configurations)

The downsides are:

• A few additional seconds for files to be sent before you can view the results of your changes in the browser.
• Debugging requires a different mind-set.

With that all said, lets take a look at how to get this all configured.

1. Setup VS Code & WSL

Before you continue with this article, please make sure you read and follow the instructions in these two articles:

1. How to setup VS Code to edit files on remote servers: https://wpclouddeploy.com/how-to-use-vs-code-with-wpclouddeploy-wordpress-sites/
2. How to use multiple WSL instances for development: https://wpclouddeploy.com/how-to-use-multiple-wsl-instances-for-development

The second article is optional because you can certainly use a single WSL instance for all your projects. But we find that, over time, it’s easier to separate out projects (or groups of similar projects) into different WSL instances.

Regardless, by the time you get here you should have a good idea of how to use VS Code to connect to remote servers and edit files, how to use it download entire sites for local editing and how to launch VS Code from a WSL command prompt.

However, at this point, the files being downloaded and synced are on a Windows volume. Yet, a lot of WordPress development tools are used (and are BEST used) inside a Linux environment. Tools such as NPM and all the BLOCK developer packages and workflows are best setup and used inside WSL.

So, we need a way to sync WPCloudDeploy sites with project folders inside WSL. The next few sections of this article will help you set this up.

2. Make a Set of Working Folders Inside Your WSL Instance

These folders will contain a copy of the files on the remote WPCD site.

mkdir ~/wpcd-article-dev-flow

Change into the directory

cd ~/wpcd-article-dev-flow

Fire up VS Code

code .

3. Sync WSL Folder to WPCloudDeploy Remote Site

At this point the working folder should be opened in VS Code and it is assumed the VS CODE sFTP extension is installed (See https://wpclouddeploy.com/how-to-use-vs-code-with-wpclouddeploy-wordpress-sites/)

Lets configure VS CODE to point to the WPCloudDeploy Site:

• Add an sFTP User to the WPCloudDeploy site that will serve as your test site.
• Inside VS CODE Click Ctrl+Shift+P on Windows/Linux or Cmd+Shift+P on Mac to open the command palette.
• Type ‘sftp’ and select the SFTP: config command. This will open a simple JSON configuration file for the sFTP connection.
• Edit the connection information to add the user id and password for the sFTP credentials you added and save the JSON file.
• Click on the VS CODE sFTP icon (it’s likely the very last icon in the left-most bar and below the EXTENSIONS icon)
• At the top you should see a title that correspond to the connection name you added to the JSON configuration file – right-mouse-click on it and choose download folder.

You should probably be familiar with most of the instructions above since they’re the same ones covered in the articles we mentioned earlier. If the above instructions are followed correctly then a copy of the WPCD site should be downloaded into your WSL working folders (though it might take a while.)

4. Configure Automatic File Sync

The way things are now, if a file is changed you still have to manually tell VS CODE to upload the file back to the site.

The idea behavior though would be to have file changes automatically uploaded back to the remote WPCD site.

To do this, we need to modify the JSON configuration file for the sFTP VS CODE extension:

• Inside VS CODE Click Ctrl+Shift+P on Windows/Linux or Cmd+Shift+P on Mac to open command palette.
• Type ‘sftp; and select the SFTP: config command. This will open a simple JSON configuration file for the sFTP connection.
• Add the following lines to the configuration:

    "watcher": {
      "files": "**/*",
      "autoUpload": true,
      "autoDelete": true
    },
    "syncOption": {
        "delete": true
    }  

Those lines tell the VS CODE sFTP extension to monitor the filesystem and upload any changes to the remote WPCD site and to delete any extraneous files from it that does not exist in the local WSL folder.

When complete, your entire configuration file should look something like this:

{
    "name": "your-friendly-project-or-domain-name",
    "host": "159.223.110.125",
    "protocol": "sftp",
    "port": 22,
    "username": "your-wpcd-sftp-user-name",
    "remotePath": "/",
    "password": "your-wpcd-sftp-user-password",
    "uploadOnSave": false,
    "useTempFile": false,
    "openSsh": false,
    "watcher": {
      "files": "**/*",
      "autoUpload": true,
      "autoDelete": true
    },
    "syncOption": {
        "delete": true
    }    
}

Now, let’s add some files to the local WSL folders in the form of one of the demo BLOCK PLUGIN projects from the WordPress Block Developers Handbook.

---

5. Create a New Block Plugin Folder (In WSL)

Assuming you already have NVM & NODE.js installed (See Appendix at the end of this article for some guidelines on how to do that):

• Navigate to your working folder inside WSL – this is the folder that you ran the ‘code .’ command from earlier.
• Under there, navigate to the wp-content/plugins folder.
• Run the following:

npx @wordpress/create-block@latest todo-list

This will create a new plugin folder called ‘todo-list’ and a new plugin with the same name.

6. Startup The Background Build Server (In WSL)

Every you make a change to the block soure-code, you need to run a ‘build’ command to create the final block files.

npm run build

But if you do this every time you’ll spend a lot of time waiting around and/or typing the same command over-and-over again. Instead, you can set up a background process that detects file changes and automatically runs the build process.

• Open a new WINDOWS TERMINAL window for your WSL instance
• Navigate to the new TODO-LIST folder
• Run the following

npm start

7. Make A File Change

Open up any file (for example the EDIT.JS file) and make a simple change to it.

Upon saving the file, the background process should rebuild the files and the sync process should automatically upload all the changed files to the WPCD site.

If you look at the footer of VS CODE you should see the messages fly by that show the upload occurring.

If you look at the plugin or block on the WPCD site, you should see your changes reflected.

Wrapup

You might have noticed that, at no point, did we provide instructions for installing a web server, PHP, SSL or any other similar applications in your WSL instance. This is because all those applications now live on the WPCloudDeploy server and are already pre-configured to render the site you’re using for testing.

There is a lot to like about this type of hybrid local-remote development workflow:

• A LOT less load on the local machine
• The development site more closely resembles a production site
• It can sometimes be easier to setup a new development site vs trying to get multiple set up locally

However, this workflow isn’t for everyone. As with WPCloudDeploy itself, the majority of the users are likely to stick with the status-quo (local development). But some folks will get why this flow can be beneficial and even more efficient at times.

---

Notes

• The node_modules folder will get synced to the remote WPCD site. Since you’re developing this doesn’t matter as much. Though it will cause a delay the first time you sync the files since node_modules tend to be a very very large folder.
• While the instructions focused on WPCloudDeploy sites, they can be used with any site for which you have read-write sFTP credentials.

---

---

Appendix: Install Baseline Tools For Block Development (In WSL)

To create WordPress blocks you just need NVM and NODEJS. You might need composer as well depending on how complex your BLOCKS get.

NVM

NVM is a version manager for NODE.

Official Instructions

https://github.com/nvm-sh/nvm

TL;DR

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

---

Nodej.JS

Official Instructions

https://nodejs.org/en/learn

TL;DR

nvm install --lts

This installs the latest LONG TERM VERSION of NodeJS

Verify

node -v

This should output something like v20.10.0