Web Technologies

Welcome to the 2025 Edition of Web Technologies.

Server Instructions

Setting Up Your Server

Make sure to read the assignment description thoroughly. For this assignment, you will have to build a NodeJS app. You will develop your code on your own machine for your convenience, and launch it in the server. App should run both locally and on the server.

To get started on your own machine, download and install NodeJS. Use the lecture slides, official NodeJS documentations, or tutorials available online on how to get started. W3schools has very straightforward tutorials.

 
1
Screenshot

For setting up your server, you will need:

  • Your own solis-ID and solis-password (you use these to log in to all major University Utrecht services).
  • Your groupname. This is the word group followed by your group number. So for example group 1 would be group01 and group 42 would be group42.
  • Your server password. This is webtech2025 for all groups by default. Do NOT abuse this, only log into your own group.
  • The portnumber of your group. This can be calculated by adding 8000 to your group number. So for example group 1 would be 8001 and group 42 would be 8042.
2

Prepare a Hello World Snippet

Before you get started with connecting to the server, you should make a file called main.js. In this file, insert the following content:

#!/usr/bin nodejs var http = require('http'); http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello World.'); }).listen(PORTNUMBER,'localhost');

You should, of course, change PORTNUMBER to your actual portnumber. Once you did that, proceed to the following sections to upload it to the server.

3

Transferring Files using WinSCP

This is our recommended FTP-client. However it only works on Windows (as the name suggests). If you are on any other platform, we recommend Filezilla (see next section). After downloading and installing WinSCP, execute the following steps:

  1. Open up WinSCP and start a new session (this window should pop up if you open WinSCP for the first time).
  2. Click on New Site and fill in webtech.science.uu.nl as Host name, your groupname as User name and your server password as Password (recall that the initial password is webtech). Leave the rest as is.
  3. Open up Advanced and find Tunnel.
  4. Check the checkbox Connect though SSH tunnel and fill in gemini.science.uu.nl as Hostname, your solis-id as User name and your solis-password as Password. Leave the rest as is. This will setup a tunnel to the general server of the University Utrecht.
  5. You can now log in.
  6. Note that if you save your login data, but do not want to save your password both your server password and your solis-id password will not be saved.

You are now connected to your part of the server.On the left side of the screen, you will see your local filestructure. Navigate to the folder you saved your main.js in and drag it to the right side. This will upload it to the server. You now have your first file on the server! To get it running see Commands on the Server.

4

Transferring Files using Filezilla

If you are on a Windows machine, we recommend using WinSCP. If not, keep reading. Using Filezilla, you can not directly connect to your part of the server as you can with WinSCP, you will have to setup the tunnel separately. Fortunatly, this is not very complicated:

  1. Open the terminal/ command prompt.
  2. Type ssh -D PORTNUMBER -C -N solis-id@gemini.science.uu.nl (be sure to fill in your own portnumber and solis-id of course).
  3. You will be asked for your password, this is your solis-password.
  4. It will seem like the terminal gets stuck now, but it is not. It is simply holding open the tunnel. Make sure to NOT close the terminal and proceed.

Open Filezilla and configure it to use the tunnel you just created. Open Edit > Settings > Find Generic proxy (under Connection->FTP). Choose SOCKS 5 and fill in 127.0.0.1 as Proxy host and your own portnumber as Proxy port. Leave the rest empty.

On the top of the main screen: fill in webtech.science.uu.nl as Host, your groupnameas Username, your server password as Password (recall that the initial password is webtech) and 22 as Port. Click QuickConnect. Next time you log in on Filezilla, you can click the little arrow next to Quickconnect to find recent sessions. Note that you will have to re-open the ssh tunnel with the command prompt.

You are now connected to your part of the server. In the file explorer you will see a bunch of "hidden" files, just leave those as they are. On the left side of the screen, you will see your local filestructure. Navigate to the folder you saved your main.js in and drag it to the right side. This will upload it to the server. You now have your first file on the server!

5

Starting Your App

To execute commands on your part of the server (like starting it up), use ssh. ssh is default installed on Windows 10, MacOS and Linux. To log in to your part of the server follow these steps:

  1. Open a command prompt.
  2. Type ssh solis-id@gemini.science.uu.nl and fill in your own solis-password (it will not show up, that is a security feature, just keep typing). You are now inside the general server of the University Utrecht.
  3. From there, type ssh groupname@webtech.science.uu.nl and fill in your server password (recall that the initial password is webtech). You are now in your part of the server.
  4. If it is your first time logging in, change your password now by typing passwd groupname and following the on-screen instructions.

From here, you will be able to run standard ssh commands like ls and cd.

Schematic explaining how server routes your app.

The server uses PM2 as a process manager that will handle all the projects. Assuming your main file would be called main.js you can start up your app with pm2 start main.js and stop it with pm2 stop main.js. Once your started up your app you should be able to see it on http://webtech.science.uu.nl/groupname.

When you are done with setting your program up on the server as described above, you can get started on making your own app. The instruction provided above are just a guideline to get you started. You are, of course, free to use any other method of uploading to the server if you want to do so.

Some recommended NPM packages are SQLite, AJAX and JSON or XML. You are also free to use other NPM packages.

Remember to change your password once everybody in your team has tested that the setup is working. Once you are inside webtech server, use the command passwd to set up a new password - make sure that everybody in the team knows the new password.

 

Troubleshooting

Encountering errors, bugs, and confusing surprises are a part of programming. It is important to adopt effective problem-solving strategies. Remain calm and methodical. Take a moment to thoroughly read the error message or understand the undesired behavior of the code. Break down the problem into smaller components and try to isolate the root cause.

Utilize debugging tools available in your integrated development environment and the browser (Developer Tools). Set breakpoints, inspect variables, and step through your code to understand its flow. Logging statements can also provide valuable insights into the execution path and variable values.

When searching for solutions on Google, be sure to craft precise queries that succinctly describe the issue you're facing. Include relevant keywords such as error messages, programming languages (like JavaScript, HTML, CSS), frameworks (like Node.js and Express), and specific technologies (like SQLite). Look for answers on reputable sources such as official documentation, developer forums, and Q&A websites like Stack Overflow.

While it's helpful to find solutions provided by others, strive to grasp the underlying concepts behind the fixes. Understanding why a certain solution works will deepen your knowledge and make you a more proficient coder in the long run. Remember, coding is a journey of exploration and learning, and every bug you overcome is a step forward in your growth as a developer. Stay persistent, stay curious, and never hesitate to seek help when needed.

Tips

Checking if the app is running

If you launched the app and you can't view it on the browser, the first step would be to check if the app is actually running. When you launch an app using pm2, you can use pm2 status to check whether your app is running or not. pm2 list shows apps started by you.

View the Logs

Apart from the logs on console, you should also use the functionality in your server environment. Use pm2 log <app name> to view the log. In many cases, the issue might be clearly evident in the logs.

40x Errors

4xx errors are originated in the client side. If you see this error on the browser, it might be either a route in your app is not configured properly or the URL you've redirected to isn't working.

50x Errors

HTTP error codes 5xx indicate critical issues in the server side. 502 Bad Gateway is caused by the reverse proxy that routes your group's URL to the port. That indicates that the port assigned to you is not being forwarded - the most common reason is that your app isn't working.

Please check MDN Web Docs article on HTTP Response codes.