JavaScript Codespace Template

Extend and use for your Web Development lessons in minutes.

This JavaScript Codespace template provides you a normalized environment for you to build your class on. No setup time needed from you or your students, allowing you to focus on the content and lessons.

• Who is this for? Educators of all levels.
• How much experience do students need? Zero. This template is built with basic elements complete with comments so it can be used in beginner to advanced lessons.
• Can I use this template for other Web Frameworks? Absolutely. This template uses React as an example, but instructions are included in this document to help you use this template with your web framework.
• Prerequisites: None. This template will provide a working and deployable web app you can immediately extend for your teaching needs with GitHub Copilot to help.

🧑‍🏫 What is GitHub Codespace and how can I use it in my teaching?

A Codespace is a development environment that's hosted in the cloud that you can configure. The Codespaces Education benefit gives Global Campus teachers a free monthly allowance of GitHub Codespaces hours to use in GitHub Classroom. Learn more here about Using GitHub Codespaces with GitHub Classroom.

If you are not already a Global Campus teacher, apply here or for more information, see Apply to GitHub Global Campus as a teacher.

Quick Start

1. Click the Use this Template button
2. Select the repository owner (e.g. your GitHub account or organization)
3. Enter a unique name for your new repository
4. Click Create repository from template
5. Once repository created, click the Code button
6. Click Create Codespace on main button

Why use it

• Avoid environment setup time for you and your students.
• Runs in the cloud.
• Can be configured and customized.
• Integrates with your repositories on GitHub.

🎥 Watch the video tutorial to learn more about Codespaces

Customization for your lessons

When using this template project, you can customize the GitHub Codespaces to meet your lesson needs by committing configuration files to your repository (often known as Configuration-as-Code). You can then use this template to create assignment in GitHub Classroom. This creates a repeatable Codespace configuration for all students of your project. You can configure things like:

• Extensions: You can specify what Visual Studio Code extensions should be preinstalled
• Dotfiles and settings
• Operating system libraries and dependencies

This allows you to configure the exact Codespace environment needed for your lessons, and know that all your students will have the exact same project environment. No class time needed for setup.

💡 Learn more here, docs.github.com/en/codespaces/customizing-your-codespace/personalizing-github-codespaces-for-your-account

🗃️ Codespaces JavaScript template

This repository is a GitHub template for a web application using the React web framework. The goal here is to give you a template to you can immediately use. You can also use the steps in this document to adapt it for your particular needs.

The repository contains the following:

• /src: HTML, JavaScript and CSS files for the web application.
• .eslintrc: Settings for ESLint that is included for code consistency and quality.
• .prettierrc: Settings for Prettier that is used to format code.
• package.json and package-lock.json: Define the project information for Node.js, dependent packages and the versions needed of each.
• docs: Sample lessons and tool quickstarts for you to use in your teaching.

About the Web application (/src )

We set this template to demonstrate a web application using the React framework and Parcel to build the application within Codespaces.

We've included the bare minimum file structure for a working application, so you have immediate ability to customize. Also included is a sample component (Header) to demonstrate how to incorporate components into your application.

The template uses Parcel because it's regarded one of the eaisest to use, with limited configuration. You can of course extend or replace this.

🚀 Run this template

To run what's in this repository, you need to first start a Codespaces instance.

1. Create a repository from this template. Use this create repo link. Select the repository owner, provide a name, a description if you'd like and if you'd like the new repository to be public or private.

2. Navigate to the main page of the newly created repository.

3. Under the repository name, use the Code drop-down menu, and in the Codespaces tab, select "Create codespace on main".

   

4. Wait as GitHub initializes the Codespace.

   

5. When complete you will see your Codespace load with a terminal section at the bottom. Codespaces will install all the required extensions in your container, followed by executing npm install. Once the package installs are completed, Codesaces will execute npm start to start your web application running within your Codespace.

   When the web application has successfully started you will see a message in Termin that the server is running on port 1234 within your Codespace:

   

✨ Customize your Codespace

This template is intended to be fully customizable for your particular Web Development teaching needs. Here are three different challenge scenarios you are likely to want to do:

1. Add an extension
2. Update linter configuration
3. Update the version of Node.js

💡 Learn more here, docs.github.com/en/codespaces/customizing-your-codespace/personalizing-github-codespaces-for-your-account

Step 1: Add an extension

VS Code extensions let you add functionality to your VS Code instance so that you can setup to meet your particular development workflow. In VS Code Marketplace you can browse the complete collection to find the exact language, linter, debuggers, and more that you need for your project.

Within this template we have preinstalled extensions for you to utilize within your Codespace. Here is how you can view and change which extensions your Codespaces environment starts with::

1. Open file .devcontainer/devcontainer.json and locate the following JSON element extensions

   "extensions": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode",
        "ms-vscode.azure-account",
        "ms-azuretools.vscode-azurestaticwebapps"
   ]

2. Add "oderwat.indent-rainbow" to the list of extensions. It should end up looking like the following:

   "extensions": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode",
        "ms-vscode.azure-account",
        "ms-azuretools.vscode-azurestaticwebapps",
        "oderwat.indent-rainbow"
   ]

The string added is the unique identifier of indent-rainbow, a popular extension to make indentation more readable. Adding "oderwat.indent-rainbow" identifier to the list lets Codespaces know that this extenion should be pre-installed upon startup.

To find the unique identifier of an extension:

• Navigate to the extension's web page, for example indent-rainbow
• Locate the Unique Identifier field under More info section on your right side.

Step 2: Update linter configuration

A linter is a tool that helps improve quality and consistency of code. This project comes configured with ESLint.

