Gripes, this is Confusing!

When I first started developing, I felt really confused about best practices in setting up environments.

First, a word of encouragement: it’s okay to feel overwhelmed and confused. That’s why I’m making this series! I want you to feel free to acknowledge your frustrations and find a path forward. You don’t have to stay stuck.

A Common Development Workflow

Your development workflow will depend largely on the project and team you’re working with. When developing sites for small and medium size organizations, I find the following workflow to work best for me:

Local environment
Staging environment
Production Environment

What are Environments?

Environments are basically copies of your codebase on different machines. Your local environment lives on your personal computer, the staging environment on a staging server, and the production environment on the production server (where the final website or app will be accessed).

Local Environment

A local environment is basically your personal playground and your client will typically not see it. Having a local environment allows you to streamline your version control and speed up the overall development process. In a local environment, you don’t need to remotely access a server and wait for file transfers. All changes are live and alive!

Environment Challenges

The particulars of your local environment will vary widely depending on the technologies you are using. If you are building a React application, for example, you’ll need a local Node server to process the .jsx files. For PHP builds, setting up a local environment can be even more complex.

How to Create a Local WordPress Environment

In theory, you could individually install all the technologies needed to run a full fledge WordPress environment on your local machine. That would mean setting up the following pieces:

A server (Apache and NGINX are common choices)
A MySQL database
PHP support (along with WordPress dependencies like ImageMagick)
Name server support (if localhost:[PORT-NUMBER] is causing CORS issues with external APIs)
WordPress command line interface (CLI)

Other Options

Unfortunately, this manual procedure is both complex and highly inflexible. To solve this problem, some developers use all-in-one software like MAMP, XAMPP, and DesktopServer that bundle the pieces you need in one package.

Those a great solutions, but still aren’t the best when it comes making environments portable (such as when you are working with a team, or when trying to migrate a site to the production server).

Other developers use Docker, which is a fabulous choice for speed, flexibility, and portability. Still, like the manual procedure outlined above and the software options just mentioned, Docker can be difficult to set up when you’re first starting out.

Local to the Rescue!

This is where Local comes in to save the day!

Local is an Electron desktop application that does the heavy lifting of setting up a local and portable WordPress environment for you. You don’t need to worry about creating NGINX servers or setting up SSL—it’s all done for you. (And, fun fact, Local uses Docker behind the scenes).

Install Local

Getting started with Local is very easy. Below are instructions for setting up on a Mac, but Windows will be similar. Also, I am specifically using Version 6.3.0+5756.

Create an Account and Download Local

Create a free Local account.
Once you’re in your Local online dashboard, click “Download the latest version” at the top of your screen. You can also follow Local’s instructions based on your operating system.

Set Your Preferences

I like to keep all my WordPress environments together. By default, Local will store them at the root of your user’s directory in a Local Sites folder (~/Local Sites/). Follow the instructions below to change the default directory.

Open Local in your applications folder.
In your toolbar at the top of the screen, go to Local > Preferences....
In the NEW SITE DEFAULTS menu, click BROWSE next to Sites Path. I like to set my default site path to a WordPress folder in my Documents directory (~/Documents/WordPress/).
Click APPLY and then exit from the Preferences window.

Create Your First Site

At this point, you could connect to Flywheel or WPEngine to create a local > staging > production workflow. But, to keep things simple, we’ll focus here on creating your first site in Local.

Click the green plus button to add a new site.
Enter your site’s name (e.g., My Awesome First Site) and press CONTINUE.
Selected Preferred environment and press CONTINUE.
Enter your WordPress Username, WordPress Password, and WordPress Email.
Click ADD SITE. On the right side of your screen, you’ll see your new site. Congrats!
Enter your computer’s password when prompted by Local. (This is for the software to modify your /etc/hosts file with your new local site domain.)
Click the TRUST button in the SSL field, and enter your computer’s password again when prompted by Local. (This is for the software to add an SSL certificate in your Keychain.)
Click OPEN SITE to view your new local site, or ADMIN to login and start building!
When you are finished for the day, make sure to click STOP SITE at the top right side of your Local panel. Then, when you are ready to start again, hit START SITE in the same location.

Troubleshooting

On both of my MacBooks (one Intel and one M1), I often get an error message that says: “Heads-up! We ran into an issue trusting the Local SSL certificate.” That’s usually an easy fix by going into your Keychain Access and modifying the permissions on the SSL certificate. Local has documented the process incredibly well.

What Now?

High-five, friend! You did it! You officially have your first local environment set up with Local (try saying that five times fast).

From here, I encourage you to play around with the Local settings to get comfortable with using the software. I’d also encourage you to take a peek around the folder Local created for your new site.

In our next tutorials, I’ll help you get set up with a Git workflow, creating a child theme, and lots of other fun WordPress development tasks. Until then, stay creative and grab a banana for good exercise results.