Spinning Up a WordPress Local Environment with 10up WP-Scaffold and @wordpress/env

While researching starter themes for WordPress Block-based Themes, I came across the 10up wp-scaffold. I decided to try spinning up an environment using the @wordpress/env tool (which I have not done before). Even though 10up provided instructions for installation, I still ran into some issues due to not being familiar with how wp-env works. Below are the steps I took to get this successfully up and running.

Resources

• 10up wp-scaffold repo
• Guides for using wp-env:
  • Get started with wp-env
  • @wordpress/env documentation

Prerequisites/Set up

1. Make sure these are installed on your machine:
   1. Node & npm
   2. Docker
   3. Git
2. A Github account, with your machine’s ssh key added to your account.
   • How to add your ssh key to your github account..
3. Once Docker is running, install the wp-env package globally
   1. Using terminal, run:
      • npm -g i @wordpress/env

Steps for spinning up the 10up wp-scaffold

1. Create a project folder on your machine and add a wp-content folder inside
2. Using terminal, cd into /wp-content
3. Within /wp-content, run:
   • npx 10up-toolkit project init
     Note: I ran into some issues with my node and npm versions, I ended up switching Node to version 20 and npm to version 10.
4. Answer the following prompts:
   1. Create a project name: {what ever you want}
   2. Project template: Standard WP
   3. CI type: None
5. cd into themes/wpscaffold10up-block-theme 
6. In the theme folder /wpscaffold10up-block-theme, run:
   • composer install
7. In the theme folder /wpscaffold10up-block-theme, run:
   • wp-env start
8. Once the Docker environment is set up, login to the WordPress admin and activate the “WpScaffold10up Block Theme”
   1. Login: http://localhost:8888/wp-admin
   2. Un: admin
   3. Pw: password

To edit the theme files:

1. Download /node_modules folder: cd into the theme folder and run:
   • npm install
   • Note: You might need to install husky separately
     1. Run: npm install husky --save-dev
     2. Again, run: npm install
2. Run npm start to start watching for changes
3. Note: if you run into issues during npm install or start, you might need to change your node and npm versions (I was successful when I used node v20 and npm v10)