Using a BaseURL in Your Code

Each developer’s system is different. When setting up a codebase for deployment in different environments, it’s important to define your globals in such a way that they’re easily changed to work in each environment. My local development environment uses MAMP Pro with all of my sites in a ~/Sites folder on my Mac, organized by a series of parent folders.

My site’s configuration file lets me define a unique set of details based on my environment, whether it’s a subfolder on my localhost, a dev site subfolder on the remote host or the live site itself. These unique values might be database connection credentials, paths to server files, or settings on whether or not to show debug output or send emails.

Here’s an example of a conditional that sets some constants for when I’m working locally on my primary computer. The DOCUMENT_ROOT is the path to a secondary volume on my mac called “Data”, which I know is unique for my own environment.

if($_SERVER['DOCUMENT_ROOT'] == '/Volumes/Data/Sites'{
    define('ROOTPATH', '/folder/domain.com/'); 
    define('ROOTURL', 'http://localhost/folder/domain.com/'); 
} 

The code can use this snippet to determine what ROOTPATH and ROOTURL to use when it’s running on my local machine. Some other developers use ABSPATH or ABSURL (ie: absolute path, etc). That ROOTPATH and ROOTURL can then be used in my code to ensure things like links, images, and other urls are all pointing to the right stuff. When building out my code, all I have to is make sure I include those values when referencing site assets, like in this example image tag:

<img src="<?=ROOTPATH?>images/logo.png" alt="My Logo" /> 

If I pass my codebase off to another developer, all they need to do is update the configuration file with their own environment details, paths and other settings that might be applicable. Good code setup means you can easily change something once, in just one place, and that update is reflected throughout the site.

Never assume a site path is in the root of the domain.

In the code blocks above, note that I use a ROOTPATH and a ROOTURL variable, which have different values. For any site elements like images that are pulled from the same domain as the website, I use an absolute path minus the parent domain. This way, the assets don’t require looking at the full domain path to download the file, a minimal, but handy page load benefit.

CMS systems like WordPress have something similar, though their Site URL values are hard coded in database content. This means that if you assign an image to a post, that reference to the image is a full URL, http:// and all, to the image asset. There are scripts out there that will search and replace one URL string to another, however this adds an extra step when moving a site between environments.

If you plan your code right, other developers should have an easy time setting your codebase up on any supported environment. Server paths differ per environment, so it’s best to plan for the inevitable and make it easily updatable.