Name Based Virtual Hosting with Apache and the Proxy Setting in the sc-config file

If you’re like me, you probably work on many web based projects at once. I use the same host, Apache server and Apache configuration files for all my work by using Apache’s name based virtual hosting . So to access your database via your chosen backend scripting language you will need to either set up a reverse proxy (ProxyPass and ProxyPassReverse directives) or make use of SproutCore’s proxy (need a link for this) setting in the sc-config file. I’m going to show you the later. For details on setting up a revers proxy see the Mixing the Build Tools with Your Backend Server section in the About the SproutCore Build Tools wiki article. In this article I’m going to walk through an example of:

1. Setting up a name based virtual host in Apache for a host called sample.com The host will be accessed on port 8888 as http://sample.com:8888
2. Adding an entry into your hosts file for sample.com
3. Editing the sc-config file to add proxy configuration setting.
4. Modifying your JavaScript files to use the proxy
5. Accessing the web site via the proxy

Additionally this example uses an SproutCore application called cook_book and a Model called recipe. Backend scripts will be stored in the rest_cook_book directory under the web server’s root.

Apache configuration

In your apache httpd.conf file, turn on name based virtual hosting with the following:

NameVirtualHost *:8888

Then for the desired virtual host set up something similar to this (your paths and port will be different), the important line is ‘ServerName sample.com’ this tell apache when http://sample.com is used to use the setting for this virtual host.

<VirtualHost *:8888> 
        ServerName sample.com 
        DocumentRoot "/Applications/MAMP/sc-samples" 
        CustomLog /Applications/MAMP/logs/apache_access_log_sample_com 
combinedless 
        ErrorLog /Applications/MAMP/logs/apache_error_log_sample_com 
        <Directory "/Applications/MAMP/sc-samples"> 
                Options Indexes Includes FollowSymLinks 
                AllowOverride All 
                Order allow,deny 
                Allow from all 
        </Directory> 
</VirtualHost> 

Modify the hosts file

Make sure to add a line to your /etc/hosts file:

127.0.0.1 sample.com 

Editing the sc-config file

Then is your SproutCore project directory edit the sc-config file and add the following, make sure you have the leading slash ’/’ on the directory…

proxy '/rest_cook_book', :to => 'sample.com:8888' 

Modifying your JavaScript files to use the proxy

Set the resourceURL property in your Model’s .js file. Note that we’ve departed from the usual practice of not including a leading slash and have added one.

resourceURL: '/rest_cook_book/recipe',

Next you’ll have to modify your core.js file from this:

server: SC.Server.create({ prefix: ['CookBook']}),

To this:

server: SC.Server.create({ prefix: ['CookBook'], urlFormat: '%@/%@' }),

Accessing the web site via the proxy

Lastly, start up the sc-server and access your application by going to the following address in your web browser

http://sample.com/cook_book 

You should be able to enter something like the following in the FireBug console:

CookBook.server.listFor({recordType: CookBook.Recipe});

And see an HTTP request fired. Then check the log where the sc-server is running and you should see something like:

PROXY: 200 /rest_cook_book/recipe/list?order=id -> 
    http://sample.com:8888/rest_cook_book/recipe/list?order=id

NOTE: I am also using a .htaccess file located in my rest_cook_book directory that has the ForceType application/x-httpd-php directive in it. Also, it will help to have at least a shell php script named ‘recipe’ without the ’.php’ extension in the rest_cook_book directory so you don’t get a 404 not found error.

The Details

What we’ve done above is to change the default urlFormat property from '/%@/%@' to '%@/%@'—that is we’ve removed the leading slash from the default urlFormat. Each set of %@ characters gets replaced when the model’s resourceURL property is formated. The first %@ gets the value from the model’s resourceURL property and the second %@ gets the value from the verb argument in the SC.Server.request() method (the URL passed to Ajax.request()). So the resulting URL, for example, when the listFor() method is called, looks like

/rest_cook_book/getparams/list?order=id 

This matches with the proxy setting in the sc-config file and then proxies the request from

http://sample.com:4020/rest_cook_book/getparams/list?order=id

to

http://sample.com:8888/rest_cook_book/getparams/list?order=id

Worth the Effort?

However, IMO, this seams like a lot of effort (changing core.js and the resourceURL property in your model’s .js file) as you will have to not only comment out the proxy setting in the sc-config file when you do your production build, but you will also need to change the core.js and all your Models’ .js files as well…

Seams to me the using the proxy setting in the sc-config file with Apache’s named based virtual hosting is not worth the effort as it involves code changes for what should only be a configuration change. After I have figured this out, I think I will stick with using Apache as a reverse proxy server.

Perhaps the proxy functionality needs to be enhanced to eliminate the above code changes before it is ready to use with Apache’s name based virtual hosting.

Comments

• No comments yet