Week 10 - Real World Deployment and Project Wrapup

No quiz this week.

Wednesday Agenda

  • Final group meeting. Final time posting.

Monday

Tuesday

Thursday

  • Project work

SSH and FTP

If you are working on a web application that is running on remote server somewhere you need to be able to access that machine. The standard way to securely connect to a remote machine (especially in the *nix world) is SSH.

You also need a way to move files between the two machines. Although in modern development that often is done through source control (git pushing code on one computer and then pulling it on the other), it is still sometimes necessary to move files to/from a remote machine. FTP (File Transfer Protocol) is the goto tool for doing that.

This video introduces both:

You will need to log in to the cs-student server as part of your assignment - do this EARLY in the week so that if you have password issues you can get help.

See discussion board for more info.

SSH & FTP Resources

Optional Topics

The topics below are a combination of topics students have asked about and things I think you might want to know about. None of them are part of assessments for the course.

Setting up a server

If you want to make a web application that is available from anywhere, you probably need to run it on a computer with a fixed IP address. The easiest way to do that is to rent a server (or virtual server) from a cloud service:

There are many guides for doing an nginx/node setup available on the web. This one has a good depth of detail: https://blog.logrocket.com/how-to-run-node-js-server-nginx/ one of them are part of assessments for the course.

Platform as a Service

If you want to launch a web app using a platform like Express, but do not want to have to set up and manage the operating system, security, etc... of a server, an alternative is to launch it on an App Service. An app service platform that provides an environment where you can upload or clone your code to and have it run without worrying about those lower level details of the tech stack. This video explains:

Setting up HTTPS

HTTP is insecure. Every bit of information in every page request (including the request body with things like the password you typed into a form) and the response is visible to anyone who sees the information. And there are going to be lots of parties that see the information - a web request is going to be passed from computer to computer across the networks of multiple individuals, companies, and/or governments on its way to its destination.

To keep most of that information secure, we need to use HTTPS - the secure version of the protocol. Many browsers default to HTTPS - if you type google.com they will turn that request into https://google.com instead of http://google.com. And many servers will force you to use https - if you make a request to http://foobar.com/page the foobar.com server may send your browser a redirect message to tell it to instead ask for https://foobar.com/page.

But for HTTPS connections to work, we need to set up a certificate on the server that is used to identify the server and to encrypt a message from the client to the server.

If you did not take CS160 and are interested in how the process works, start with this reading on authentication and the web.

This video goes into more depth on some of the technical aspects:

HTTPS References

Other Approaches

We have examined a fairly typical traditional web application: a backend (server) that does much of the heavy work of generating pages and a front end (HTML/JS/CSS) that mostly handles simple interactions within a single page.

But there are other approaches. If our data doesn't change that often (we are making a blog), it is pretty silly to be using a server to constantly regenerate pages that do not actually change that often - in that case we might want to use a static site generator. Or, we might want to make an app that is even more dynamic - where the client (front end / user side) can do more work independent of the server. In that situation we likely want to use a client side framework that uses JS to generate and update more of the page directly on the client.

This video briefly introduces them:

The Vue demo is in the week 10 code samples if you want to check it out.

Other Frameworks

Express is just one of many different web frameworks out there. If we want to use a different programming language, or we want to build a different style app, or we want to build a particular kind of app, it might be necessary or desireable to use a different framework. This video describes some of the options: