{"id":19751,"date":"2014-04-04T18:01:59","date_gmt":"2014-04-04T10:01:59","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=19751"},"modified":"2025-04-04T00:06:25","modified_gmt":"2025-04-03T16:06:25","slug":"symlink-alias-folder","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/symlink-alias-folder\/","title":{"rendered":"Optimize Web Development with Symbolic Links and Apache Alias"},"content":{"rendered":"

Today, many web developers work remotely<\/strong>. We have access to numerous collaboration tools and file-sharing applications<\/a> like Dropbox<\/a>. However, a common issue arises when the web documents you save are not accessible through a localhost<\/code> address in your browser because they are outside the Apache Server DocumentRoot<\/code>.<\/p>\n

To resolve this, you could change the DocumentRoot<\/code> path to point to the Dropbox folder. Although this can be done easily in MAMP<\/a> using the GUI, you might need to switch the path<\/strong> frequently to access other websites stored in the original path<\/strong>, which is quite inefficient.<\/p>\n

A better option is to create a Symbolic Link (Symlink)<\/strong> and Apache Alias<\/strong>. These allow you to keep the original files in Dropbox while still accessing them through the localhost<\/code> address<\/strong> in your browser \u2013 just as if the folder were in the Apache DocumentRoot<\/code>. This post will guide you through the process.<\/p>\n

Symlink in macOS<\/h2>\n

In macOS and other UNIX-based operating systems like Ubuntu, you can create a Symlink using Terminal with the following command:<\/p>\n

\r\nln -s path\/to\/source path\/destination\/symlink\r\n<\/pre>\n
For example, if your website files are saved under the \u201cDropbox\/Sites\/project\u201d directory, use this command in Terminal to create a Symlink to that folder:<\/p>\n
\r\nln -s Dropbox\/Sites\/project ~\/Sites\/project\r\n<\/pre>\n
Be sure to adjust the destination path as needed. If you are using MAMP, you can set the path to Applications\/MAMP\/htdocs\/project<\/code> or \/Library\/WebServer\/Documents<\/code> if you are using the built-in Apache from macOS.<\/p>\n
A key difference between a Symlink and a Shortcut or Alias Folder is that a Symlink is treated like the original file. It can be accessed through Terminal<\/strong> and added to any GUI application<\/strong>. For instance, in Sublime Text, you can add the Symlink as a Project<\/strong> instead of the original source \u2013 something you cannot do with a Shortcut or Alias folder.<\/p>\n
Symlink in Windows<\/h2>\n
In Windows, you create a Symlink using the mklink<\/code> command:<\/p>\n
\r\nmklink \/d \"path\\destination\\symlink\" \"path\\to\\source\"\r\n<\/pre>\n
Open Command Prompt and enter this command to create a Symlink in the WAMPServer directory that points to the source in Dropbox:<\/p>\n
\r\nmklink \/d \"c:\\wamp\\www\\project\" \"c:\\Users\\thoriq\\project\"\r\n<\/pre>\n
\"Creating<\/figure>\n
Apache Alias in macOS<\/h2>\n
In addition to creating a Symlink, you can also use Apache Alias. Not to be confused with an Alias Folder, Apache Alias is a module in Apache for URL mapping that designates a specific path with an Alias. This allows you to access folders through the localhost<\/code> address as if they were stored inside the Apache DocumentRoot<\/code>.<\/p>\n
Before creating an Alias, ensure that the mod_alias<\/code> module is enabled. In Terminal, navigate to \/etc\/apache2<\/code> and open the httpd.conf<\/code> file. Remove the hash sign at the beginning of the following line:<\/p>\n
\r\nLoadModule alias_module libexec\/apache2\/mod_alias.so\r\n<\/pre>\n
Next, add the following line at the bottom of httpd.conf<\/code> to ensure that the folder and configuration files in it are recognized:<\/p>\n
\r\nInclude \/private\/etc\/apache2\/alias\/*.conf\r\n<\/pre>\n
In Terminal, type these commands to create the \u201calias\u201d folder and the \u201capp.conf\u201d file, where you will write the Alias configuration:<\/p>\n
\r\nsudo mkdir \/etc\/apache2\/alias\r\nsudo touch \/etc\/apache2\/alias\/app.conf\r\n<\/pre>\n
To open the app.conf<\/code> file in Sublime Text, use this command:<\/p>\n
\r\nsudo subl \/etc\/apache2\/alias\/app.conf\r\n<\/pre>\n
An Apache Alias is specified like this:<\/p>\n
\r\nAlias \/alias-name \"\/source\/of\/original\/folder\"\r\n<\/pre>\n
Here\u2019s a complete example that you can add to app.conf<\/code>:<\/p>\n
\r\nAlias \/app \"\/Users\/thoriq\/Dropbox\/app\"\r\n\r\n<Directory \"\/Users\/thoriq\/Dropbox\/app\">\r\n    Options Indexes FollowSymLinks MultiViews\r\n    AllowOverride all\r\n    Order allow,deny\r\n    Allow from all\r\n<\/Directory>\r\n<\/pre>\n
Save the file and restart Apache. With this configuration, you should be able to access the localhost\/app<\/code> address through your browser, even though the actual folder is in the Dropbox folder.<\/p>\n
Apache Alias in Windows<\/h2>\n
If you\u2019re using Windows and WAMPServer, you can easily create an Apache Alias. Start by clicking the WAMPServer icon in the taskbar and navigating to the \u201cApache\/Alias directories\/Add an alias\u201d menu.<\/p>\n
\"Creating<\/figure>\n
A window similar to the Windows Command Prompt will open. Enter the name of the alias. For example, if you name the alias \u201capp,\u201d it will be accessible at localhost\/app<\/code> in your browser. Press Enter<\/span> to confirm the alias name.<\/p>\n
\"Confirming<\/figure>\n
Next, specify the source of the alias, such as c:\/Users\/thoriq\/Dropbox\/Sites\/app<\/code>.<\/p>\n
\"Specifying<\/figure>\n
And that\u2019s it!<\/p>\n
Conclusion<\/h2>\n
This post has demonstrated how to create Symbolic Links and Apache Aliases, which are helpful for accessing and managing folders<\/strong> outside the Apache DocumentRoot<\/code>.<\/p>\n
Further Reference<\/h2>\n