Module 3

Building a web app

Introduction to Modern Application Development Dr Gaurav Raina (IIT Madras), Tanmai Gopal (Hasura)
 Contents
Objective:

1. Get a basic understanding of how one would try to build a webapp

Topics:

1. Recap
2. Domain names
3. Hosting
4. Web application code
5. Deploying application code

Introduction to Modern Application Development Dr Gaurav Raina (IIT Madras), Tanmai Gopal (Hasura)
 Building a webapp...

Web server

response
Network Browser
(web client)
request
Computer (host)

DNS helps convert

domain name to IP

This is what we
need to set up,
to serve our own
webapp

Introduction to Modern Application Development Dr Gaurav Raina (IIT Madras), Tanmai Gopal (Hasura)
 Build a webapp that others can use?
Building a webapp involves the following steps:

1. Get a unique domain name

a. So that people can remember your webapp so that they can reach it.
2. Set up a computer with an IP to serve the webapp
3. Link the domain name with the server’s IP address.
4. Write your application code (web server)
5. Deploy your application code on the computer that is your server host

Introduction to Modern Application Development Dr Gaurav Raina (IIT Madras), Tanmai Gopal (Hasura)
 3.1 Get a domain name
● Get a domain name so that people can reach our web app.
● Buy a domain name using domain registrars.
● Registrars take your domain name and make sure that no-one else, including other registrars can
use that name while you have it.

Some popular domain registrars:

gandi.net
godaddy.com
name.com

Introduction to Modern Application Development Dr Gaurav Raina (IIT Madras), Tanmai Gopal (Hasura)
 Web server

response
Network Browser
(web client)
request
Computer (host)

DNS helps convert

domain name to IP

Introduction to Modern Application Development Dr Gaurav Raina (IIT Madras), Tanmai Gopal (Hasura)
 3.2 Set up a web server - I
We need to get a computer and a unique IP.

Option 1: (super hard!)

1. Buy a computer
2. Connect it to your ISP
3. Get a unique IP for your computer that won’t change
4. Install your OS and web server software

Option 2:

1. Rent a computer from a vendor somewhere else in the world.

2. Vendor provides the IP with which you can reach your computer.

Introduction to Modern Application Development Dr Gaurav Raina (IIT Madras), Tanmai Gopal (Hasura)
 3.2 Set up a web server - II
● The technical term for renting computational power from a vendor: hosting
● Many different types of hosting

3. VPS hosting 4. Cloud hosting

1. Shared hosting:
Virtual Private Servers are virtual Similar to VPS providers but allow
Many different users are created on the
machines created on the same for rapidly changing size of the
same computer (the same as creating
physical machine. You get a virtual machine and provisioning
multiple users on your own computers)
dedicated IP. more machines on the go.
Users have to share CPU, RAM and disk
Pros: Less expensive than
resources.
dedicated hosting
All users get the same IP.
Cons: Lower performance than
dedicated hosting
2. Dedicated hosting:
Quick exercise: For each of the below,
You can rent a machine that only you get find out what kind of hosting they
to use. No other users get access to that offer?
webfaction, godaddy, Google Cloud Platform,
machine.
bluehost, AWS, softlayer, linode, digitalocean,
You get a dedicated IP that is unique to Rackspace
you.

Introduction to Modern Application Development Dr Gaurav Raina (IIT Madras), Tanmai Gopal (Hasura)
 3.2 Set up a web server - III

The experience of buying or

renting a computer.

Introduction to Modern Application Development Dr Gaurav Raina (IIT Madras), Tanmai Gopal (Hasura)
 3.3 Link domain name to the server
● Next, you map the domain name to this IP
● This information is published by the registrar on their DNS servers so that
anyone in the world can now exchange your domain name for the IP
● You can access a webserver using its domain name or its IP.
ex: http://nptel.ac.in/ is the same as http://14.139.160.71/

IP
My Server mydomain.com

Introduction to Modern Application Development Dr Gaurav Raina (IIT Madras), Tanmai Gopal (Hasura)
 3.3 DNS propagation
