microsoft / codespaces-teaching-template-js

Codespaces template for teaching JavaScript

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

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

codespaces-teaching-template-js's Issues

Consider removing collapsable DIVs

For the following reasons:

1. I'm not sure if these are Accessible.
2. It may not be obvious to those with vision that these can be clicked on
3. Expanding them won't add complexity

Spanish localization

Hi all 👋

We need create a Spanish translation and make sure it is working according to the English content.

Main folder: https://github.com/education/codespaces-teaching-js-template

Please compare each file below to its original in English and if required, please send a PR.

File	Status
README.md	pending review

To send the localization, please, create the folder translations/es.

Set project and socila links to open in a new tab

Update the links in the Portfolio and Contact sections to open in a new tab.

cant able to find some files for modification

i am trying to make portfolio using template but i cant able to find some file like imageALTtext, about.jsx, portfolio.jsx where are they? in which folder?

localhost not working

The localhost liveserver is not working for github codespaces. I have troubleshooted by clearing the cache files and also switched to different ports but its not working.
Below I am attaching the error I am receiving.

Explain what extensions are and where to find them

We mention extensions, but let's make it super clear what they are and where we recommend to find them (perhaps link to the marketplace). Just a quick note.

Regarding the topic of switching frameworks

In the section *2. Change to a different frontend Web framework the first section talks about Node.js. This is the first time (I think) that we mention Node. Do we need to? Is it clear why we're doing this? Will the educators be clear?

Immediately after this we show how to switch from React to another framework by removing files. Will they know what files to remove? It might take some further discussion to figure out the best way to do this ... or perhaps for now, we don't show this?

Explain how to use this in a Codespace - Quick Start

I recommend the readme be extended to add a section near the top that shows how to use this repo in a codespaces. perhaps in a section titled Quick Start

For example (summarized, so please be more explicit):

1. Click the "use this template" button
2. Select the repo owner (your GitHub account)
3. Enter a name for your new repo
4. Click the Code button
5. Click Create Codespace on main button

I'll add a PR, in case you want this. Feel free to reject and do your own.

Spanish localization

¡Hola @cyz, traduciré este repositorio y revisaré este contenido!

Adding Codespace as app icon - this is useful for students

There is a now a feature in Edge and Chrome for adding codespaces as app

I would recommend adding this to a section of the readme.

Clarity of Intention

From the readme description, it appears that the intention is to use this repo for lessons

With this JS Codespace template you can immediately create a lesson that provides a consistent starting point for all your students. Allow you as the educator to focus on the web development content you are teaching, and let us handle the environment setup for you.

The naming of the repo implies its for teaching , but would it be clearer if it was for teachers? (if that is the intention). Also, it's not quite clear to me what we mean by "template". Will the educator know?

After walking through this, it feels like this is a sample or example app that can be used to demonstrate Codespaces. Do we have a sense from the educators if "template" resonates with them? Template to me, feels like it is something I take and modify. Not something I use like a "grab and go" example.

While it may seem pedantic, I feel naming is important so we it resonates with the customer.

What do you think?

Azure Static Web & Copilot Student Account

Being a student from a university, we don't get university mail IDs.
In such cases, how can we create a free student account in Azure and Copilot to accomplish the assigned task?!!

Issue in hosting static web app

How to solve this issue

Update project to run npm start on launch

