Extend and use for your Web Development lessons in minutes.
With this JavaScript Codespace template you can immediately create a normalized environment to teach or learn web development. This enables you to focus on the web development content you are teaching, and let Codespaces handle the environment setup for you.
- Who is this for? Educators of all levels, and those looking for a great template to build a web app.
- 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.
A Codespace is a development environment that's hosted in the cloud that you can configure.
- 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
- Repeatable environment offering a zero-config experience.
- Runs in the cloud.
- Can be configured and customized.
- Integrates with your repositories on GitHub.
You can customize your project for GitHub Codespaces by committing configuration files to your repository (often known as Configuration-as-Code), which creates a repeatable Codespace configuration for all users 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
💡 Learn more here, docs.github.com/en/codespaces/customizing-your-codespace/personalizing-github-codespaces-for-your-account
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
andpackage-lock.json
: Define the project information for Node.js, dependent packages and the versions needed of each.
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.
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:
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
- Change to a different frontend web framework
- Update the version of Node.js
💡 Learn more here, docs.github.com/en/codespaces/customizing-your-codespace/personalizing-github-codespaces-for-your-account
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.
At the core of this template app is Node.js. On top of a Node.js base app you can utilize multiple Web frameworks to create an Express backend application.
To get started customizing for your needs:
- Open the repository you created from this template in Codespaces.
- Remove the packages listed in
dependencies
anddevDependencies
frompackage.json
that you will not be using. - In the terminal within your Codespace, run
npm install
to clear the removed packages. - You can now install the packages for the project needed for your lesson through the recommended paths provided through the framework documentation.
Once you have your updates packages you will then need to:
- Update/Remove the source files referencing React.
- Update the ESLint configuration to match your desired Web framework.
- Update any Prettier configuration, if required.
In some cases, the initialization of a new framework may overwrite existing /src
files, not a problem. The Codespace is set to run npm install
on start. As long as those are still valid for your framework Codespace will continue to work as expected.
If running npm install
in the root of your Codespace are no longer valid, open /.devcontainer/devcontainer.json
and update the postCreateCommand
for what you require for your updated framework and application.
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.
- GitHub Codespaces docs overview
- GitHub Codespaces docs quickstart
- Use dev containers locally with VS Code and Docker
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.
Help us make this template repository better by letting us know and opening an issue!.