● What happens when you set the IP for a domain?
● The DNS system is a globally distributed database of domain-name to IP
mappings maintained by many name servers spread over the Internet.
● When you update the domain-name to IP mapping with your registrar a gradual
wave of updates begins and DNS can take upto 48 hours to update worldwide!

Introduction to Modern Application Development Dr Gaurav Raina (IIT Madras), Tanmai Gopal (Hasura)
 Understand DNS in more detail!
https://howdns.works/

Introduction to Modern Application Development Dr Gaurav Raina (IIT Madras), Tanmai Gopal (Hasura)
 3.4 Write application code

Web server

response
Network Browser
(web client)
request
Computer (host)

Introduction to Modern Application Development Dr Gaurav Raina (IIT Madras), Tanmai Gopal (Hasura)
 3.4 Write application code
Write or install a program in your favourite language that can listen to a request and respond with
appropriate information. This is the web server that will serve your webapp.

1. Listen on the network

2. Accept a request
3. Process the request
4. Output a response in a format that the browser will understand
5. Send the response back over the same connection on the network

Introduction to Modern Application Development Dr Gaurav Raina (IIT Madras), Tanmai Gopal (Hasura)
 3.4 Write application code
● Writing a program that knows how to listen on a network is quite hard
● Developers use several frameworks, libraries and tools that help them write only portions specific to
their application and avoid the complex bits.

1. Listen on the network

Apache + Linux
2. Accept a request
3. Process the request Common “stacks” & frameworks that
4. Output a response in a format that the browser PHP + MySQL
developers use:
will understand LAMP: Linux Apache MySQL PHP.
5. Send the response back over the same connection WAMP, MEAN, Django, Rails, Laravel,
Express
on the network Apache + Linux

Introduction to Modern Application Development Dr Gaurav Raina (IIT Madras), Tanmai Gopal (Hasura)
 3.5 Deploy code on your server
After writing and testing your code, the code needs to be deployed on the server:

1. Install the correct OS + dependencies on your server Common ways to remote

2. Copy your code (as source code or binaries) manage a server:

● SSH
3. Run your code!
● FTP (only for files)
● Cpanel

Deployment is a tricky process especially when making updates to ● Remote desktop

an app that is already live. Deployment is also a process that needs
to be very secure to ensure that unknown people or unknown code
does not get deployed to our app.

Introduction to Modern Application Development Dr Gaurav Raina (IIT Madras), Tanmai Gopal (Hasura)
 Things to keep in mind
Things in our control These are things not in our control

Domain name What requests are made by users

Server side code What browser or client the user is using

Web server

Network
response Browser
(web client)
request
Computer (host)

Introduction to Modern Application Development Dr Gaurav Raina (IIT Madras), Tanmai Gopal (Hasura)
 A quick exercise

Introduction to Modern Application Development Dr Gaurav Raina (IIT Madras), Tanmai Gopal (Hasura)
 ‘Inspect Element’ on Chrome.
1. Requests and responses
2. Different response types
3. Making arbitrary requests and checking responses
4. Modifying the HTML in the browser (because we have control)
5. Using the IP instead of the domain name

Introduction to Modern Application Development Dr Gaurav Raina (IIT Madras), Tanmai Gopal (Hasura)
 Chrome Dev Tools
1. Chrome Dev Tools (the window that opens up when you click on ‘inspect’) is a very powerful
analysis and debugging tool
2. https://developer.chrome.com/devtools

Introduction to Modern Application Development Dr Gaurav Raina (IIT Madras), Tanmai Gopal (Hasura)
 Summary

Introduction to Modern Application Development Dr Gaurav Raina (IIT Madras), Tanmai Gopal (Hasura)
 What we covered

What does it take to build a webapp.

Domain names (required only if we don’t want people to use our IP).

Hosting (a computer to host our server code).

A web server (either a software that we can directly use, or a software that we can write).

Deploying the web server code on the hosting provider’s given machine.

You can watch this module on Youtube: https://www.youtube.com/watch?v=2P7f6b_E3E4

Introduction to Modern Application Development Dr Gaurav Raina (IIT Madras), Tanmai Gopal (Hasura)