Difference between revisions of "WSO web development"

m (updated contacts)
(New devel setup.)
Line 1: Line 1:
 
[[Category:How-To]] [[Category:Computers]]
 
[[Category:How-To]] [[Category:Computers]]
[http://wso.williams.edu WSO's web site] is a work in progress. If you know web design or Perl, or if you want to see how it's done, you're welcome to check out a copy of the code and go to work. This page will tell you how to get started.
+
[http://wso.williams.edu WSO's web site] is a work in progress. If you're impatient about the new facebook, or you know web design or Ruby, or if you just want to see how it's done, you're welcome to check out a copy of the code and go to work. This page will tell you how to get started.
  
  
Line 6: Line 6:
 
==SSH to WSO==
 
==SSH to WSO==
  
If you don't have a WSO account, email [http://wso.williams.edu/facebook/view?unix=07mg_2 Mike],  [http://wso.williams.edu/facebook/view?unix=07jmc Jessica], or [http://wso.williams.edu/facebook/view?unix=08bpw Ben]. One of them will hook you up. A WSO account is not your 06abc account. It is the first letter of your first name followed by seven letters of your last name. Once you have an account, go ahead and log in:
+
If you don't have a WSO account, email root at wso. One of them will hook you up. A WSO account is not your 06abc account. It is the first letter of your first name followed by seven letters of your last name. Once you have an account, go ahead and log in:
  
 
'''Windows''': get yourself a copy of [http://www.chiark.greenend.org.uk/~sgtatham/putty/download.html Putty]. wso.williams.edu is the host.
 
'''Windows''': get yourself a copy of [http://www.chiark.greenend.org.uk/~sgtatham/putty/download.html Putty]. wso.williams.edu is the host.
Line 12: Line 12:
 
'''Mac/Linux''': Open up a Terminal or a console, and type
 
'''Mac/Linux''': Open up a Terminal or a console, and type
  
  ssh wso.williams.edu
+
  ssh username@wso.williams.edu
  
==Set up a web server==
+
where username is your WSO username (remember, not your 06abc OIT id).
  
This part sounds scary, but most of the configuration has been done for you already. First we copy the server files into your home directory:
+
==Check out the code==
  
cp -R /var/web .
+
Once you've logged in with SSH, you're ready to check out your very own copy of the WSO code. In your home directory, or wherever you'd like to keep your copy of the WSO site, create a directory called wso-devel (or anything you'd like) and move into it with the following commands.
  
Now we just change the configuration files to work for your personal account. Change directory into your new "web" directory:
+
mkdir wso-devel
  
  cd web
+
  cd wso-devel
  
Next, type these instructions EXACTLY. Note the back-ticks in the second command. ( ). The back-tick is on the key right above tab on the keyboard.
+
Now, run the following command to use Subversion to check out the code. (Don't forget the dot at the end!) This will spew a whole log of output onto your screen, listing all the files it's checking out.
  
  sed -i .bak "s/USER/$USER/g" apache/*.conf apache/apache_test apachectl
+
  svn co file:///var/svn/wso .
sed -i .bak "s/UID/`expr 50000 + $UID`/g" apache/*.conf
 
rm apache/*.bak
 
  
So the mysterious second command will tell the web server what port to listen on. Programs listen on different ports so that when you make a network request of WSO (SSH, the web, e-mail), it knows which program should handle the request. Your server will listen on the port number 50000 plus your user id. (That makes sure everyone has a unique port.) To find out what that is, type
+
We need to create a log file for your site so it doesn't complain directly to you. Run the following command.
  
  expr 50000 + $UID
+
  touch log/development.log
  
''Write that number down for later.''
+
Now your site is ready to run! If you just want to poke around you can do that without starting the server (check out [[How to transfer files to WSO]]), but if you want to make changes and see what happens, keep reading.
  
==Get the code==
+
==Start the server==
  
Let's get a fresh copy of the code. On WSO, type
+
But first you need your own personal port to run it on. Find this by running the following command. You'll want to same the output of this for future reference.
  
  svn co file:///var/svn/wsonet ~/web/wsonet
+
  expr 50000 + $UID
svn co file:///var/svn/wsorails ~/web/wsorails
 
 
 
If you just want to see what the code is like, you can poke around those two folders. "wsonet" contains the part of the site written in Perl. "wsorails" contains the part of the site written in Ruby. Most of the site is currently in Perl, but new services will be in the wsorails folder.
 
 
 
For those of you afraid of the command line, you can now look at the files by logging into WSO over SFTP. Check out the bit on SFTP at [[How to transfer files to WSO]].
 
 
 
Of course, to actually work on the code, you'll want to know what effects your changes have. That's why we want to
 
  
==Start the server==
+
To start the server run the following command, replacing your_port with the number we generated above.
  
OK, we're ready to start the web server. Type this:
+
/opt/local/bin/ruby script/server -p your_port
  
~/web/apachectl start
+
If you see something like the following, then you're in business.
  
If everything went well, it'll say "httpd started", or something to that effect. Hooray!
+
=> Booting WEBrick...
 +
=> Rails application started on http://0.0.0.0:3001
 +
=> Ctrl-C to shutdown server; call with --help for options
 +
[2006-11-29 21:15:31] INFO  WEBrick 1.3.1
 +
[2006-11-29 21:15:31] INFO  ruby 1.8.5 (2006-08-25) [powerpc-darwin8.8.0]
 +
[2006-11-29 21:15:32] INFO  WEBrick::HTTPServer#start: pid=9210 port=3001
  
 
Before breaking out the champagne, we need to check to see that the server actually works. Unfortunately, you can't just pop open a web browser and surf to your new site. WSO's servers are behind a firewall. The firewall only allows connections on certain ports. Yours is not one of them.
 
Before breaking out the champagne, we need to check to see that the server actually works. Unfortunately, you can't just pop open a web browser and surf to your new site. WSO's servers are behind a firewall. The firewall only allows connections on certain ports. Yours is not one of them.
Line 67: Line 63:
 
===Mac/Linux===
 
===Mac/Linux===
  
Open up a Terminal, and type
+
Open up a Terminal on your own machine, and type
  
  ssh -N -p 22 -f -2 -L 8000/127.0.0.1/53717 emiller@wso.williams.edu
+
  ssh -N -p 22 -f -2 -L 8000/127.0.0.1/your_port username@wso.williams.edu
  
EXCEPT instead of 53717, put the port number that you wrote down, and instead of "emiller", type your WSO account name. Unfortunately, you'll have to run this command somewhat frequently, since SSH connections close when your computer reboots or goes to sleep (or WSO crashes, or whatever...). To make this a little less tedious, open the file called .bashrc in your home directory and add this line:
+
EXCEPT instead of your_port, put the port number that you wrote down, and instead of "username", type your WSO account name. Unfortunately, you'll have to run this command somewhat frequently, since SSH connections close when your computer reboots or goes to sleep (or WSO crashes, or whatever...). To make this a little less tedious, open the file called .bashrc in your home directory on your own machine and add this line:
  
  alias wso8000='ssh -N -p 22 -f -2 -L 8000/127.0.0.1/53717 emiller@wso.williams.edu'
+
  alias wso8000='ssh -N -p 22 -f -2 -L 8000/127.0.0.1/your_port username@wso.williams.edu'
  
Again, make the substitutions for your own port and username. Now, if you need to establish the connection, just type "wso8000" in a terminal window. You can pick a different alias, of course.
+
Again, make the substitutions for your_port and username. Close the Terminal window and open a new one. Now, if you need to establish the connection, just type "wso8000" in a terminal window. You can pick a different alias, of course.
  
 
===Windows===
 
===Windows===
Line 91: Line 87:
 
==Try out the server==
 
==Try out the server==
  
'''On-campus''': Open up a web browser and point it to "http://localhost.williams.edu:8000/". The WSO site should show up. Congratulations!
+
Open up a browser and go to http://localhost:8000/
  
'''Off-campus''': On a Mac or Linux box, add this line to the file /etc/hosts:
+
The new facebook will be at http://localhost:8000/facebook and organizations at http://localhost:8000/organizations
  
127.0.0.1    localhost.williams.edu
 
  
That makes your machine think its address is localhost.williams.edu, which is necessary for cookies to work the way your server is configured. Now point your web browser to http://localhost.williams.edu:8000/, and check it out.
+
Of course, if it doesn't work, please describe your problem on [[Talk:How to hack on the WSO site]].
  
 +
Now, you can change a file in wso-devel, and the change will show up on your development server at this address the next time you reload the page in your browser. Sweet.
 +
 +
==Making changes==
 +
 +
Nice work getting this far. So now you actually want to ''do'' something with the code. For now, come to a WSO meeting Thursdays at 10:30pm in the vicinity of TCL 217a, or email wso-staff@wso.williams.edu with questions/interest. Currently, our big project is the new facebook.
 +
 +
It's a good idea to run an update every so often so that your local working copy picks up changes that other people have made. Change directory into your wso-devel directory and run
 +
 +
svn update
  
Of course, if it doesn't work, please describe your problem on [[Talk:How to hack on the WSO site]].
 
  
Now, you can change a file in ~/web/wsonet/site, and the change will show up on your development server at this address. Sweet.
+
Email root at wso if you'd like to change the WSO site, add a new service, or fix a bug. If you get the go-ahead, you're in good shape, so go to work. Once you think your change is ready for the world, you'll need to get permission to commit changes to our code repository, where it will be tested and deployed. Email root at wso about that. They'll take care of you.
  
==Making changes==
 
  
Nice work getting this far. So now you actually want to ''do'' something with the code. Check out [[How to write a web service on WSO]]; it'll give you a nice overview of how things work, and also point you to references where you can learn Perl and HTML.
+
== To Do ==
  
Contact [http://wso.williams.edu/facebook/view?unix=07mg_2 Mike],  [http://wso.williams.edu/facebook/view?unix=07jmc Jessica], or [http://wso.williams.edu/facebook/view?unix=08bpw Ben] if you'd like to change the WSO site, add a new service, or fix a bug. If they give you the go-ahead, you're in good shape, so go to work. Once you think your change is ready for the world, you'll need to get permission to commit changes to our code repository, where it will be tested and deployed. Email [http://wso.williams.edu/facebook/view?unix=07mg_2 Mike],  [http://wso.williams.edu/facebook/view?unix=07jmc Jessica], or [http://wso.williams.edu/facebook/view?unix=08bpw Ben] about that. They'll take care of you.
+
* Pictures still don't show in WSO devel servers, at least on the front page.

Revision as of 23:15, November 29, 2006

WSO's web site is a work in progress. If you're impatient about the new facebook, or you know web design or Ruby, or if you just want to see how it's done, you're welcome to check out a copy of the code and go to work. This page will tell you how to get started.


SSH to WSO

If you don't have a WSO account, email root at wso. One of them will hook you up. A WSO account is not your 06abc account. It is the first letter of your first name followed by seven letters of your last name. Once you have an account, go ahead and log in:

Windows: get yourself a copy of Putty. wso.williams.edu is the host.

Mac/Linux: Open up a Terminal or a console, and type

ssh username@wso.williams.edu

where username is your WSO username (remember, not your 06abc OIT id).

Check out the code

Once you've logged in with SSH, you're ready to check out your very own copy of the WSO code. In your home directory, or wherever you'd like to keep your copy of the WSO site, create a directory called wso-devel (or anything you'd like) and move into it with the following commands.

mkdir wso-devel
cd wso-devel

Now, run the following command to use Subversion to check out the code. (Don't forget the dot at the end!) This will spew a whole log of output onto your screen, listing all the files it's checking out.

svn co file:///var/svn/wso .

We need to create a log file for your site so it doesn't complain directly to you. Run the following command.

touch log/development.log

Now your site is ready to run! If you just want to poke around you can do that without starting the server (check out How to transfer files to WSO), but if you want to make changes and see what happens, keep reading.

Start the server

But first you need your own personal port to run it on. Find this by running the following command. You'll want to same the output of this for future reference.

expr 50000 + $UID

To start the server run the following command, replacing your_port with the number we generated above.

/opt/local/bin/ruby script/server -p your_port

If you see something like the following, then you're in business.

=> Booting WEBrick...
=> Rails application started on http://0.0.0.0:3001
=> Ctrl-C to shutdown server; call with --help for options
[2006-11-29 21:15:31] INFO  WEBrick 1.3.1
[2006-11-29 21:15:31] INFO  ruby 1.8.5 (2006-08-25) [powerpc-darwin8.8.0]
[2006-11-29 21:15:32] INFO  WEBrick::HTTPServer#start: pid=9210 port=3001

Before breaking out the champagne, we need to check to see that the server actually works. Unfortunately, you can't just pop open a web browser and surf to your new site. WSO's servers are behind a firewall. The firewall only allows connections on certain ports. Yours is not one of them.

Setting up port forwarding

The way through the firewall is to pretend that the web server is running on your computer and not on WSO. We'll use a technology called port forwarding to send web requests to your machine through an SSH connection to your server on WSO. This is, simply, awesome.

And not too hard.

Mac/Linux

Open up a Terminal on your own machine, and type

ssh -N -p 22 -f -2 -L 8000/127.0.0.1/your_port username@wso.williams.edu

EXCEPT instead of your_port, put the port number that you wrote down, and instead of "username", type your WSO account name. Unfortunately, you'll have to run this command somewhat frequently, since SSH connections close when your computer reboots or goes to sleep (or WSO crashes, or whatever...). To make this a little less tedious, open the file called .bashrc in your home directory on your own machine and add this line:

alias wso8000='ssh -N -p 22 -f -2 -L 8000/127.0.0.1/your_port username@wso.williams.edu'

Again, make the substitutions for your_port and username. Close the Terminal window and open a new one. Now, if you need to establish the connection, just type "wso8000" in a terminal window. You can pick a different alias, of course.

Windows

Putty lets you do port forwarding, too. You can read more about it here:

http://the.earth.li/~sgtatham/putty/0.57/htmldoc/Chapter3.html#S3.5

Here are the settings you'll need:

Source port: 8000
Destination port: (your special port)
Destination host: localhost

Try out the server

Open up a browser and go to http://localhost:8000/

The new facebook will be at http://localhost:8000/facebook and organizations at http://localhost:8000/organizations


Of course, if it doesn't work, please describe your problem on Talk:How to hack on the WSO site.

Now, you can change a file in wso-devel, and the change will show up on your development server at this address the next time you reload the page in your browser. Sweet.

Making changes

Nice work getting this far. So now you actually want to do something with the code. For now, come to a WSO meeting Thursdays at 10:30pm in the vicinity of TCL 217a, or email wso-staff@wso.williams.edu with questions/interest. Currently, our big project is the new facebook.

It's a good idea to run an update every so often so that your local working copy picks up changes that other people have made. Change directory into your wso-devel directory and run

svn update


Email root at wso if you'd like to change the WSO site, add a new service, or fix a bug. If you get the go-ahead, you're in good shape, so go to work. Once you think your change is ready for the world, you'll need to get permission to commit changes to our code repository, where it will be tested and deployed. Email root at wso about that. They'll take care of you.


To Do

  • Pictures still don't show in WSO devel servers, at least on the front page.