To get you started we included some basic linter settings typically found in JavaScript, and React applications. Including extensions for Prettier (for code formatting rules), and web accessibility with eslint-plugin-jsx-a11y.

Let's now update the linter rules to check for prop types to be defined on all React components. To set this linter rule, open the .eslintrc file. Within the rules object add: "react/prop-types": "warn". Your ESLint rules should then be:

"rules": {
   "prettier/prettier": ["warn", { "endOfLine": "auto" }],
   "react/prop-types": "warn"
}

Note: possible values to set a rule to are "off", "warn" and "error". When set to "warn" student will ne notified of issue, but not required to resolve. Set to "error" will require a student to resolve that linter issue.

With that in place, all incoming properties to a component will need to be definied with the name and type or the student will see a warning. You can then add a title prop to Header and see your new rule in action:

To resolve the prop types warning in this example, you would need to import PropTypes and then define the propTypes for Header, giving you:

import React from "react";
import PropTypes from "prop-types";

const Header = ({ title }) => {
  return <h1>Educator React Codespaces JS Template - {title}</h1>;
};

Header.propTypes = {
  title: PropTypes.string,
};

export default Header;

Step 3: Update the version of Node.js

If you want to change what version of Node.js this project is using, follow these steps:

Open .devcontainer/devcontainer.json and replace the following section:

"VARIANT": "16-bullseye"

with the following instruction:

"VARIANT": "18.9-bullseye"

This change will use Node.js 18.9 instead of 16. The complete list of all Node.js variants available can be found at hub.docker.com/_/node

Reminder: When you change any configuration on the json, a box will appear after saving.

Click on rebuild. Wait for your codespace to rebuild the VS Code environment.

🤖 Create a Lesson

This template project gives you a base for you to build a customized lesson on. Using GitHub Copilot we will walk you through creating a sample Typescript lesson and quiz you could use for your class in the following steps:

1. Write a lesson description
2. Add steps to lesson
3. Add code challenges
4. Create a quiz

👋 Getting Copilot access

GitHub Copilot is FREE for students and faculty, learn more here. Follow these steps to verify your student or faculty membership and enable Copilot for free.

Step 1: Write a lesson description

For our sample lesson, we are going to use "Introduction to TypeScript" as our lesson topic. Open the sample_lesson.md file where you will see we have started you with the lesson title.

After the title, press enter two times to get a empty line and then the new line you are typing on (markdown likes some empty lines to render correctly). On this line, prompt Copilot with some on our lesson description. Start typing: In this lesson

As you start typing you will see Copilot start to suggest some text. Select the suggested text by pressing tab. Copilot will then add the text to your file and prompt you for the next line. Continue typing: we will learn about

---

⭐ COPILOT BONUS ⭐

If you want to see Copilot in action, press enter after your completed description and see what Copilot suggests next to built out your lesson.

Prerequisites, learning objectives, an introduction to what TypeScript is, just from the little you have given Copilot so far it may fill all this in for you.

Accept suggestions, make edits, and continue to build out this beginning part of your lesson.

---

Step 2: Add steps to lesson

To make this lesson actionable for your students, let's add some steps on how they get started.

After your description and intro sections you used Copilot to help build out for you, let's have Copilot again help us out and built a list of numbered steps for our students to follow.

On a new line, start typing the following and see what Copilot will suggest for you:

## Steps to get started

1. Fork this template repository to your own GitHub account and open it in Codespaces.
2. Install the TypeScript package.
3. Create a TypeScript configuration file.
4. Convert `index.js` to `index.tsx`.
5. Convert `App.js` to `App.tsx`.
6. Run the TypeScript compiler.
7. Commit and push your changes.
8. Start a discussion in the Discussions tab of this repository.

NOTE: The steps above are just an example, be creative, and make it your own! Nudge Copilot along the way to help built out your lesson steps.

Step 3: Add code challenges

Now that we have a lesson description and steps, let's add some code challenges for our students to complete and show their creativity.

On a new line, prompt Copilot with: ## Code Challenges and see what Copilot suggests for you.

As an example, let's say we want to add the challenges below. Copilot may not get this right on the first try, but we can fill in some and it will start to pick up the pattern and help us out.

## Code Challenges

1. Create a new component called `Header` and add it to the `App` component.
2. Add a prop to the `Header` component called `title` and pass in a string value.
3. Add a prop to the `Header` component called `subtitle` and pass in a string value.

Step 4: Create summary and discussion

This example lesson has taught students about TypeScript, had them fork a template repository, install TypeScript, and complete TypeScript challenges. To complete this lesson, let's summarize and have the students demonstrate their learning through a discussion in the Discussions tab of this repository.

On a new line start prompting Copilot with: ## Summary and it will suggest a lesson summary for you.

After that, on a new line start prompting Copilot with: ## Discussion and it will begin to suggest discussion questions for your students to answer.

---

⭐ COPILOT BONUS ⭐

If you want to see Copilot in action, press enter after your completed summary and see what Copilot suggests next to built out your lesson.

Try having it build out a list of resources for your students. Or how about a quiz. Keep guiding Copilot to what you are looking for, and it will continue to help you build out your lesson.

---

📚 Resources

• GitHub Codespaces docs overview
• GitHub Codespaces docs quickstart
• GitHub Copilot docs
• Use dev containers locally with VS Code and Docker
• Using GitHub Codespaces with GitHub Classroom

Codespaces Browser App

If you are using Edge or Chrome you will see an option to install the Codespaces app when you launch your Codespace. The Codespaces app let's you launch your Codespace within the app so you can work outside of the browser. Look for the app icon and install pop-up to try it out.

🔎 Found an issue or have an idea for improvement?

Help us make this template repository better by letting us know and opening an issue!.