Symbolic Link and Apache Alias for Web Development

These days, there are many web developers working remotely. We can now find a plenty of collaboration tools and file-sharing applications such as Dropbox. However, one of the problems faced when is that web documents that you save will not be accessible through a localhost address from the browser, as they are outside the Apache Server DocumentRoot.

To solve this issue, you can change the DocumentRoot path to point to the Dropbox folder. But even though this can be done easily in MAMP with the GUI, you may need to change the path – back and forth – to access other websites that are saved in the initial path, which is highly inefficient.

An alternative option you can use is by creating a Symbolic Link (Symlink) and Apache Alias. These allow us to keep the original file in the Dropbox while still being able to access it through the localhost address in the browser – as if the actual folder is in Apache DocumentRoot. This is what we are going to look at in this post.

Recommended Reading: Setup PHP, Apache, And MySQL In Mac Without MAMP – Part II

Symlink in OS X

In OS X as well as the other UNIX-based OS, like Ubuntu, a Symlink is created through Terminal with the following command.

ln -s path/to/source path/destination/symlink

For instance, you have your website files saved under the “Dropbox/Sites/project” directory. In Terminal type the following command to put a Symlink to that folder.

ln -s Dropbox/Sites/project ~/Sites/project

Certainly, you need to change the destination path. If you are using MAMP you can set the path to Applications/MAMP/htdocs/project, or /Library/WebServer/Documents if you are using the built-in Apache from OS X.

One thing that distinguishes Symlink from Shortcut or the Alias Folder is that a Symlink will be treated like the original file. Symlink can be accessed through Terminal and can also be added to any GUI application. In SublimeText, for instance, you can add the Symlink, instead of the original source as a Project. We would not be able for doing so with a Shortcut and an Alias folder.

Symlink in Windows

In Windows, a Symlink is denoted with the mklink command as follows:

mklink /d "path\destination\symlink" "path\to\source"

Launch Command Prompt, type this command below to create a Symlink in WAMPServer directory that points to the source in Dropbox.

mklink /d "c:\wamp\www\project" "c:\Users\thoriq\project"

Apache Alias in OS X

Aside from creating a Symlink folder, we can also use Apache Alias. Not to be confused with an Alias Folder, Apache Alias is a module in Apache for URL mapping that denotse one particular path with an Alias. That way you can also access folders through the localhost address – as if it is stored inside the Apache DocumentRoot.

Before we can create one, ensure that the mod_alias module is loaded. From Terminal, navigate to /etc/apache2, and open the httpd.conf file. Remove the hash sign at the beginning of the following line:

LoadModule alias_module libexec/apache2/mod_alias.so

At the same time, add this line at the very bottom of httpd.conf, as we will create a dedicated folder, named “alias” to save all Apache Aliases, so that the folder as well as the configuration files in it are picked up.

