Updated How to set up WooCommerce development environment (markdown)

How-to-set-up-WooCommerce-development-environment.md

@@ -5,9 +5,12 @@ This page will guide you through the process of setting up WooCommerce developme
 ## Table of Contents
 
 - [Pre-requisites](#pre-requisites)
-- [Configure a local WordPress instance](#configure-a-local-wordpress-instance)
+- [Configure a local WordPress instance with VVV](#configure-a-local-wordpress-instance-with-vvv)
+- [Configure a local WordPress instance with WP-ENV](#configure-a-local-wordpress-instance-with-wp-env)
 - [Clone WooCommerce repository](#clone-woocommerce-repository)
 - [Install dependencies and generate assets](#install-dependencies-and-generate-assets)
+- [Admin Interface Development](#admin-interface-development)
+- [Debugging](#debugging)
 - [IDE integrations](#ide-integrations)
 - [Additional resources](#additional-resources)
 
@@ -23,7 +26,7 @@ Before starting, make sure you have the following software installed and working
 4. Nx: Follow [instructions on nx.dev site](https://nx.dev/l/r/getting-started/nx-setup) to install the Node.js flavour of Nx.
 5. pnpm: Follow [instructions on pnpm.io site](https://pnpm.io/installation) to install pnpm.
 
-## Configure a local WordPress instance
+## Configure a local WordPress instance with VVV
 
 For this guide we will use [VVV](https://github.com/Varying-Vagrant-Vagrants/VVV), which is a local WordPress development environment built using Vagrant and VirtualBox, to run a local WordPress instance and install WooCommerce on top of it. But it is worth noting that it is possible to set up a WooCommerce development environment using several other stacks (docker, LAMP, etc). If you opt to use a solution other than VVV, you can skip to the next section. Keep in mind that you might need to make some small adjustments to the steps in the rest of this guide.
 
@@ -34,6 +37,107 @@ To configure our local WordPress instance, you will need to:
 3. Install and provision [VVV](https://varyingvagrantvagrants.org/docs/en-US/installation/)
 4. If everything worked as expected, you should have a WordPress installation running on the following URL: https://one.wordpress.test. This is the WP site that we will use to install WooCommerce.
 
+## Configure a local WordPress instance with wp-env
+
+### Prerequisites
+
+Please install WP-ENV before getting started. You can find more about WP-ENV on [here](https://github.com/WordPress/gutenberg/tree/master/packages/env).
+
+The following command installs WP-ENV globally.
+
+`pnpm -g i @wordpress/env`
+
+
+### Starting WP-ENV
+
+1. Navigate to the root of WooCommerce Admin source code.
+2. Start the docker container by running `wp-env start`
+
+You should see the following output
+
+```
+WordPress development site started at http://localhost:8888/
+WordPress test site started at http://localhost:8889/
+MySQL is listening on port 55003
+```
+
+The port # might be different depending on your `.wp-env.override.json` configuration.
+
+### Overriding the Default Configuration
+
+The default configuration comes with PHP 7.4, WooCommerce 5.0, and a few WordPress config values.
+
+You can create `.wp-env.override.json` file and override the default configuration values.
+
+You can find more about `.wp-env.override.json` configuration [here](https://github.com/WordPress/gutenberg/tree/master/packages/env#wp-envoverridejson).
+
+**Example: Overriding PHP version to 8.0**
+
+Create `.wp-env.override.json` in the root directory with the following content.
+
+
+```json
+{
+	"phpVersion": "8.0"
+}
+```
+
+**Exampe: Adding a locally installed plugin**
+
+Method 1 - Adding to the `plugins` array
+
+Open the default `.wp-env.json` and copy `plugins` array and paste it into the `.wp-env.override.json` and add your locally installed plugin. Copying the default `plugins` is needed as WP-ENV does not merge the values of the `plugins`.
+
+```json
+{
+	"plugins": [
+        "./plugins/woocommerce",
+        "../woocommerce-admin-test-helper",
+        "https://downloads.wordpress.org/plugin/wp-crontrol.1.10.0.zip"
+    ]
+}
+
+```
+
+Method 2 - Adding to the `mappings`
+
+This method is simpler, but the plugin does not get activated on startup. You need to manually activate it yourself on the first startup.
+
+```json
+{
+	"mappings": {
+    	"wp-content/plugins/wp-crontrol": "../woocommerce"
+    }
+}
+```
+
+### Accessing MariaDB
+
+The MariaDB port can change when you restart your container.
+
+You can get the current MariaDB port via running docker ps and inspecting the PORTS column allows you to determine which port MariaDB is currently using.
+
+1. Open your choice of MariaDB tool.
+2. Use the following values to access the MariaDB container.
+
+| Name | Value |
+|--------|-----|
+|  Host  | 127.0.0.1 |
+| Username | root |
+| Password | password |
+| Port | Port from the command |
+
+### How do I ssh into the container?
+
+Run the following command to ssh into the container
+`wp-env run wordpress /bin/bash`
+
+You can run a command in the container with the following syntax. You can find more about on the `run` command [here](https://github.com/WordPress/gutenberg/tree/master/packages/env#wp-env-run-container-command)
+
+Syntax:
+`wp-env run :container-type :linux-command`
+
+
 ## Clone WooCommerce repository
 
 To install WooCommerce on your WordPress installation, you need to decide whether you will clone the WooCommerce repository directly or your WooCommerce fork. If you plan to contribute to WooCommerce code base, it is recommended that you clone your fork. If needed, see [this GitHub document on how to create a fork](https://help.github.com/en/articles/fork-a-repo).
@@ -111,6 +215,52 @@ To trigger a one-time rebuild, run
 pnpm nx build woocommerce-legacy-assets
 ```
 
+## Admin Interface Development
+
+WooCommerce Admin is a dependency of WooCommerce, so when you build woocommerce via nx, it will automatically build the WooCommerce Admin.
+
+If you want to WooCommerce Admin independently, you can use these commands:
+
+-   `pnpm nx build woocommerce-admin` : Build a production version
+-   `pnpm nx dev woocommerce-admin` : Build a development version
+-   `pnpm nx start woocommerce-admin` : Build a development version, watch files (including packages/js/*) for changes
+-   `pnpm nx build-watch woocommerce-admin` : Build a development version, watch client files for changes
+-   `pnpm nx watch woocommerce-admin` : Watch client files for changes
+
+
+### Helper Scripts
+
+There are a number of helper scripts exposed via our `package.json` and `project.json` (below list is not exhaustive, you can view the [`package.json`](https://github.com/woocommerce/woocommerce/blob/trunk/plugins/woocommerce-admin/package.json) and [`project.json`](https://github.com/woocommerce/woocommerce/blob/trunk/plugins/woocommerce-admin/project.json) file directly to see all):
+
+ - `pnpm nx lint woocommerce-admin` : Run eslint over the javascript files and stylelint over scss files
+ - `pnpm nx test woocommerce-admin` : Run the JS test suite
+ - `pnpm run ts:check woocommerce-admin`: Runs the tsc check over typescript files.
+
+## Debugging
+
+### Using Xdebug in the wp-env environment
+
+Please refer to [WP-ENV official README](https://github.com/WordPress/gutenberg/tree/master/packages/env#using-xdebug) section for setting up Xdebug.
+
+### Debugging synced lookup information:
+
+To debug synced lookup information in the database, you can bypass the action scheduler and immediately sync order and customer information by using the `woocommerce_analytics_disable_action_scheduling` hook.
+
+```php
+add_filter( 'woocommerce_analytics_disable_action_scheduling', '__return_true' );
+```
+
+### Using `debug` package.
+
+Currently, the [debug package](https://github.com/visionmedia/debug) is utilized to provide additional debugging for various systems. This tool outputs additional debugging information in the browser console when it is activated.
+
+To activate, open up your browser console and add this:
+
+```js
+localStorage.setItem( 'debug', 'wc-admin:*' );
+```
+
+
 ## IDE integrations
 
 WooCommerce core has linting rules in place via pre-commit hooks to ensure code standards are used. Ensure you have installed NPM and Composer packages, so these are set up!