⬅️ Return to course website

Assignment 0: Setup

Introduction

We are on a mission to create the most delicious donut in the world, but first we must collect all the ingredients… not just any ingredients, but the best quality ingredients! This is the setup assignment so it is comparatively much shorter; You will be setting up the CS1951v Development Environment for the programming assignments in the course, and ensuring that you are completely setup with everything before we start!

Throughout the rest of the course we will be working towards building a hypermedia system, which will involve understanding what hypertext/hypermedia and its principles are. We will also become famliar developing a modern full-stack application for the web using the MERN stack - MongoDB, Express, React, Node.

We look forward to getting started! If you have any questions, please feel free to reach out to any of the TAs via the slack channel outlined below and/or come to TA hours.

Checklist

• Join the Slack and send a message in the #introductions channel on Slack
• Read and sign the collaboration policy
• Accept assignment0-setupin GitHub classroom
• Set up CS1951V Development Environment
  • Check that your backend setup is working
  • Check that your frontend setup is working
  • Deploy your bio to the course website!
• Sign up for a lab slot here. We will have 5 mandatory labs throughout the semester, the dates are available here. The times are here:
  • Lab A: Thursday 4-6pm ET
  • Lab B: Friday 3-5pm ET

• Read and annotate As We May Think
  • hypothes.is setup instructions are available here. We will be using hypothes.is for reading and annotation throughout the course!

Join the Slack channel

Slack will be our main form of communication throughout the semester. Course updates and other announcements will be sent through our Slack, and this Slack workspace will also allow you to interact with other students and the teaching staff. Channels have already been set up for lectures and sections, as well as for the individual components of our tech stack (React, MongoDB, etc).

Slack will also function as our Piazza/EdStem for this course. Topic-specific questions can be posted in the corresponding channel and will be answered by the staff. Direct messaging can also be used for personal questions and more informal communications with the TAs and professors.

Click here to join our workspace! Once you do, send a message in the #introductions channel briefly introducing yourself so we can check you off for joining the Slack. Include your name, where you’re from, and some of your interests / hobbies!

Sign the Collaboration Policy

All of our course assignments will be project- and assignment-based, so it is very important that all of the work that you do this semester is your own. That being said, general discussions with other students about lecture material and overall concepts are not only allowed but encouraged. We want everyone to clearly understand what is allowed to be openly discussed during the semester, so please read closely and complete the collaboration policy agreement here.

CS1951v Development Environment

MERN

In CS1951V, we will be developing full-stack web applications using the MERN stack, which stands for MongoDB, Express, React, and Node. The MERN architecture allows you to easily construct a 3-tier architecture (frontend, backend, database) using just JavaScript/TypeScript and JSON. The interactions between these technologies are shown below:

Using this stack will allow you to build and deploy full-stack applications easily and efficiently, and will also give you firsthand experience working with these widely used technologies. For a more detailed introduction to the MERN stack, which we will be using for programming assignments through the course, click here.

We settled on the MERN stack so that our small staff can provide high-quality support to students working on assignments and the final project. We recognize there are many great libraries, frameworks, and languages out there that could be used to implement a hypertext / hypermedia system. If you are interested in using another technology for the final project please reach out to us ASAP and we will be happy to consider it.

Typescript

In addition to the MERN stack, we will be using TypeScript as our primary programming language throughout the course. It is more organized, and makes debugging a far easier task for both you and the TAs!

Typescript is a strict syntactical superset of JavaScript. It adds static type checking to JavaScript, so if you have experience with JavaScript but not Typescript, there’s no need to worry! Additionaly, by learning and using TypeScript, you will also naturally become more familiar with JavaScript. You can learn more about static type checking and TypeScript here if you have not used either TypeScript or JavaScript, and here if you are already familiar with JavaScript.

const ingredients = { sugar: 10, flower:20, eggs:2  };
// Why is this NaN? Spelling is hard!
const dough = ingredients.sugar + ingredients.folwer + ingredients.eggs;

