Setting Up the Divi Development Environment on Windows 10 with XAMPP
The recent release of Divi 3.1 (the affectionately and appropriately named “Developer Version”) is a huge boon for those who create custom modules as a one-off white label kind of thing for clients, or those who create Divi extensions for the ever growing Divi marketplace. It creates a new Divi development environment that anyone can take advantage of. This update opens up Divi with a new API for developers that makes it easy to create custom modules that are compatible with Divi’s innovative and powerful Visual Builder.
Those of you who sell products in the marketplace can relate to support tickets that ask “Why doesn’t this module/plugin work in the Visual Builder?”
Here’s a typical response, regarding this question as it pertains to Image Intense that we at Superfly came up with:
- We’d like to, but at the moment it does not exist due to limitations/restrictions Elegant Themes has in place for 3rd party developers. However, we actually prefer the backend experience for Image Intense due to the amount of features and customization that’s possible within the plugin. At some point, Elegant Themes may decide to make this a little easier for developers to implement custom modules, until then, Image Intense is fully functional from the back end editor.
But now… you no longer have to give that kind of answer. The current question (or demand!) is now “Why isn’t this compatible with the Visual Builder? Divi 3.1 is released. It should already be compatible!!” And the answer is, “Hang on, we’re working on it!”
Did you, as a custom module developer, experience that “documentation desperation” I experienced? You spend several hours trying to interpret a page, then realize that the docs don’t really work on your particular local development platform. My feeling, despite the reference to Docker for Windows, is that the initial documentation was created by someone on a Mac platform. I give massive kudos for this “first launch” of documentation and Divi API reference – the team at ET has spent countless hours over the last almost 2 years getting this ready for us!
I have a Windows 10 Pro (Fall Creators Update) platform, and what I was reading just wasn’t working, even after two nights of trying things like WSL, Docker CE, and many other things. After about 12 hours working on that, I got rid of it all and went with my instinct – XAMPP. After 45 minutes, I had my Divi development environment along with the Create Divi Extension all set up!
Please note that this article will not provide a step-by-step for every single thing you need to do. It’s not prudent for me to do that in a single post. I’ll expect you to be able to do your due diligence regarding the documentation on each of the steps provided! I do, however, wish you the best of luck. And, if you’re still with me at this point, I’m sure you’ll do great!
Enough – Let’s Do This!
Alright then… here’s how we can set up a Divi development environment on a Windows 10 platform using XAMPP.
Why Divi Development Environment on Windows 10 with XAMPP?
- It’s free. And it “just works” (that is, very simple to use and works right off the bat) on Windows.
- It includes PHP (several version options) that WordPress uses, a database that WordPress uses (latest versions use MariaDB instead of MySQL), phpMyAdmin (database access), and FileZilla (FTP file transfer). It also includes Tomcat (a Java servelet app) and Mercury (an email app), but neither of which you will need for Divi local development.
- The other platforms you need for your Divi dev environment (Node.js and Yarn) automatically recognize your server install. More on this in a bit.
Step 0: Homework
Step 1: Install XAMPP
When you land on the XAMPP download page, you’ll be presented with version and platform options. You’ll notice that the XAMPP version corresponds with the PHP versions included. If you want to stay on top of the latest PHP version because you are a product developer concerned with future-proofing, then choose the latest version. If you are working for a client that has a hosting platform with a lower version of PHP, then choose that version.
For more info on installing XAMPP, visit the FAQ page.
Keep in mind that the XAMPP install process will ask you if you want to include a Bitnami option for installing WordPress (or other software). For the sake of speed, I opted into that. The only problem I found was that the password option offered during the Bitnami install process only allowed alphanumeric characters. You can, of course, change your password within your WP admin area. I chose not to consider this a concern since it’s a local dev environment.
When you have XAMPP installed, you should be able to launch the XAMPP Control panel.
Under the “Actions” column, you want to hit the “Start” buttons for both Apache (your local web server) and MySQL (which is actually probably MariaDB, but it doesn’t matter. Either way, it’s your WordPress database). At this point, you will have your web server, database and PHP running. For the sake of this article, nothing else matters. (For reference regarding FileZilla, I already have a copy of that on my install, so I chose not to include that as a part of the XAMPP setup. That’s why the ‘start’ button is grayed out.)
Once you have your local XAMPP server set up with WordPress (again, for the sake of keeping things short, I won’t go into every single step because there are already so many tutorials on this), you’ll want to install Divi as a WordPress theme on your local dev site.
This means that at this point, you should be able to type ‘localhost’ or ‘127.0.0.1’ into your browser and pull up your new local dev site. Depending on the configuration you specified, you might want to use something like ‘http://127.0.0.1/wordpress/’ to visit your local site.
If not, revisit the steps above. If you still don’t have it at this point, leave a comment at the end of this article if spending time on a Google doesn’t give an answer for you.
Please don’t go any further with this tutorial until you are sure you have a local dev site set up with WordPress and Divi that is actually working for you!
Step 2: Install Node.js
Step 2 and Step 3 are perhaps the easiest part of this process. If you got Step 1 done successfully, then there’s really nothing to do but install Node and Yarn. The install process for each magically recognizes that you already have a server and a website set up. No configuration needed.
So… Step 2: install Node.js
Just run through the setup and you’ll be fine. This is where React kicks in. Read the docs if you have any issues.
Step 3: Install Yarn
A kind of package dependency/library thingamajig that you won’t need to worry about so much. But, you’ll want this to keep things stupid easy to continue.
Step 4: Create your Divi Extension!
This next part is truly magic. Once you have Node.js and Yarn installed, you’ll see where the nerdgasm kicks in, and it’s the part to where you really marvel at what the dev team at Elegant Themes has done for us! They make it so simple with the awesome divi-extension package (and how Yarn is able to access it), it almost defies belief.
Find the /wp-content/plugins/ folder within your local WordPress install.
Hold down <Shift> while right-clicking on that /plugins/ folder. You should see an option for “Open PowerShell window here”. If not, here’s a tutorial (and sorry for all the stupid ads!)
At this point, you’ll be presented with a PowerShell window, very similar to the familiar command prompt. It will show the location as the folder you selected.
It’s gravy from this point on. If you scroll down to the “Create Divi Extension” section in the official ET docs page for this, you’ll see that you need to run this “command” within PowerShell:
npx create-divi-extension my-extension
Yeah, it’s that simple. Run it. You’ll see an incredible amount of activity that the ET dev team created for us. Then it will stop, and you’ll see something like this:
For each question in yellow, you’ll have a white “suggestion” (default) in parenthesis. It should all be pretty self-evident, especially if you are aware of the standard WordPress docs on plugin documentation.
Keep in mind that the plugin name will reflect what you specified above in your WP dashboard, but the folder name will still be ‘my-extension’.
After all that, you will receive a congratulatory message along with suggestions on commands you can run, as shown here:
Also, your Explorer window will show that you have a new plugin folder.
And the last, coolest thing… Your WordPress dashboard shows your new plugin as well.
At this point, you can now continue with the actual ET documentation on how to create a Divi Builder module. w00t!!