A Web Server Running on Your Computer

If we’re not putting our website files on a server that’s out on the Internet that anyone can browse, does that mean we’re faking it somehow? No—we can install the exact same web server software on our own work computers as system administrators do for live production servers housed in data centers. That’s a one hundred percent match from our local development environment to final. The only way a critic could claim it’s not perfect is by arguing the final configurations are not strictly matching. That’s expected and, realistically, not important. What happens in production at scale simply doesn’t apply to a localhost setup for an artist, designer, and developer. Of course, it’s entirely possible to modify a personal setup over time, if that’s useful, but realize it probably won’t be.

Don’t think about prematurely optimizing your server configuration. Customer-facing web servers need to balance large-scale needs, security, performance, and reliability. Your local server doesn’t. You just want to critique, polish, validate quality, and test HTML and CSS. Performance tuning a web server is a master craft and worth discovering by interviewing your ops team one day over a tasty drink, but not worth investing your time in to start.

How Localhost Can Empower Designers

Server-side code is executed on a web server. It could be written in languages like Python, PHP, Ruby, or Java, to name a few. Client-side code is executed in a web browser, but the JavaScript, HTML, and CSS files are first sent from that same web server. Designers are writing this client-side code more often than ever before. Surely they will benefit from running their website code and art through their own web server as well.

I specifically suggest that the Apache web server is exactly what you need to integrate into your creative workflow.

The Apache HTTP (web) server is twenty years old, and for the bulk of its lifetime, it surely felt entirely inaccessible to artists and designers. There was absolutely no need to consider it regularly. If a website was up and running, then a web browser brought up a page and that was the extent of an artist’s involvement with anything server related. Thinking of installing it was complicated enough to not even bother mentioning. Setting up a web server is usually done automatically by your company’s web hosting company or is handled by your system operations teams and software engineers.

The past ten years have brought great advances in websites. As storage space increases, bandwidth costs decrease, and expectations rise. We’ve seen fantastic advances in websites. High-resolution imagery, highly interactive pages, and complex workflows have defined user experiences as intricate as any traditional desktop program. We might say Apache web server has come into the thoughts of technically minded artists and designers as their user interfaces have added rich detail.

I’ve found that startup culture is mixing artists and programmers by sitting them side by side in small, open offices. This is fantastic because it casually enables and encourages idea sharing throughout the day. Teammates of each expertise come to understand and appreciate the skills and talents of others. Empathy builds as they witness daily suffering through challenges. Opportunities for cross-training thrive in this style of environment. Artists and designers see tools that engineers have traditionally used, and now they want them.

Having a personal web server on your computer clearly offers a competitive advantage that you’ll immediately benefit from as soon as you adopt it. How much of an edge is it? How much better will it make you? It’s a range based on how deeply ingrained you make it in your workflow. How much you learn to configure it and realize it as a daily use tool will measure how much it amplifies your skills.

Future artists will do well having a web server installed on their individual work computer. It’s not a requirement yet, but designers bringing this productive tool into their daily workflow will possess its significant advantage.

Another good feature of the Apache web server is its “virtual hosts.” We’ll learn how to set them up in Chapter 4. For now, think of virtual hosts as a feature allowing the same computer to appear as many servers. There are some practical uses past saving the cost of server hardware. For example, every site you want to build source code for can be served up as its own URL. You’re familiar with http://localhost and http://127.0.0.1, but imagine having http://www.annaspellingwords.local and http://www.whatsbeforemobilefirst.local all accessible on your machine simultaneously. Every virtual site can be tweaked with many settings. Whatever it takes to get closer to the final user experience is worth using during site construction.

Getting closer to the user experience means celebrating the little successes and ensuring that others can see that work, too. We all know having a solid demo ready is key. If someone walks up behind us asking how things are going, will we have something running to show them? I always tell my team to be ready to demo at a moment’s notice. Virtual hosts are a good solution for that. When the website is looking fine, make a copy of it. Create a virtual host for it. Give it a name of http://something_demo.local and have it always available. No matter how screwy the development gets as you build a site up to awesomeness, that demo version is easily within reach. Let everyone know you have the project under control. Wielding this tool helps.

Quickly Turning Around Changes

Every creative individual struggles to realize their work by projecting their internal mental image of a thing out into a shared reality via a personal act of creation. Many supportive skills, talents, and tools help accelerate this process. One of the unspoken tools of creativity that I enjoy championing is the particular idea of “flow.”

We all know flow when we’re in it. It’s a unique mental state in which that internalized image of ideal creative form is completely present and all physical effort is in the service of making it real. By the end of the day, it seems work was effortless and time passed by without notice.

If building a website is the creative ideal we want to realize, how does the goal of building it pull you out of the flow? Testing it does. As we want to properly validate our work by putting it on a server and checking it with actual browsers, we have several blockers:

• Asking teammates if a shared test server is available and working properly
• Copying the files up to a server
• Reaching (or searching) for a handheld to view the latest work

