homework 0 - hello Internet world

Setup your development environment, deploy your first web app

Quickstart: Host the string “CS 484 Homework 0” and your uic email address on the Internet someplace. Turn in a GitHub repository with that URL in a file called url.txt via Gradescope.Watch the kickoff video or read below for more details.

Release: Tuesday, August 26, 2025 at 8:00:00 AM

Due: Friday, August 29, 2025 at 2:00:00 PM

By the end of this assignment you will have your own web app deployed on the web for all to see. You can make this web app as simple or as complex as you want - all it needs to do is show your UIC email address and the text “CS 484 Homework 0” (case sensitive). The more important part is confirming that you can use the course assignment submission system (Gradescope), and getting your tools set up for Continuous Integration and Continuous Deployment.

Unix-based development environment required

One of the awesome things about web development is that on the server side and the client side, it’s pretty cross-platform. However, once you get into more advanced topics, you’ll find that the vast majority of web servers are running Unix-based operating systems (mostly Linux), and many developers are using Macs or Linux machines for local development.

If you’re on a Mac or Linux, you’re all set for the first couple assignments, local development will work as expected. If you’re on Windows, you have a few options:

• You can use the Windows Subsystem for Linux to create a Linux environment on your Windows machine. VSCode has some great tools for working with WSL, but they aren’t required.
• You can use a virtual machine to run a full Linux distribution. This is a bit more heavyweight than WSL, but it’s a good option if you want to get used to using Linux. If you’re on a new ARM Windows laptop, this might not work as expected, and I can’t provide support as I don’t have one to test with.

One tricky part is that most things will work on Windows, but many things will start breaking in unexpected ways. So unless you’re really intent on developing in Windows, I’d suggest using one of the options above for working on your assignments in this class (and other advanced CS classes).

Requirements vs. Recommendations

The only requirement for this assignment is to get your email address and the string “CS 484 Homework 0” hosted on the Internet at a given URL. Once you’ve done that, put the URL in the file url.txt, put that file in a github repository, and submit it to Gradescope. That’s it, that’s the assignment.

However, I recommend that you configure a continuous development environment to allow you to update that web application simply by pushing an update to your GitHub repository.

For some of you, this is something you’ve never done before and don’t even know where to get started. No worries! We’ll walk you through it. For those that have done this dozens of times before, perhaps take this as an opportunity to use a different platform, language, or framework than you’re used to using.

For the example I’ll be doing in the kickoff video, I’ll be using Cloudflare Workers to build and host the app, and Astro as the framework. Feel free to experiment with anything you’d like - there’s a huge list of services with free tiers for developers, including many for free web hosting.

Local development

Before getting started with this course, I assume you have some familiarity with:

• Using git and GitHub to manage source code
• Using a code editor or IDE (VSCode (and derivatives like Cursor) is good, I’m currently using Zed)

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.

Creating and deploying a template repository

Cloudflare, like many other web services, offers a “CLI” (command line interface) that allows developers to quickly and easily access their services. Once you’ve got Node installed, you can run this single command and follow its prompts to deploy an Astro-based web app on Cloudflare’s network.

npm create cloudflare@latest -- my-484-app --framework=astro

Running the template

Once the template has been created and published, you can open your new project in your IDE and edit it as you please. You can run a local development server which simulates how your web application will operate when it is hosted on the Internet by running:

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.

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. VSCode and Zed both have “out of the box” integration with TypeScript to validate your code as you type, and provide suggestions based on the types of various symbols in your source code.

In addition to type checking, you should also configure your IDE to perform format checking and lint checking as you type. This will help you avoid common mistakes, and ensure that your code is formatted correctly according to the standards we will be using in this class. This is all optional right now - we’ll go into more detail about these topics later in class.

For fresh JavaScript/TypeScript based projects, I recommend using biome.js. Prettier for formatting and ESLint for linting are also good options, but biome.js does both, much faster, and with a much cleaner configuration.

What is 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 add url.txt in the root of the repository to include your deployed web app’s URL, and you need to edit the code in whatever way makes your UIC email and “CS 484 Homework 0” show up on that URL.

How to look at your website

If you want to experiment with the Astro template, you can run npm run dev and your email address should show up as soon as you save src/pages/index.astro. As long as you’ve met the listed requirements, you can make your app look as pretty or ugly or ridiculous as you want. Go nuts!

Web App Deployment

So far, we’ve deployed the basic template, built and run our code locally, and updated the local version to list our own email address. Now for the fun part - deploying our web app. You must deploy your web app to the Internet for credit on this assignment. Cloudflare is probably the easiest, but you can use Amazon, Vercel, Netlify, 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!).

Once you’ve made an update to the source code, you can immediately update the global deployment by running this command from the root of your project:

npm run deploy

This command will build your app using Astro’s build system, and then connect to Cloudflare and upload all of the newly compiled code. After a few seconds, your web app will be updated on the Internet.

Continuous Deployment

While it’s all well and good to manually run npm run deploy every time you make a change, it’s much better to have this happen automatically whenever you push a change to your GitHub repository. This allows different people to work on the same web app at the same time, allows you to perform more checks before pushign to your production server, and makes the builds more reproducible by always running the same build process on the same infrastructure.

For Cloudflare Workers, the easiest way to get Continuous Deployment working is to log in to the web dashboard and connect your GitHub repository to Cloudflare. This will allow Cloudflare to automatically build and deploy your app whenever you push a change to your repository. I go over this in the kickoff video.

Submitting your work

After you are confident that your web app is running as expected, you can submit it via Gradescope. Check Piazza for the Gradescope invitation code. Anyone with an @uic.edu email address can join the course Piazza. All the Gradescope autograder does is reads url.txt, grabs that URL, and checks for your email address and the static string mentioned above. Gradescope will only allow GitHub based submissions - you must add url.txt to your repository and submit it through Gradescope. If you have issues with the autograder, please contact us via Piazza 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

This assignment is all-or-nothing: if you deploy a web app that has the right text in it, you get full credit. If you don’t, you don’t. If you follow along with either these instructions or the kickoff video, you should be able to finish this assignment in less than 30 minutes, even if you’ve never used JavaScript before. This is almost certainly the easiest assignment, so I recommend you aim for full points.