Skip to content
CS 484: Secure Web Application Development

homework 0 - calibration & assignment turn in

deploy and test your first web app

Quickstart: accept the assignment
Alternate Quickstart: Click “use this template” on the skeleton code to create a new private repository in your account. See below for more details.
Due: Friday, August 25, 2023 at 3:00:00 PM

By the end of this assignment you will have your own web app deployed on the web for all to see. The coding part is dead simple - you just have to change the text in a few files. The more important part is getting your tools set up for Continuous Integration and Continuous Deployment.

Local development

After accepting the assignment using the link above, you will be given access to a repository containing the skeleton code. You can clone your repository from git@github.com:ckanich-classrooms/homework0-YOUR_GITHUB_USERNAME.git and open that directory in your favorite IDE. I would recommend VS Code, as I will be using that for my demonstrations.

Installing Node.js

We will be using Node.js to build and run JavaScript applications. The easiest way to get started is to go to the Node.js download page and download the LTS version of Node.js for your laptop. This will allow you to use the node command to run JavaScript programs from the command line, and use the node package manager npm to download dependencies for your project, install additional packages, run package scripts, and more.

Running the template

Open your new project in your IDE, and in the console run npm install to download the code for all of the dependencies needed to fully run the project. You can then run the code in development mode by invoking the dev script by running the command npm run dev. This will run your app in a special mode where any updates to your source code are immediately pushed to the browser via a special plugin that isn’t included in your code when you actually build it for production.

Codespaces option

I’ve also enabled to the GitHub Codespaces feature. Codespaces creates a linux container in the cloud that allows you to run a fully featured Visual Studio Code, with access to all extensions and even extra linux containers for things like databases, without having to install anything on your local machine.

I haven’t tested it yet as a way to start working on this assignment specifically, but it should allow you to do every assignment for this class directly from your browser.

Getting the most out of your IDE

Modern programming makes extensive use of strong typing - the ability to declare (or infer) at build time what type any given symbol refers to. Importantly, this allows your IDE to understand your code as you type, and give you suggestions for which methods to call, what value an argument should take, or inform you when you’ve used something incorrectly.

To get full credit on this assignment, you must pass a formatting checker, a a type checker, and a lint checker.

Format checking

Formatting your code according to a standard makes it easy to look at code diffs, both by making the code easy to read, and by minimizing the chances that changes that don’t impact the functionality of your code (like whitespace and newlines) show up in the diffs at all. Your brain capacity is the limiting factor in good programming, and you should be using tools that minimize your mental effort whenever possible.

In this project, we use Prettier with the default settings. In VSCode, you can install the extension and turn on editor.formatOnSave and set Prettier as the default formatter, and your code will be formatted correctly automatically. The points you get for proper formatting should be the three easiest points you’ve ever gotten.

Type checking

TypeScript introduces strong typing to JavaScript through a superset of the language. The TypeScript compiler can confirm every use of a symbol against the types for those objects/functions/operators/etc, and ensure that they are being used correctly. Visual Studio Code performs type checking by default on TypeScript files, so you should see any type errors by default as red squiggles and in the “Problems” panel.

Lint checking

Linting checks for issues that will not necessarily cause your code to crash or even run incorrectly, but nonetheless are very usually errors. Take for instance the no-dupe-else-if rule, which states that you can’t use the same conditional more than once in the same set of else-if statements. So while this code is correct JavaScript that can execute:

if (a) {
  foo();
} else if (b) {
  bar();
} else if (b) {
  baz();
}

The call to baz() will never happen, and it’s very likely there’s some programmer error happening here. Linters are designed with dozens of rules that help find issues like these for you.

How to “fix” the code

You only need to change two files in the repository: you need to edit student.json in the root of the repository to include your email address, and you need to change src/main.ts to include your own email address instead of ckanich@uic.edu. You’ll need to edit student.json again later, but that’s all for now.

How to look at your website

If you want to experiment with your website, you can run npm run dev and your email address should show up as soon as you save main.ts. As long as my email address doesn’t show up in the text of the site, and yours does as part of the string “website of youremail@uic.edu”, you can make it look as pretty or ugly or ridiculous as you want. Go nuts!