Will having a web server installed on your local machine helps you stay in the flow? Unequivocally yes, and let’s dig deeper into how it helps you stay in the flow and more quickly turn around changes.

The key benefit to having a web server is that it’s all yours and patiently awaiting your needs. When it’s installed on your computer, there’s no sharing and no need to ask around to teammates if you can use it as with a shared testing server. Having files ready for testing means placing them where you tell your server to look. Configuring the server to pull files from your working folder makes testing even more immediate. It’s set to go every moment of the day without hesitation and without breaking you away from your creative work flow. It’s all yours, and you’re the only one it serves.

Dedicated testing staff benefit from this workflow as well. Ensuring quality alongside design invention is entirely possible. Quality assurance (QA) can surely have access to your code by pulling it from a common source-code repository. They can have their own web server to run the latest version. Even if they don’t run their own servers, they can work side by side with creative developers, discovering bugs and certainly pointing out problems quickly. It’s always cheaper to make changes as early as possible—and undeniably before glitches get out into public view. Changes aren’t only creative choices but functional as well. Does the thing you just made work properly? No? Figure out the problem, make a change, and try again.

Leading a creative team and wondering if having a web server is a valuable tool for them? Consider the answer is “yes” and make it your job to follow up with your team to ensure they put time into figuring out how to use it well. Leaders are always searching for ways to fine-tune team delivery. Fine-tune to what effect? Primarily, leaders want to reduce costs and time to market. Incorporating web servers on artist, designer, and developer personal computers is a concrete way to improve and reach that goal.

Don’t forget that it’s your job as a leader to make sure your team has the time to bring in this tool. Gaining experience with this new tooling means the team is getting more productive, delivering higher quality, and meeting customer needs. Those can be consumer-facing or client expectations. Trading off shorter time to delivery could mean increasing quality. Quality includes creative design polish but also functional “does it work?” evaluation.

Freedom! Escaping the Tyranny of Production Servers

Where would be a convenient place to test your work? Production! What are some solid reasons to choose a production server for testing?

• It knows how to serve up a website.
• It’s network connected for easy testing.
• Any device can reach it and see how the product looks.
• It’s an honest final representation.

Given all those great reasons production is fantastic, we’d never choose to load untested changes on production servers. It’d be insane!

• A CSS file could make all text the wrong color.
• A JavaScript file change could stop a button-click handler.
• A PNG image could double the time it takes for a page to load on mobile.
• We could crash our public-facing product in any number of ways—not cool.

It’s admirable to have an eager drive for ensuring our work is fit and working, but our challenge is keeping the production servers reliably up and fully functional. Dumping untested files there would not be helpful toward our primary goal. The fact that production is busy doing important stuff is reason enough to avoiding poking at it. If it crashed, we’d all be sorry.

Those warnings aside, we do need to test our work in as live an environment as possible. That way, when work is pushed to production, we’re sure it’s good to go. How do we get a safe test version of a live environment? By installing a web server on our personal work computer.

Ideally, we are writing the site’s files while we’re testing on a web server. Given this total control, more options open up to us for finding mistakes, quirks, and bugs. How do we test? Any way we like. For sure with desktop browsers. Firefox, Chrome, and Internet Explorer are all valid choices. More exciting is the potential for connecting mobile devices to your work computer and hitting the work in progress. That’s the awesome we want. Every device we can lay our hands on means one more satisfied customer when our stuff is live in production for all to see.

What types of bugs can we expect to see?

• Device specific: the hardware inside phones, tablets, and desktops is different.
• Platform specific: the Android and iOS operating systems are unique.
• Browser specific: Safari, Chrome, and Internet Explorer read code in their own ways.
• Connection type: real-world 3G is slow as compared to the office Wi-Fi.
• Regression: we broke something that was working.

Every test you run lets you gain confidence in your work. Every bug you find is one your audience will never see. Real-world testing with the web server is one of the most powerfully enabling tools that you can toss into your toolbox.

I’ve come to learn that moving faster is always better, especially when moving with confidence.

Is Apache Web Server Worth Learning?

In the near future, your peers might ask you why you’re learning the Apache web server. You might be asking yourself the same question. Sure, there are alternatives, but none approach its popularity. Look to the next chapter for a list of alternative web servers that you can discover. Please keep in mind that none are obviously better choices for your needs at this point.

Challenging assumptions is always a healthy attitude. For now, let’s look at a statistic published in a December 2014 survey published by Netcraft. It specifically measures the Apache web server’s popularity.

Once you’ve internalized and moved past the instruction provided in this book, you’ll find a huge active community using the Apache web server. Searching their archives and reaching out to them online and in local user group meetings, you’ll find detailed resources for answering your future questions. Rest assured that as you gain experience in applying Apache web server in your day-to-day workflow, you’ll become more valuable to your present and future teams, employers, and clients.