General Overview

Having started web development as a hobbyist more than a decade ago, the only thing I learned about testing how my site looked and functioned was to view the HTML files on the browser by itself. Adding CSS and Javascript in them would also work just by viewing them in your browser.

But what if you want to test your site if you plan on using, say, a PHP script, such as WordPress, or lesser-known hobby scripts like PHP Guestbook or Enthusiast? Obviously, because PHP (and plenty of others like Ruby) are server-side programming languages, they won’t work the same like with HTML, CSS, and Javascript just by viewing them from your web browser. You need some kind of a server environment of sorts to make these scripts work. And the solution to that?

For most hobbyists, the only way for them to test their sites to see how they would look or if they were working perfectly was to upload them to their servers and then edit the files, re-upload again, refresh the browser, edit the files, and then re-upload again and then refresh the browser and on and on and on. Sure, it’s fun to build sites, especially if they’re dynamic with the help of an awesome PHP script that would let you make your own customizations, but seriously? Really?

With this endless cycle going on and on, there are a few things that you would (most likely) have to go through:

• You get frustrated and tired that you may end up falling asleep, take a nap, and by the time you get up, you forget where you left off.
• Your browser starts getting stuffed with so much cache from too much refreshing after you upload and re-upload (edited) files over and over again that you would start to panic that all your changes may have become ineffective. Thing is, not everyone knows about browser caching in the first place, even though clearing the cache is a simple solution to this common problem.
• When you found something cool from someone else’s website and you start to use that same feature in your own project as part of your testing, you can get caught (either by that “someone else” or another person loyal to that someone else’s website you’ve “borrowed” their code snippet from) and then accuse you of “stealing” and then some unnecessary drama begins. (and yes, it has happened to many people)
• Something went wrong with your server or your PHP script that you’re using that’s already uploaded to the server. It’s a common occurrence when you recently upload that said PHP script, then you upload all your files and customizations integrated with that script, and then when a new version of that same script is released and you upgrade it, all of your hard work customizations suddenly messes up and you end up pulling all of your hair in frustration.
• Unless you put the words Under Construction on your main page, some visitors end up visiting your work-in-progress website, checks out a feature that’s not quite ready yet, nothing works for them, and they start emailing you/tweeting you with complaints saying that your site doesn’t work. In addition, not very many users would be fond of visiting a site when they see the words Under Construction in them.

With all of these occurrences that are bound to happen one way or the other, all of a sudden, building sites for fun isn’t really fun anymore.

But wait!

What if you can build and test your site, PHP scripts, and all, and view it right at the bat without doing any type of uploading to your server?  Yes, it’s possible!

In order for this to happen, you would need a special solution stack that would turn your computer into a real-live server. In that way, you can build, test, edit, and test all your sites and your PHP scripts without ever the need of uploading all of your stuff to your web server. You wouldn’t have to worry about making a quickie home page and slap the words Under Construction right in the center to let your users know that your site isn’t quite ready, but you’ll announce it to the world anyway. All you have to do is to download and install a solution stack, set it up on your computer, and you can start building your site in glory without any distractions.

Once your solution stack is installed and ready to go, you should give yourself a pat on your back. You have just converted your computer into a local web server, or the more informal local environment.

What the heck is a solution stack?

A solution stack, sometimes known as a software stack, is a bundle of software and components needed to create a particular platform that would aid you, as a developer, to build, test, and view all of your projects, whether if it’s a website or a web app or any type of software.

In the case of us web designers and developers, we would need a solution stack that would enable us to do the following without uploading anything to our web host server:

• HTML, CSS, and Javascript work just by viewing them in a browser. We need a solution stack that includes support for PHP (or any server-side programming language for that matter, but in this case, PHP).
• And, depending on the type of PHP script that we’re working on, we would also need a MySQL database (or others like Maria DB, SQLite, etc.) that would support our PHP script-powered site. WordPress is an obvious example, of course.

The next thing you would probably do right now after is to head off to Google and find a solution stack that would support the two bullet points mentioned. You won’t have to do that. That’s why you are reading this tutorial.

Meet the “AMP” Family!

The solution stack that we will be using to convert our computers into a local environment will have the three letters A-M-P in them:

• A is for Apache, the most popular web server (almost) every web hosting company uses.
• M is for MySQL, the most popular web server database for all dynamic websites. The M also stands for two other alternative databases: MariaDB and MongoDB. All of them work very well with…
• P is for PHP. You know, the “Personal Homepage” Hypertext Preprocessor that we all know and love (and sometimes loathe). Also, this P stands for Perl and Python, which are also server-side programming languages.

