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 needs.

🧑‍🏫 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

Click the Use this Template button
Select the repository owner (e.g. your GitHub account or organization)
Enter a unique name for your new repository
Click Create repository from template
Once repository created, click the Code button
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.

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.

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.
Navigate to the main page of the newly created repository.
Under the repository name, use the Code drop-down menu, and in the Codespaces tab, select "Create codespace on main".
Wait as GitHub initializes the Codespace.
When complete you will see your Codespace load with a terminal section at the bottom. Here you will see npm install executing. When complete you will return to the terminal prompt where you can run the web application by executing: npm run start

When the web application is started you will see a prompt telling you it started successfully on port 1234, and you can open that site within your browser:

✨ 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:

Add an extension
Update linter configuration
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::

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"
]

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 wanring 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.

📚 Resources

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 Codesapce 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!.