What is a Dev Environment? (Your First Installation)

Hello, everyone. In this lesson, we will answer the question Where do we begin? So whenever I'm helping someone learn WordPress development, I always say that the first step, our first priority should be setting up a dev environment for ourselves so that we can work locally. Now, don't worry, I do not expect you to know what that means. In order to explain what that means, let's ask ourselves two new questions. What in the world is a dev environment and what does working locally mean? Let's start with a dev environment. The best way to explain what it is is to begin with its opposite, the opposite of a dev environment is your real website that the entire world can see. So in the past you might have purchased a domain name like your own dot com or dot org, and you might have also purchased a web hosting plan and used WordPress to create a website in the industry. We refer to that real website that the entire world can see. We refer to that as your live environment or your production environment. On the other hand, a dev or development environment is a separate copy of your website that is usually configured so that only the owner or developers of the website can see it. So a dev environment is a private, safe sandbox or playground to experiment in, and no one from the general public can see your Work in Progress website. So that's a dev environment. Now let's answer our other question, which is what does working locally mean? So local is the opposite of the cloud. Local refers to your personal physical computer. So for example, right now I want you to picture two things. Number one, your personal computer. And number two, a server that lives 1000 miles away from you. Now, the files that make up a website usually live on a server that a Web host company maintains. The Web host company leaves that server computer on 24 hours a day, seven days a week, so that people can access your website around the clock. And that means that WordPress and our websites usually live on a server, not on our personal computers. However, it is possible to install WordPress on our personal computers and that will allow us to create WordPress websites even when we don't have an internet connection. Now, granted, these won't be real websites because no one else can view them. It would be like saving a word processing file to the desktop of your computer. You're the only person in the world who can view that word processing file because it lives on your physical computer. But long story short, that process of working from your computer instead of connecting remotely to a server somewhere, that process is called working locally. Now, if we put these two things together, if we work locally within a dev environment, it creates the perfect conditions for coding custom websites because if we make a typo while coding, it won't be a big deal because no one will see the error messages except for us. Also, we won't need to constantly upload new files to a server because any time we save a file on our computer, our local private websites are just immediately instantly updated and then only when we're finished coding our website, only then do we push our files up to a real public web server for the whole world to see. Okay, so if we want to work locally, we need to install WordPress on our personal computers, but that's a bit trickier than it may sound. So here's a metaphor or an analogy for you. If we had a tree that we wanted to plant, we can't just throw that tree anywhere, right? We can't just throw the tree on cement and expect it to live and grow. A tree needs a particular environment. It needs an environment with soil, water and sunlight. Well, it's the same thing with WordPress. We can't just plant WordPress anywhere on our computer. WordPress needs an environment with the following three things. Number one, PHP, number two, Apache or Engine X and number three, my SQL or Maria DB. Now don't worry, I do not expect you to know what any of those things are, but for now, just know that our personal computers need to have these things in order for WordPress to run. Now, most computers do not come preinstalled with these things, so we need to go out and get them. But luckily. Really. These three things are completely free and there are lots of different tools out there that will automatically install all three of them for us. Right. So all of the tools listed on the screen right now, they are free and they all do the same thing. They give us the metaphorical soil, water and sunlight that WordPress needs in order to run on our computer. So we don't need all of these tools. We just need one of them. Now, if you've dabbled with WordPress development in the past, you might already have one of these tools installed on your computer. If that's the case, you can keep using it. You do not need to install another one, but if you're brand new, I don't want you to feel overwhelmed with all of these choices. So right now, why don't we install local by flywheel together, step by step? This is my favorite tool of the bunch and it's super easy to use. So in a new tab in your web browser search for local by flywheel. As of this recording, the official URL is local wp dot com. Then go ahead and click the big free download button and proceed to download the software. You might have to enter your first name or an email address or basic info, but the software is completely free. You will not have to pay even a penny. The download file is a decent size, so it might take a while to download. You might need to go grab a coffee while you wait. But once the download completes, jump into your computer's downloads folder and go ahead and begin installing the program. And this could take up to several minutes. So be patient when it completes. It should then give you this option to create a new site. Go ahead and click that. We need to give this new site a name just to follow along with the course. Why don't you name it? Fictional university. Let's click continue. We can go ahead and use the preferred default options. So continue again. And here you get to choose your username and password. Just choose something that you can remember and also enter your email address. Then go ahead and click Add site and this might take a few minutes to complete, but when it does, we now have our own local dev environment copy of WordPress up and running on our personal computer. So you can just click this view site button. If that's not available yet, you might just need to start your website up in the top right corner. But once it's up and running, just click view site. And here we have a brand new, completely fresh copy of WordPress up in the address bar. You can see that it gave us our own fake local dev domain. It basically told our computer that if we visit this domain instead of looking out onto the Internet, just look within our own personal computer. And this means that you are the only one in the world that can view your website. If you shared this domain with a friend or family member, they would not be able to see your website yet. Cool. So you've got your own private playground copy of WordPress that you can experiment with if you want to log in as the admin of the site up in the address bar at the end of this domain, just add slash WP Dash Admin Press Enter. Now here we see that the Google Chrome Web browser is confused and thought that I want it to search for this instead of visiting it as a domain to get around this. Up at the top we see this message. Did you mean to go to a fictional university local slash WP admin? So just click on that because yes, that's what we want it to do. Enter the username and password you chose just a moment or two ago. Cool. And here's your typical WordPress admin dashboard. Now let's pretend you've been working and experimenting for a while and you're done for the day to shut things down. Just jump back to the local by flywheel application. We can click stop site up in the top right corner and then you're free to close the program. Now let's imagine it's the next day and you're ready to start working on your WordPress site again. Just open up local by flywheel. It could take several minutes to load, but once it does, just click on your website that you created here. And then in the top right corner we just need to click start site. Cool. So now it's running again. So now back in your browser, you're free to use your website again. You might need to refresh and remember that if you forget this URL, you can always just click view site right here. Okay, now there's only one more super important thing that I need to tell you right now. Before we move on, I want to show you where on your computer, your new website files actually live. So right here where you see your website listed, if you right click on that, if you're on a mac, you can choose Reveal in Finder. If you're on windows, it will say show in folder or something similar. Basically, we're looking for the folder or directory where the website lives, so click on that option and that will show you the folder for the current website that you're working on. If you're wondering where this lives, it's inside your user accounts home directory. If you're on a mac within your home folder, you will now see a brand new folder named Local Sites, right? And that contains our projects. If you're on Windows, you will have a new folder named local sites within the base of your main user folder. So it would be sitting alongside your downloads folder. Now, before we bring this lesson to a close, I want to show you where the actual WordPress files themselves live. So within local sites within our project folder, dig into app and then public. And here we are. We are going to be spending a lot of time in this folder in this course. These are the system files that actually power WordPress. Perhaps the most important folder is named WP Content. If you look inside it, we see another folder named Themes and inside there is a folder for each theme that you have installed. Now in this course we are going to be creating our own brand new theme. So very shortly we will be setting up a new folder here and that's where we are going to do a lot of our work. Now at this point, give yourself a pat on the back because you've completed the first step towards becoming a WordPress developer. You now have a local dev environment, but remember that not everyone in this course is using this same local buy flywheel setup. So before we bring this lesson to a close, I just want to stress one thing to you, and that is that even if in future lessons, my screen doesn't look exactly like your screen, that's okay. And even if I'm working in a slightly different folder, like personally, in my case, my websites live on my desktop right in this lowercase local sites folder. That's not important. So just know that throughout the entire course, when you hear me say that, I want you to jump to your project folder or your WordPress folder or your theme folder. Just know that you are in the right spot for you. I just want you to open up your project, jump into it, then jump into app, then jump into public. This is really the only folder that you need to worry about throughout the entire course. I'm usually going to tell you things like, Now I want you to jump into WP content. Cool. Now that's going to bring this lesson to a close. And now that you've set up a local dev environment for yourself, we can really start learning how WordPress works. In our very next lesson, we are going to get our first taste of PHP, which is the language that powers the heart and soul of WordPress. This is going to be a lot of fun, so let's keep things rolling and I will see you then.