You can actually go to each of these sites, download their software, and install them individually to your computer. But then, most likely, you’d run into a lot of system problems that would make you panic. Plus, the P part of AMP may even require you to download Perl and Python support too.

You won’t have to do all of that. That’s why we need solution stacks to make this work.

We’ve got different types of AMP solution stacks to choose from, depending on the type of computer and operating system that you’re using. The best part of all is that (almost?) all AMP solution stacks are open source, therefore they’re free to download, and if you are a very hardcore programmer, you can even contribute to their software development and improvements too.

Pick your poison:

• LAMP (Linux, Apache, MySQL/MariaDB/MongoDB, and PHP/Perl/Python)
  For all Linux users, LAMP would be your choice of solution stack for your Linux-powered local environment. Depending on the type of operating system you’re using (Ubuntu, Debian GNU, etc.), you would have to look up some FAQs for your operating system on how to install LAMP into your system.
• XAMPP (Cross (X) Platform, Apache, MariaDB (used to be MySQL), PHP, Perl)
  XAMPP became the first alternative to LAMP for those using Windows and Mac OS. Before, the “M” stood for MySQL, but ever since then it was officially converted to MariaDB.
• WAMP (Windows, Apache, MySQL/MariaDB/MongoDB, and PHP/Perl/Python)
  Also known as WampServer, WAMP is a solution stack for those who use Microsoft Windows as their operating system. Also, WAMP is powered by Bitnami, in which you are able to download different types of web apps and software like you would with your cPanel and Fantastico or Softaculous. Sounds like the best solution stack to use so far, but keep on reading.
• MAMP (Mac, Apache, MySQL, and PHP/Python)
  Originally, MAMP was specifically made for Mac users. Today, MAMP became cross-platform and it also now supports Windows users too. Unlike the ones we’ve mentioned so far in the list, MAMP also supports Nginx, another type of web server like Apache. Because Perl is such an old (and outdated?) server-side language that this bundle doesn’t support it, unlike the previous three. They also have MAMP Pro, an upgrade of MAMP, in which you have the chance to download and test different web apps and software like Bitnami is to WAMP. The only thing is that you would have to pay for the Pro version. If you are lazy to go through that 5-minute install of WordPress on your own, you’d have to pay for the Pro version. It’s not too surprising for me because Macs for me cost an arm and a leg, and so…
• AMPPS (Apache, MySQL/MongoDB, PHP/Perl, Python, and Softaculous)
  Does your current web host provide cPanel and WHM (if you are a reseller), along with a little link called Softaculous, where you can just click and install any PHP-based script you could ever get your hands on, like WordPress, phpBB, and a whole lot more? Download and install this particular solution stack and your local environment would look exactly like your web host’s Softaculous. AMPPS was created by the same peeps who built Softaculous, which is why you finally get to have your own Softaculous right in your own computer. Like the rest of the stacks, AMPPS continues to improve in speed, performance, and everything else, and they continue to add more PHP (and MongoDB-powered) apps for you to download and play around with it without embarrassing yourself in the interwebs.

There are plenty more solution stacks out there, even the ones that may be suitable for your own specific needs (for example, you use Nginx server in your web host instead of Apache, so you go look for a stack that supports Nginx), however, the ones mentioned in the list above are the more well-known solution stacks to build your local environment.

If you are curious with the stack I use to build my sites, I use AMPPS. Lots of reviews state that AMPPS is the best alternative to the rest on that list, therefore I went ahead and chose AMPPS. I have been using AMPPS for 3 years now and I never went back, but don’t get me wrong. I actually tried the other three (WAMP, XAMPP, MAMP), but I love Softaculous so much that I decided to go for AMPPS.

But don’t jump the gun yet. Be sure to visit their websites, read all their features, and choose wisely according to your project needs. If you notice, if you like to code in Perl, you would want to choose a solution stack that supports Perl. If your current web host uses Nginx instead of Apache, you would choose a solution stack that supports Nginx. Does the project need Node.js support? You know Node.js is compatible to MongoDB, and you would choose the right solution stack that supports MongoDB. There are plenty of options that you can choose from. Just search for them.

Okay, so how do I start building and testing my sites using my new local environment?

