Local development is the practice of using your local machine to develop websites or web applications. Didn’t know you could do that? Sure you can. A web server is basically a big, powerful computer — and you can install software and similar that can help you turn your local computer into a place where you can develop websites.
When Not to Locally Develop
When you’re first starting out, it’s probably almost a good idea for you to avoid these things. If you’ve only written a few lines of HTML and CSS, you don’t need to install a local development environment. HTML, CSS, and JavaScript saved to your local computer will run in your browser without issue. It’s also easier to get up and running on cheap shared hosting, and while version control and local development tools can save you tons of time — if you’re just starting out, they’re generally not necessary.
If you’re past that, though — if you’ve started to play with a self-installed WordPress or a language like PHP, you will need to install something to run PHP and MySQL on your local computer. If you already have a working website (or sites), you’ll also benefit from a local development environment.
Local Development Environments
Working on a live server with live code via FTP, cowboy style, is how many start off. It’s an easy way to get going. If you’ve never written a line of code in your life, setting up a local development environment can be overwhelming. However, you’ll quickly learn working with a live version of your website is not ideal:
- Users can see the changes you’re making. This could confuse them or result in a loss of purchase.
- If you break your website while you’re working, it can result in downtime. Even a couple of minutes of downtime is generally unacceptable on even a moderately-trafficked website. It gets worse from there. Imagine if Facebook went down every time there was a change? No way — Facebook downtime makes news!
- You have to finish your work in one sitting if it leaves breaking changes — you can’t just leave a broken, live website up for three days over the weekend.
Local Development Benefits
- It’s much faster than development on a live server. Your computer doesn’t have to process requests over the Internet or transfer files: it’s all right there.
- You get to keep your changes private until you’re ready to release them, and you won’t break your live site by changing things.
- You get to work on your website even if you have no Internet connection, even if your host is in the middle of an outage.
- It enables the use of a lot of neat tools (e.g., automatic optimization of images/scripts, etc.) that will make your life a million times easier.
- There are career benefits, too. Local development is frequently encountered in professional environments. In a work environment experienced in web development, it should be relatively rare that you go onto a live server and touch the code there. It’s therefore pretty necessary that you are familiar with some of these local development workflows.
Local Development Drawbacks
Drawbacks are primarily as a result of added complexity, but these drawbacks can be mitigated later with automation and tools. It’s almost always worth it to pursue a local development environment.
- You will need to keep your production and development sites synced for the most part. This can be very painful without automatic tools to help you. Unfortunately, some of those tools are a few weeks of set-up and learning themselves. Don’t get overwhelmed and try to learn it all at once. An out-of-sync database is almost never going to kill you, and out-of-sync files* are okay while you get used to working locally.
- If your code isn’t on a portable laptop and you want to take it with you somewhere, you may need to put your it somewhere accessible on the Internet (e.g., privately on BitBucket) or you’ll need to virtually access the computer where your work is located. The latter may not always be possible and negates the “fast” benefit of local development. XAMPP does offer a portable installation, but you should be very careful about back-ups (which you should do anyway). It’s easy to lose physical devices, after all.
*That said, proceed cautiously: don’t stick a ton of files everywhere in a local installation of a live website unless you’re prepared to wipe the live website or you’re /cringe keeping a (very meticulous) manual list of edited files and folders.
Get Started with Local Development
I have a post explaining setting up a local development environment with XAMPP and common installation issues encountered.
However — there are many, many ways to set up local development environments, each of which will differ according to your needs. XAMPP may not be necessary if you’re not running a PHP/MySQL application. You may not need to install Ruby at all if you’re running on an Apple computer. If you’re setting up a Yeoman project, their built-in server may be sufficient for your applications. It seriously depends on what you want to do, and will be different every time.
Grunt/Gulp
Grunt and Gulp and similar tools are task runners. They basically perform automated tasks — things that would be tedious to do manually over and over again. For some simple examples:
- Developers generally don’t run every image through TinyPNG every time they save a .PNG for a large project. They’re using a plugin for a task runner that automatically crushes images. This is much more maintainable and faster than manually crushing the image each time.
- Rather than using SimpLESS to compile, developers may opt to use a compilation plugin.
Like the above answer, however — what you’ll install and what you do with a task runner it depends on what you want to do and what, exactly, you’re working with. If you aren’t working on a project that includes Sass, there’s no reason for you to include a Grunt plugin having anything to do with Sass.
There are almost 4,500 plugins listed on the Grunt website currently — do you think anyone has ever made a project that uses all the plugins? Do you think there’s a single individual out there who has installed every single one of these? I’m not sure there is, aside from maybe someone who really gets their jollies on testing stuff.
So — don’t fret about what you have to do with these things. They’re tools, and tools you are meant to shape to your particular project, workflow, and environment. It’s different each time and for each developer.
Version Control
Learn a version control system (VCS) such as Git (use it with Github or BitBucket for even more benefits).
The documentation is awesome and you can get started quickly. While just getting started is relatively easy, there is a lot to learn, and beyond learning in a single person workflow, there’s also team-oriented workflow to worry about. Don’t get discouraged and don’t worry too much about “doing it wrong” either because you’re learning. If you’re only working alone on git projects, you can ignore team-oriented stuff until you actually have to work on a team!
Even though version control is most useful on team projects, it’s also valuable on single-person projects. It can help you keep track of the changes you make, roll back mistakes, and deploy your websites more quickly — for a start.
Version control is almost a necessity if you’ll be working on a project with multiple other developers; many professional environments employ some form of version control for their projects. Familiarity with VCSs is usually a big plus on a resume.
A Note About Local Development
Sometimes when people realize they can develop locally on their home computer, they get to thinking they can avoid paying money for hosting services.
However, you won’t be able to locally develop and send your websites to other people over the Internet. While I have a section in the XAMPP post specifically detailing why XAMPP is unsuitable for production use, you run into problems when you try to use your local computer as a web server regardless of whether you’re using XAMPP or not.
Here is a list of drawbacks:
- Website Speed: Your website will be very, very, very slow. Your home internet isn’t meant for serving websites like that, nor is your home computer powerful enough to serve your site to many visitors — especially if you’ll be using that computer for other things.
- Network Security: If you are inexperienced in network security, you will not be able to secure your web server from your home network. This could open your devices up to maliciousness.
- Changing IPs: If your IP changes, which a lot of Internet Service Provider (ISPs) do occasionally, that’s another concern. Web servers have static IP addresses — static IP addresses are rarely the case for home Internet users. If you have to update your DNS every time your IP changes, you will experience downtime frequently.
- May Not Be ISP-Supported: In some instances serving a website from a home computer is against your Internet Service Provider’s (ISP) terms of service, and they might fine you, shut your account off, or — best case scenario — just block you from serving things from your home network to the internet (I’m pretty sure that’s the case, they just block the usual HTTP port, but it’d vary by ISP).
There are many concerns in setting up a home server. It is doable, of course — but it’s generally very involved, and at the end of all that effort and time (and money!) you may find yourself wishing you’d gone with traditional hosting anyway. If you want to pursue server management, including physical server management, that’s totally doable and an admirable pursuit — but physical server managment is a skill very far removed from web development, and you’ll be pretty hard-pressed to find a sane job that involves both at the technical, down-and-dirty level!
Technical management of servers, on the other hand, is a little closer to the development skill and can be achieved without the physical hardware of a web server sitting next to you. In the beginning, tools such as XAMPP help you get familiar with a basic Apache web server set-up. Beyond that, you can buy cloud VPS servers where you are expected to do all of the server set-up, maintanance, etc. This is a good way to get used to a web server in a production environment, though it can be pretty involved and is not suggested for professional projects if you’re just starting out.