Setting Up Your Development Environment

The following will show you how to set up a MERN stack development environment. There are a number of technologies that you will need to install, so please follow the instructions below carefully! The technologies that we will be using in this course are as follows:

• Visual Studio Code
• Node / Node Package Manager (NPM)
• Yarn
• Git Command Line Interface (CLI)
• Code styling / Linting

Visual Studio Code

We highly recommend using Visual Studio Code for course assignments. Visual Studio Code is a code editor that is optimized for building and debugging modern web applications. On top of this, it has built-in Git commands that will make it easier to work with Github Classroom, and has a bunch of incredibly helpful extensions that can be used to improve your workflow.

Opening a Project and Terminal in Visual Studio Code

Once you have Visual Studio Code installed, you can open a project by selecting File -> Open..., and then selecting the source folder of a given project.

To open a terminal in that project’s directory, select Terminal -> New Terminal, and a new terminal window will appear at the bottom of your editor. This terminal can be used to run commands in Visual Studio Code itself without having to leave your editor.

Now that you have your IDE setup, let’s install the software environment we will be using throughout the semester!

Installing required plugins

To make sure we take full advantage of VS Code, there are a few required and optional plugins to install:

• Prettier Eslint [required]
• GitLens [optional]

Feel free to explore other VS Code plugins and themes you like! The GitHub theme is a personal favorite.

Configuring VS Code

This is a critical step in setting up your development environment, so don’t skip it!

Turn on Autosave

1. Click the Manage ⚙️ icon on the bottom-left side of the editor, and select Settings. Alternatively, use (Ctrl + ,).
2. Locate the Files: Auto Save option and select afterDelay. This will autosave the code whenever you pause editing.

Set Tab Size

1. Locate the Editor: Tab Size option and input 2. This is the industry standard tab size for JavaScript.

Configure default formatter

1. In the search bar, search the keyword format.
2. Locate the Editor: Default Editor option and select Prettier Eslint.

3. Underneath the Default Formatter option, locate Editor: Format On Save option. Make sure the box is selected, as this will automatically reformat your code and ensure you have the right style on each save.

Node / Node Package Manager (NPM)

What is Node?

Node is a JavaScript runtime built in Chrome’s V8 engine. In other words, Node is JavaScript outside of the browser. Traditionally, JavaScript can only be executed within the browser, which is the client-facing side of web applications that every user has access to. However, Node allows you to run JavaScript code on the backend of your application as opposed to on the browser itself.

This allows you to use JavaScript for both the front and backend components of your web applications, making development much simpler and more straightforward!

All Node applications should contain a package.json file which specifies:

• The packages on which your project depends
• Versions of a package that your project can use
• Additional metadata such as author, description, and useful scripts for building and running the application

If given the option, install Node ^v16, this is because we want to stay up to date with the latest technologies. You may need to restart your shell after installation before the node command is recognized.

If you’re having trouble or are working on another system, you can find alternative ways of installing Node on your system by following the guide here.

To verify that you have installed Node correctly, run the following line of code in your terminal:
node --version

If there is no error, you have installed Node correctly!

Yarn

Yarn stands for Yet Another Resource Negotiator and it is a package manager just like npm. It was developed by Facebook and is now open-source. The intention behind developing yarn (at that time) was to fix performance and security concerns with npm. If you are interested, here is an article that outlines the difference between npm and yarn.

Yarn is a JavaScript package manager that aims to be speedy, deterministic, and secure. The Yarn Command Line Interface (CLI) will parse the package.json file in a Node application and will automatically reach out to the correct online registry and install that package onto your local machine. Its main advantage is its avoidance of any problems related to different versions of Node.js system modules on which the project will be mounted. Yarn should reduce the number of package-management-related issues you will have to deal with throughout the semester.

