Setting Up the Divi Development Environment on Windows 10 with XAMPP

by

Image Intense title on hover

Background

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!

So:

Divi Development Windows 10 with XAMPP, PowerShell, Yarn, PHP, Node.js

Divi Development Windows 10 with XAMPP, PowerShell, Yarn, PHP, Node.js

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

Be familiar with the current Divi development setup documentation page.  Run through it, see what you get. Be aware of the caveat presented: “This tutorial series is intended for advanced users. At least a basic understanding of coding in PHP and JavaScript is required.” And rightly so. But, it might also as well mention that you need to be familiar with setting up a local development environment.

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.

Divi development XAMMP options

Divi development XAMPP options

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.

Install it here.

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.

As I stated before, this this article is based on the fact that you have a Windows 10 platform.  With Win 10 comes a simple CLI called PowerShell. It’s like the command prompt on steroids.

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:

Divi Development Windows and XAMPP

Setting Up the Divi Development Environment on Windows 10 with XAMPP

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!!

6 Comments

  1. Nils

    If I’m using a MacBook with macOS, can I use the Mac version of XAMPP and also follow your tutorial?

    Reply
    • Terry Hale

      Nils, thanks so much for your great question!

      Honestly, I’m not sure that this whole tutorial is appropriate for a macOS audience. And in fact, I have pretty much zero experience with a Mac environment.

      I’ll make some assumptions here:

      1) MAMPP is probably going to give you the same thing as XAMPP, so most likely no worries there.

      2) I honestly don’t know what the equivalent of PowerShell is for Mac. Mac is more Linux based, unlike Windows, so I’m going to assume ‘bash’. You might take a look here for that: https://www.quora.com/What-are-the-alternatives-for-PowerShell-in-Mac

      3) You will also want to make sure that you have Mac versions of Node.js and Yarn available.

      That’s really all I have haha. I hope you get it worked out, and if so, that you won’t mind sharing your experience here when you are done. 🙂

      Reply
      • Nils

        Thanks Terry for the quick answer. I will look into it in the next days and come back to report my findings 🙂 !

        PS: On Google Chrome on my Mac the text of the comment response button has the same color as the whole button, so I can’t see the text.

        Reply
        • Terry Hale

          Nils, thanks again for such great feedback. The “Reply” buttons didn’t look right because I did not use the Divi Builder for this post. How funny is that? I’m a developer, not a designer haha!

          I’ve updated the post to where it looks Superfly. 🙂 I really appreciate the feedback. Please be sure to let us know how things are going with your projects!

          Reply
  2. Alain

    It would be great if you gave a follow up to your article. Indeed, I doubt for the moment, putting breaking teeth on it, that you arrive at the end of the delivery process (zip) without trouble. If you do, thank you in advance.

    Reply
    • Terry Hale

      Hi Alain, thanks for the great feedback! The Divi Developer’s edition was not a magic wand, but it was a step in the right direction. We are continuing to work on our custom modules to make them compatible. I will make sure to provide tutorials along the way.

      Reply

Trackbacks/Pingbacks

  1. Divi 3.1 – The New Divi Developer API - Phire Base - […] Setting Up the Divi Development Environment on Windows 10 with XAMPP […]

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.