Local testing

Once you have edited those files, you can run the local tests by running npm run test script. This script will look through your repository for specially named files (in our case, files that end in .test.ts, of which there is only one), and run them in the testing environment. The tests in this assignment are all in src/main.test.ts and are worth taking a look at to understand.

Before getting to the Continuous Deployment section, you should be able to get the two “on the dev server” tests running for 10 points.

Remote testing

AKA Continuous Integration

When you’re the only person working on a repository, it makes sense to run the tests locally. But once you start working in larger teams on important software, it’s important that there’s one source of truth for whether the tests are passing or not. To simulate that, this repository is set up to use GitHub actions to do continuous integration testing. The file .github/workflows/ci.yaml describes the list of tests that are run; it simply installs all of the dependencies, then runs the three format, lint, and type check scripts, and fails if any of them fail. You can see the output of the CI runs in the Actions tab for your repository.

Continuous Deployment

So far, we’ve built and run our code locally, and on GitHub’s servers. Now for the fun part - deploying our web app. You must deploy your web app to the Internet for full credit on this assignment. There are many free places to do so, including Cloudflare Pages, Netlify, and Vercel. I recommend using one of those three as they are the easiest to set up and have features we will use later on in class, but you can use Amazon, GitHub pages, or any other service as long as the web app can be deployed successfully and stays online (we may re-run the autograder at any time). The one thing you may need to configure is the build command: we are using the vite build tool, so the command to build your code is npm run build and the files that should be served (the output of the build) are in dist/.

To get the next 10 points, you need to follow the instructions at any of those services and deploy your web page. They will give you a url that ends in pages.dev, netlify.app, or vercel.app respectively (sometimes they give you a random string, but you can customize it if you want). Replace http://domain.invalid in student.json with your new web app URL, and deploy your app. If you’ve correctly set up the deployment service, all you need to do to deploy your app is git push your edits, and the service will receive a notification from GitHub that your code changed, then it will pull the code, build the website, and push the built website out to the Internet.

If you’ve done all of this without introducing any type/format/lint errors, npm run test should all be passing and you are well on your way to 100% in the class. Great job! 🎉

Submitting your work

After you are confident that you are passing all of the tests, you can submit it via Gradescope. All the Gradescope autograder does is re-run the same tests again; if your tests are passing both on your local machine and on GitHub, it shouldn’t fail on Gradescope. If you have issues with the autograder, please contact us via the class discussion board ASAP.

Our deadlines in this class are firm, down to the millisecond. If there are any documented outages with Gradescope or GitHub during the 12 hours before the deadline, we’ll extend it by 24 hours. For any other exceptional situations, we drop the lowest homework assignment for every student to be fair to everyone whether they ask for an exception or not.

Note that extensions due to DRC LOA’s do not count toward this policy, please see the syllabus for more details.

Please keep in mind that technical issues while submitting your assignment is not an acceptable excuse for improper or late submissions.

Points

Each test is worth five points, each check is worth three points, for a total of 23 points. Note that this implicitly tests your ability to download Node, install packages, edit files, upload to github, etc.

This is almost certainly the easiest assignment, so I recommend you aim for full points. Getting this done should take less than a half an hour, even if you’ve never used JavaScript before.

Alternate quickstart

As Netlify’s policies don’t allow for an Organization’s Private Repository to be hosted, here is a way around getting your first assignment deployed.

  1. Goto: https://github.com/swad-cs-uic/homework0/
  2. Click Use this template to create your own PRIVATE repository. (You must create a Private Repository for academic integrity)
  3. Clone this / Set up your created Repository, on your local.
  4. Make changes to the code base as per the homework requirements.
  5. Commit and push your changes to your repo.
  6. Open Netlify and connect your GitHub repository and you’re all set.

Submitting your assignment to Gradescope:

  1. While selecting the repository under Submission Method, choose the repository [It’s the one that you just created, pushed changes to, and then connected with Netlify.]
  2. You should see the autograder firing up and see the result.