So why need a package manager in the first place? Web applications usually use a great number of third-party packages and libraries so we don’t have to write everything on our own. Instead of manually installing the packages one-by-one, we use the package manager to automate this process. It’s really quick!

In order to get consistent installs across machines, Yarn needs more information on the dependencies you configure in your package.json. Specifically, Yarn needs to store exactly which versions of each dependency were installed. To do this, Yarn uses a yarn.lock file in the root of your project. Your yarn.lock file is auto-generated and should be handled entirely by Yarn. As you add/upgrade/remove dependencies with the Yarn CLI, it will automatically update your yarn.lock file. Do not edit this file directly as it is quite easy to break something!

Git Command Line Interface (CLI)

Simply put, Git is a version control system that lets you manage and keep track of your source code history. GitHub is a cloud-based hosting service that lets you manage Git repositories. If you are brand new to GitHub, consider watching this video.

Note: CS32 also has a very useful tutorial on how to use Git, which you can find here. If you do not know how to use Git, we strongly recommend that your use it.

Checking Your Environment Setup

Now that you have everything installed, we need to check that everything is working properly! To do so, we have created an assignment on GitHub to test both a React frontend environment and a Node/Express backend environment. Accept the assignment here. If you can successfully run both of the applications after cloning their repositories and installing the related packages, then you’re good to go!

For this assignment and throughout the course we will be differentiating between the frontend and backend in the same way: All of the backend code will be stored in a folder called server and all of the frontend code will be installed in a folder called client. Our recommendation is to have one terminal open for each whenever you are working on the assignments!

Backend

Now that your frontend environment is correctly set up, let’s verify that your backend environment is correctly set up as well. It contains another simple App file that uses an Express router to send a request to a local address. As before, you will be cloning this project and running it on your own computer in order to verify that your backend environment is set up correctly.

This happens because we haven’t set up the environment variables yet. What is an environment variable?

Sometimes we have sensitive information that we need to include in our code - your password, your SSH key, or even the port number that your app is running on - that’s the reason why we keep those information in a seperate .env file and call them environment variables.

Frontend

To test your frontend environment setup, we will test that your setup works with a very basic React application. It contains a simple App.tsx file that displays some HTML using React. You will be running this app on your machine in order to verify that your development environment is set up correctly.

Linting

To test whether your linter is working, please navigate to client > src > App.tsx. You should now see a file that is intentionally formatted incorrectly. Press Ctrl+S to save the file. You should now see the file going through some stylistic changes, and the code format should look much cleaner.

If you do not see any changes after you save, that means some steps in your linting set up is not completed. Please try it again, or enter yarn lint to manually perform the reformat.

If you see the following message, your frontend environment is correctly set up, and you should be set up for the rest of the course!

Deploying your bio to the CS1951v Website!

Now, you can get some practice working with TypeScript objects! But more importantly, you can get to know your classmates. You will be making a basic API call to deploy your profile onto our course website!

First, go to client > src > api > profile.ts and read the IProfile interface. Then, you should properly fill out this placeholder text:

export const profile = {
  role: "student",
  name: "Your name",
  // more key-value pairs...
}

with all your information!

Now, you can see Typescript in action! To tell the typechecker that profile should be an instance of IProfile, you can add a type annotation like so:

export const profile: IProfile = {
  // your filled out fields...
}

Now, if you are missing a field or one of the fields is an incorrect type, you will get a type error! This is an example of how Typescript prevents bugs and makes your Javascript codebase significantly easier to maintain.

If you edited your profile you will now see a profile and a button at the same localhost:3000 site that you had set in your frontend environment setup! If you have saved the profile.ts file, then it should look something like this:

If that works, and if you are happy with your profile, you are ready to deploy your bio to the course website! Click the “Deploy your bio to the website” button, and check the course website to see you and your classmates :)

Congrats!

You’re now set up for the rest of the programming assignments 😎 Happy coding!