Following the GitHub React sample Codespace ([https://github.com/github/codespaces-react](https://github.com/%5Bgithub/codespaces-react%5D(https://github.com/github/codespaces-react))), start the server (npm start) as a postAttachCommand on the Codespace. Include launch of browser for user to see running project.

Will also need to update readme accordingly to match auto start of server.

Add better styling to new header links

Currently, the links to the sections have the browser default styling (blue color and underlined). Update these to remove the underline, set the font color, and maybe a color change on hover.

Should we focus more on Web and less on React?

React is a great choice here as it has wide appeal. But as you point out, no matter what Web framework we choose, someone will wonder how to use it with their framework ... or even if this is something they can use at all.

I was thinking ... what if we focus on Web (more high level) in the text rather than that it uses React? It's perfectly fine to mention React , and we should. I hypothesize that if we focus on the "Web" aspects (even HTML/JS/CSS) more-so in the text, perhaps more folks will continue exploring and using it (first impressions) than if someone who doesnt use React sees it everywhere in the text and thinks "well, this is not for me".

I'll make a PR for this and see what you think

Enhance the Web App

The web app only has a title. This is very basic, which is great! However with just a title, it may appear that something else should be appearing and is not. Will the customer be lead to think there is something wrong?

I propose adding some text and a simple image to show that it worked. For example, below the title you could add "Built with Codespaces!" and an image of party hats (or something else royalty free).

Dev container updates

Hi there 👋! I'm a PM on the VS Code team working on things like dev containers, and @burkeholland shared this repo and others (https://github.com/microsoft/codespaces-teaching-template-py, https://github.com/microsoft/codespaces-project-template-js, https://github.com/microsoft/codespaces-project-template-py) with me. These look great, and we really appreciate you creating them!

As I was reviewing the dev container configs across these repos, I noticed a few areas to update or optimize to ensure users get the latest and greatest development experience; the areas I mention below apply to this repo along with the others above:

• Update Features syntax: It's awesome you're using Features! It looks like you're using the older syntax for it, so it'd be great to update
  • Example of what these repos used: https://github.com/microsoft/codespaces-teaching-template-js/blob/main/.devcontainer/devcontainer.json#L35
  • Example of updated syntax: https://github.com/devcontainers/images/blob/main/.devcontainer/devcontainer.json#L18
  • The latest Features can be found here: https://github.com/devcontainers/features, and we recently wrote a blog post about using and creating Features: https://code.visualstudio.com/blogs/2022/09/15/dev-container-features
• Reference latest images: As part of work on the open dev container spec (https://containers.dev/), we've moved repos related to dev containers into the devcontainers GitHub org (as you see above with the devcontainers/features repo)
  • We now use https://github.com/devcontainers/images for our images, rather than what's listed in https://github.com/microsoft/vscode-dev-containers
  • As an example, it looks like https://github.com/microsoft/codespaces-teaching-template-js/blob/main/.devcontainer/Dockerfile#L3 and comments like https://github.com/microsoft/codespaces-project-template-py/blob/main/.devcontainer/Dockerfile#L1 reference the old vscode-dev-containers repo
  • The new Node.js image you should use is: https://github.com/devcontainers/images/tree/main/src/javascript-node

Please let me know if you have any questions on the above, or about dev containers or their specification in general. Getting your feedback about our tools and processes is a huge help to our team. Thank you!

Ale

What if you already have a portfolio code ready awaiting posting online? Can I use that instead?

Brazilian Portuguese localization

Hi all 👋

We need create a Brazilian Portuguese translation and make sure it is working according to the English content.

Main folder: https://github.com/education/codespaces-teaching-js-template

Please compare each file below to its original in English and if required, please send a PR.

File	Status
README.md	pending review

To send the localization, please, create the folder translations/pt-BR.

Add details on how to use this a remote devcontainer within VScode

Sara

Would recommend adding to the instructions how to use the repo as dev container image for students and educators when they don't have connectivity to codespaces.

See https://microsoft.sharepoint.com/teams/OneComplianceLearningHub/SitePages/Activating-Inclusion.aspx as an example of the text

Edit readme after removing 'npm run start' from automatic execution

Hi,
After merging Burke's PR, #3, a minor update on the readme instructions is necessary as npm run start is no longer being executed automatically.

Might be worth mentioning to the reader that they would need to manually run the command after npm install completes

Add images and video to Readme

You asked:

What image and/or video content can we include ?

I think this is a great idea. Even something simple like a picture of the Codespaces environment running with the React app. perhaps even open in Codewing?

Something that allows the to visualize would be great.