1. Follow the instructions on how to install and set up your chosen solution stack. Be sure to visit their websites and read their documentations. It should be a breeze.
2. All of the solution stacks I’ve used so far (which is pretty much all of them on the list above except LAMP) all have a mini-console window, with a bunch of “On/Off” or “Start/Stop” buttons in there. When you double-click on the desktop icon of your solution stack, a mini-console window will pop up. Just simply turn it on. When you turn it on, you will see the status, reminding you which one of the components have been turned on. That “On/Start” button will quickly convert your computer into your web server.
3. You can now treat your computer as your web server and begin building and testing your projects. Be sure to read the documentation on how to do them. In AMPPS, if you are familiar with Softaculous in your web browser, AMPPS will simply be “another version” of Softaculous, so there shouldn’t be a problem starting to work on your project.
4. Keep working on your project using your local environment. Don’t bother uploading anything to your web server. If everything works in your local environment, then it would work on the web server.
5. When you are finished with your site, fine-tuned, and ready to go live, just simply upload the files you used in your local environment and set them up in your web browser like it’s your first time.
6. Voila! You’re ready to go!
7. If you’ve got a cool code snippet or a new plugin that you want to test, it’s a safer bet to use your local environment to test them on your existing “test” site. If it works, go upload it to the web server. Otherwise, don’t do anything reckless by uploading it and then something goes wrong.

Keep in mind that your local environment is NOT your actual web host server. Your local environment simply transforms your computer into your own web server for your site building and testing/troubleshooting of your projects. The finished product still needs to be uploaded to your actual web server (through FTP or any other means) for it to be live on the internet.

Darnit! My “AMP” console window won’t turn on!

There will be a few times where your AMP console won’t turn on. Or rather, the most common case I’ve got with this issue is that my Apache server won’t turn on.

The most common reason for this happening is that there may be other software and apps installed on your computer who are using the same port as your AMP console. Most common ones would be port 40 (for http) and port 443 (for https). Just search around for a list of software and apps that use these ports, and check to see if you have them.

In my case, the most common apps that I have installed that also uses those ports are Skype or any other messenger programs. I also had IIS (Internet Information Services), a Windows-only type of AMP solution stack that was created by Microsoft, installed in my system too. I had to install this for my Freelance WordPress class last year, only to learn that I can use any other AMP stack to create my local environment.

When you do find the apps that are using the same ports, simply turn them off. I made sure that I turned off my Skype and I also deleted IIS (I no longer use it anyway) before I turn on my AMP console. That usually solves the problem. Once my AMP console is on for all components (Apache, PHP, etc.), then I can turn Skype back on again.

Important Note! Please DO NOT install more than one solution stack on your computer. If you necessarily have to (for example, you need Nginx support and your AMP solution stack doesn’t support Nginx), be sure that your AMP solution stack is currently off and then turn on your other solution stack that supports the component you need. DO NOT try to turn on more than one solution stack at the same time or it’ll cause more problems a lot more complicated than you can imagine. On the other hand, either solution stack would let you anyway.

Conclusion

Thank you for taking the time to read about the local environment. Professional web designers and web developers have been using their own local environment as part of their design and development process for a variety of reasons:

• Development and production time period is a lot shorter, less distractions.
• To avoid everything I’ve mentioned in the General Overview section above in order to have lesser development/production period, leading to a lot lesser distractions.
• As a hobbyist, sometimes, it’s fun to try out different types of scripts using your local environment (especially if you are using AMPPS, which now has some 400+ different types of PHP scripts that you can explore and play around with). In that way, you’d avoid some headaches of seeing mistakes in your actual web server without testing them first.

Most likely, as a hobbyist with no intention of pursuing a career in web designing and development, this wouldn’t be a required step to your web building. But then again, re-read the General Overview section again and think before you decide to dismiss the local environment option. I still don’t have an actual web development career right now, and I am still working on it, but it’s also a good idea to start adding the local environment as part of your design and development process for experience and familiarity.

But what if you want critiques and reviews from other designers/developers and you don’t have anything available on the web to show them your progress?

Good question, and a simple answer also. It’s safe to say to just upload everything to a remote location within your domain/server (ex. domain.com/testsite), but again, you don’t want to go through the troubles listed in the General Overview (especially the “drama” part). That is why version control repository services like GitHub exist and are widely used by many web designers and developers alike.If you want feedback and help

If you want feedback and help from others, sign up for a GitHub account and push (upload) all your unfinished, imperfect code in there and hand your project’s GitHub URL to others for them to view. Those who will be reviewing also have a chance to edit your code through GitHub (they need to have their own GitHub account to do this also) or leave comments and reviews on what they see good and what they see that may not be right.

More information (and a mini-tutorial) on GitHub (and possibly other version control systems) next time!

Thank you very much for taking your time to read this mini-tutorial. I hope you may find this a lot helpful and convenient for your web designing and development process, hobbyist or professional. If you do decide to create your own local environment on your computer, you would find and be able to reap its special rewards for adding this to your process.

If you have anymore questions about the local environment or anything mentioned here, just give me a holler.