This is a quick node project template for demoing Codespaces. It is based off of the Azure node sample and Haikus for CodeSpaces by Allison Weins.
-
Generate your repository in your organization, by clicking here.
This will open in a new tab where you can fill out the name and other details
-
Name your repository and continue
An urgent request from your project stakeholders has been sent to you to fix your web app. You need to jump directly into the project and add correct a mistake in the web site that says you're selling 100 lemons in a bag to only 10 lemons in the bag! You need to make the changes and you don't have the local development environment necessary. But not to worry, you know you can use github.dev in the browser to make these changes.
-
Browse to the repository on GitHub at https://github.com/johnpapa/shopping-for-codespaces.
-
Press
.
and the code instantly opens in github.dev, a fast and free lightweight VS Code editor in the browser.You've customized your local VS Code exactly how you like it. The good news is you can bring those customizations to the browser too!
-
Press the
Accounts
icon in the bottom left of the window (the icon that looks like a user profile). -
Select
Turn on Settings Sync
This will bring all of your settings saved to your profile!
-
Select
Sign in and turn on
-
Since this is your first time, you will
replace local
.Notice that your editor is using your settings from your profile! This can be enabled by turning on or off Settings Sync. All of your settings, extensions, and keyboard preferences are available.
Now you want to create your changes in separate branch and generate a new pull request.
-
Press
<F1>
to open the command palette. -
Type and select
Create New Branch
and name itfix/products
-
Press
<ENTER>
and selectSwitch to Branch
andLeave Site
to refresh to the new branch. -
Open the file containing the products in
products.json
. -
Edit the description for lemons to the proper quantity of 10 per bag.
{ "id": 20, "name": "Lemons", "description": "Bag of 10 ripe lemons", "quantity": 1, "imageClass": "fas fa-lemon fa-3x" },
-
Commit the file changes.
While you're editing the
products.json
file you are communicating with your stakeholders to let them know the change is being made. Since you are in there, they ask if you can add a new entry for a new product, hot peppers! Of course you can do this, but you'll feel more confident if you can view the change to verify that it works. You decide it's time to run and debug the app.
-
While in the same branch, open the file containing the products in
products.json
. -
Add the missing product for hot peppers and save the file.
{ "id": 40, "name": "Hot Peppers", "description": "8 oz package of hot peppers", "quantity": 1, "imageClass": "fas fa-pepper-hot fa-3x" }
-
You want to see the application run to make sure the hot peppers are displayed, so you press
<F5>
to open the debugger.You need compute power to run the app and debug it. You can seamlessly transition from github.dev to the full power of compute in the cloud. Let's see how.
-
Press the button
Continue Working On ...
and then selectCreate New CodeSpace
to be transitioned to CodeSpaces.The browser refreshes and you're now working with compute resources which allow you to run, debug, and use the terminal. It even ran
npm install
to prepare your app by installing your dependencies! This is using the default devcontainer for Node.js. You can create a custom devcontainer, by following the link in the terminal comments. But that's for another day, let's debug your app. -
Set a breakpoint in the
index.js
file on the line that renders the products. -
Press
<F5>
to debug the app.CodeSpaces recognizes this as a JavaScript application and prompts you for the debugger profile.
-
Select
Node.js
as the profile and the debugger launches the application. -
CodeSpaces alerts and prompts you to open the browser to see the running web application, so you press the button
Open in Browser
, which launches the app.You hit the breakpoint you set in CodeSpaces. You can now debug your application and inspect and change variables.
-
Remove the breakpoint and let the debugger continue to render the web apge.
You notice your hot peppers have been added! Now you want to show the changes to your stakeholders before your merge to the
main
branch, so they can test it and confirm it works for them. You can do this by making your forwarded ports public.
-
Select the
Ports
tab in the Terminal pane. -
Notice the visibility is set to
private
by default. You will right click and selectPort Visibility
andPublic
Setting the port to public allows your stakeholders to see the app.
-
Now the URL can be shared with your stakeholders.
Your stakeholders review the running app and their pleased ... until they notice that the products are not sorted in the proper ascending order by name. Uh oh! You're going to have to fix that! But you can't remember the exact syntax to sort the JavaScript array. You'll use GitHub Co-Pilot to do this.
-
Stop the debugger.
-
Press
<F1>
to open CodeSpaces' command palette. -
Select
View: Show Extensions
-
Search for
GitHub Copilot
, pressInstall
, and agree to the terms -
Open the file
index.js
and put the cursor directly before therender
code. -
Type
///
to engage with Copilot -
Type
/// sort the products by name in ascending order
, and hit<TAB>
and<ENTER>
to accept each line. -
You're prompted line by line for the code to sort the products. It looks appropriate, so click
<ENTER>
on each line to accept it, until it is complete. -
Comment the old line of code to render the products, now that you have replaced it.
app.get('/', (req, res) => { /// sort by name in ascending order let sortedProducts = products.sort((a, b) => { if (a.name < b.name) { return -1; } if (a.name > b.name) { return 1; } return 0; }); res.render('index', { products: sortedProducts }); // res.render('index', { products }); });
-
Press
<F5>
to debug and selectNode.js
as the profile and the debugger launches the application. -
Open the browser and see your changes worked!
Copilot just helped you write the code to sort the products directly in CodeSpaces in the browser.
- Stop the debugger.
- Commit your changes and push them to the branch.
- Create a new Pull Request.
- Review, approve, and merge the pull request to the
main
branch.