Include /private/etc/apache2/alias/*.conf

Type the following two lines in Terminal to create the “alias” folder and “app.conf”, where we will write the Alias configuration.

sudo mkdir /etc/apache2/aliassudo touch /etc/apache/alias/app.conf

Type this command below to open the app.conf in SublimeText.

sudo subl /etc/apache/alias/app.conf

Apache Alias is specified this way:

Alias /alias-name "/source/of/original/folder"

Below is one complete example. You can add these in app.conf which we have created above.

Alias /app "/Users/thoriq/Dropbox/app"<Directory "/Users/thoriq/Dropbox/app"> Options Indexes FollowSymLinks MultiViews AllowOverride all Order allow,deny Allow from all</Directory>

Save the file and restart Apache. And given the above specification, you should be able to access localhost/app address through the browser even though the actual folder is in the Dropbox folder.

Apache Alias in Windows

If you are running on Windows and using WmpServer, you can create Apache Alias with ease. First, click WampServer icon in the taskbar and navigate to “Apache/Alias directories/Add an alias” menu.

A new window similar to Windows Command Prompt will pop up. In it, set the name of the alias. If you name the alias as “app”, for instance, it will later be accessible within localhost/app address in the browser. Press Enter to confirm the alias name.

Then, specify the source of the alias. For instance, c:/Users/thoriq/Dropbox/Sites/app.

We are done.

Conclusion

In this post, we have shown you how to create Symbolic Link and Apache Alias, which would be useful to access and manage folders outside the Apache DocumentRoot.

Further Reference

View the Original article

Koala App: A Cross-platform App for Modern Web Development

In the days of Netscape and Internet Explorer 6, most web developers only wrote web documents in plain HTML, CSS, and JavaScript. Today, we have plenty of utility tools to write those 3 web languages more efficiently, with LESS, Sass, CoffeeScript and Jade, just to name a few.

We can write codes in these new languages, then compile them in the standard form. The compiler takes place in Terminal, and is done through command lines. Alas, not everyone is comfortable working with command lines. It could be a hassle. Let’s check out Koala App, the application that lets us compile them via a nice GUI.

Getting Started

Koala is a free cross-platform application. So you can use it regardless of your Operating System (OS). It’s available for Windows, OS X, Ubuntu, and other Linux distributions. Download the installer package accordingly; .exe for Windows, .dmg for OSX, .deb for Ubuntu, and .tar.gz for Linux. Follow the installation instructions as per your OS, and launch the application.

Troubleshooting

However, if you are using Ubuntu 13.04 or 13.10, you will probably encounter a problem where the application cannot be launched and run; it just suddenly closes.

To solve the issue, you can do the following:

1. Download Udev library from this page; libudev0_i386 for Ubuntu with 32bit architecture or libudev0_amd64, if you are using Ubuntu 64bit.

2. Launch the .deb package that you have just downloaded. It will open the .deb in Ubuntu Software Center. Click the Install button.

Launch Terminal, and type navigate to /usr/lib directory with this command line:

cd /usr/lib

For Ubuntu 64bit, type the following command instead:

cd /usr/lib64

Lastly, type this command.

sudo ln -s libudev.so.1 libudev.so.0

You should now be able to run Koala App.

Using Koala

At the time of the writing, Koala App supports these languages: LESS, Sass, Compass, and CoffeeScipt. Assuming that you have created a folder containing project files that includs one of the mentioned languages, you can drag and drop the folder into the window application to add it as a “Koala Project”. It will list the supported files as follows:

Project Settings

In the Project Settings, we can customize the file output. Click on the gear icon at the sidebar of the application window. This opens an overlay dialog box, as shown. At the left hand side of the box, you can see a number of menus or panels to customize the application as well as the menu for each language that it supports.

For an example, let’s navigate to the LESS panel. In it, there are a number of options, as follows:

Source Map: Select this option to enable Source Map for easy debugging. When we inspect elements in the Browser, it refers to the generated CSS instead of the original source file. With the Source Map enabled, the Browser will be able to refer to the CSS-Preprocessor file – .sass or .less – as well as the actual line where the CSS is generated.

Line comments: Select it to print the CSS Comments in the output, showing the source line of the generated CSS.

Debug info: Enable this to show errors that occur.

Strict math: If it is enabled, every mathematical operation in LESS must be contained in parentheses to ensure accuracy in the operation output.

Strict units: When this option is enabled, every unit in mathematical operation should be equal. (10em/2px), for example, will return as an error.

Output style: There are two options for the output style: Normal and Compress. During development, it is better to set it to Normal for easier debugging. If you are about to launch the website, set it to Compress to make the output file size smaller.

Per-Project Settings

The previous Settings applies to all registered projects. We can also customize the Settings for per-project basis this way:

Right-click the project folder. Navigate to Project Settings > New Settings.

There are a number of options. Selecting “Default”, “for LESS”, and “for CoffeeScript” creates a project config file, koala-config.json whereas selecting "for Sass" or "for Compass" will create config.rb, the Sass and Compass config file.

These files are saved in the project root directory, and we need to edit them in a code editor to customize the Project Setting. Here is an example if you want to change the LESS output folder.

"mappings": [ {  "src": "build/less", "dest": "assets/css" }],

config.rb is a Ruby file to customize Sass and Compass. We’ve already discussed them as well as the configuration in our previous post series: Using Compass In Sass. You can read it to find out aboutconfig.rb in detail.

Final Thought

Koala App is packed with essential features. With it, you don’t need to bother with the hurdles in installing and configuring CSS-Preprocessors and CoffeeScript through command lines. I hope the developer will include more compilers for other languages such as Haml, Jade, and Stylus, and also create GUI for Per-project Setting. But, for those who only work with LESS, Sass and CoffeScript, Koala App is a decent and efficient application.

View the Original article