Live demo using Angular, github.dev, codespaces, copilot, azure static web apps, and devcontainers

Overview

One More Change! @ NgConf 2022

This is a quick project template for demoing github.dev, Codespaces, Copilot, Azure Static Web Apps, and Visual Studio Code.

Top Features

  • Start quickly with github.dev: a fast, free and lightweight VS Code editor in the browser
  • Enjoy git integration to create branches and pull requests
  • Continue working on Codespaces to build, run and debug
  • Share your running app by forwarding ports
  • Extend your code with GitHub Copilot
  • Deploy your app to Azure Static Web Apps

Setup

Before presenting this demo, be sure to create your own repository from the template, following these instructions:

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

  2. Name your repository and continue

Demo Story

Just One More Change ... It's a familiar story ...

You just received an urgent request from your project stakeholders to fix the web app. You need to jump directly into the project and correct a mistake where the site is selling a bag of a 1000 lemons when it's only supposed to be 10 per bag!

Compounding the urgency, you need to make the changes and you don't have the local development environment with Node.js and all of the required project dependencies. Not to worry though as you know you can use github.dev in the browser to make these changes.

Existing App

Adding the product in github.dev

  1. Browse to the repository on GitHub at https://github.com/johnpapa/ngconf-2022.

  2. Press . and the code instantly opens in github.dev, a fast and free lightweight VS Code editor in the browser.

    github.dev

    Now you want to create your changes in separate branch and generate a new pull request.

  3. Press <F1> to open the command palette.

  4. Type and select Create New Branch and name it fix/products

  5. Press <ENTER> and select Switch to Branch and Leave Site to refresh to the new branch.

  6. Open the file containing the products in product-data.js.

  7. Edit the description for lemons to the proper quantity of 10 per bag.

       "description": "Bag of 1000 ripe lemons",

    to

       "description": "Bag of 10 ripe lemons",
  8. This is a simple change so you're comfortable to commit the file changes.

Transition to Codespaces to build and run

While you're editing the product-data.js file you are communicating with your stakeholders to let them know the change is being made. Since you're 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 build, run and view the app to verify that it works.

  1. While in the same branch, open the file containing the products in product-data.js.

  2. Add the missing product for hot peppers and save the file.

     {
       id: 40,
       name: 'Hot Peppers',
       description: '8 oz package of hot peppers',
       quantity: 711,
       imageClass: 'fas fa-pepper-hot fa-3x'
     }
  3. Now commit these changes.

  4. You want to see the application run to make sure the hot peppers are displayed, so you open press F1 and enter the command View: Open Terminal intending to build and run the app. Uh oh, there is no terminal!

    So far we've been working entirely with the files in the browser. But now 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.

  5. Press the button Continue Working On ... and then select Create 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 all with the environment you need in the cloud. It even ran npm install to install your dependencies!

    Note: You're 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.

    create codespace
  6. Now let's run our Angular app with npm run start and our API with npm run local.

  7. Select the Ports tab in the Terminal pane.

  8. Our app is running on port 4280. Click the globe icon to browse to it. We're now building, running, and browsing to our app entirely in the browser in the cloud!

Forward your ports publicly to your stakeholders to view them

  1. Select the Ports tab in the Terminal pane.

  2. Notice the visibility is set to private by default. You will right click and select Port Visibility and Public

    Setting the port to public allows your stakeholders to see the app from the URL.

    make the port public
  3. Now the URL can be shared with your stakeholders.

    Your stakeholders review the running app and they're quite 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. Maybe GitHub Copilot can help you do this.

Sort the products using the help of Copilot

  1. Press <F1> to open Codespaces' command palette.

  2. Select View: Show Extensions

  3. Search for GitHub Copilot, press Install, and agree to the terms

  4. Open the file api/products-get/index.js and put the cursor directly after the code gets the products.

  5. Type // to engage with Copilot

  6. Type // sort the products by name in ascending order, and hit <TAB> and <ENTER> to accept each line.

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

  8. Comment the old line of code to render the products, now that you have replaced it.

    const data = require('../shared/product-data');
    
    module.exports = async function (context, req) {
      try {
        const products = data.getProducts();
        // sort the products by name in ascending order
        products.sort((a, b) => {
          if (a.name < b.name) {
            return -1;
          }
          if (a.name > b.name) {
            return 1;
          }
          return 0;
        });
    
        context.res.status(200).json(products);
      } catch (error) {
        context.res.status(500).send(error);
      }
    };
  9. Open the browser tab, refresh, and see your changes worked!

    Copilot just helped you write the code to sort the products directly in Codespaces in the browser.

    final app

Merge your changes

  1. Stop your app (in the terminals).
  2. Commit your changes and push them to the branch.
  3. Create a new Pull Request.
  4. Review, approve, and merge the pull request to the main branch.

Optional - Deploy to Azure Static Web Apps

Open the Codespace in your local install of VS Code

  1. Click the Codespaces icon in the bottom left

  2. Choose Open in VS Code

  3. Accept the confirmation dialogs

Now you are using VS Code locally to develop with your codespace!

Recap

Let's look back at what we were able to accomplish, all without having the local dev environment. You can edit files, create a new branch, and merge a PR all from github.dev in the browser. Then when you need a robust dev invironment to run your application, you can continue working on it in Codespaces. Here you can debug it and use tools like GitHub Copilot to help write the code your app needs, all from within the browser.

You might also like...

Copilot completion for ddc.vim

ddc-copilot Copilot completion for ddc.vim NOTE: It is experimental source. Required copilot.vim https://github.com/github/copilot.vim denops.vim http

Oct 27, 2022

Gofiber with NextJS Static HTML is a small Go program to showcase for bundling a static HTML export of a Next.js app

Gofiber and NextJS Static HTML Gofiber with NextJS Static HTML is a small Go program to showcase for bundling a static HTML export of a Next.js app. R

Jan 22, 2022

Jumpstart Your Static Web Apps Learning Journey with #30Days Of Content and Activities

30DaysOfSWA - A Learning Journey Welcome to #30DaysOfSWA - a project to give beginners and experienced developers a tour of Azure Static Web Apps from

Nov 23, 2022

The app helps you to add todo items to your list, mark completed ones and also delete finished items. Its a handy tool for your day today activies. Check out the live demo.

The app helps you to add todo items to your list, mark completed ones and also delete finished items. Its a handy tool for your day today activies. Check out the live demo.

Todo List App The app helps you to add todo items to your list, mark completed ones and also delete finished items. Its a handy tool for your day toda

Apr 22, 2022

Team-8 E-Commerce Project for egFWD & Sprints industry exposure program You can check the live demo Here

Team-8 E-Commerce Project Team-8 E-Commerce Project for egFWD & Sprints industry exposure program You can check the live demo Here Table of Contents P

Jun 16, 2022

Nftix-demo-ui - Demo UI used in my NFT course on Egghead.io

NFTix Demo UI This repository contains the UI used for my Egghead course on building a NFT ticketing system šŸ„š šŸ¤“ If you're watching the videos, use t

Dec 17, 2022

A cypress plugin for projects using @azure/msal-browser

A cypress plugin for projects using @azure/msal-browser

A cypress plugin for projects using @azure/msal-browser

Aug 11, 2022

Demo running web assembly apps a terminal with blocking stdin/stdout/stderr

Python wasm-terminal Live version here: https://wasm-terminal.firebaseapp.com/ This is a small demo of running Python in the browser with a focus on i

Nov 16, 2022

Cross platform UI controls for progressive web and hybrid apps (plain JS, jQuery, Angular and React)

Cross platform UI controls for progressive web and hybrid apps (plain JS, jQuery, Angular and React)

Mobiscroll What is Mobiscroll? Mobiscroll is a UI library for progressive webapps and hybrid development. Created with a lot of attention to usability

Dec 31, 2022
Comments
  • feat: Add Playwright Test

    feat: Add Playwright Test

    1. Config file specifies baseURL for hosted server
    2. Test specification file configured for 2 simple tests (title, #items)
    3. npm script updated to run Playwright test by default
    opened by nitya 0
Owner
John Papa
Winter is Coming
John Papa
JavaScript Express.js app serving static vanilla JS. This sample app is used in Microsoft Docs to demonstrate how to integrate Azure Storage, Azure Cosmos DB, and Azure Active Directory.

JavaScript on Azure Learn Path - Module 2 - Deploying a basic app to Azure This Learn module requires the following Azure resources to deploy correctl

Azure Samples 13 Dec 31, 2022
Chat app using Azure Web PubSub, Static Web Apps and other Azure services

Chatr - Azure Web PubSub Sample App This is a demonstration & sample application designed to be a simple multi-user web based chat system. It provides

Ben Coleman 55 Dec 31, 2022
Vamos a realizar un juego muy sencillo en TypeScript, posteriormente lo vamos a desplegar en Microsoft Azure con Servicio de Azure Static Web Apps.

Taller TypeScript DescripciĆ³n Vamos a realizar un juego muy sencillo en TypeScript, posteriormente lo vamos a desplegar en Microsoft Azure con Servici

Manuel Ortiz 7 Oct 10, 2022
A alternative to Github Copilot for vscode until you get the access to github copilot

Clara-Copilot ?? Code Howdy ?? I know you guys are ?? waiting for Github Copilot Here is a alternative one for now ?? ā­ Star is all i want nothing muc

BadBoy17G 245 Jan 8, 2023
A cache for @azure/msal-node that uses Azure KeyVault as a store

@intility/msal-keyvault-cache A cache for @azure/msal-node that uses Azure KeyVault as a store. Usage Install with npm install @intility/msal-keyvault

Intility 10 Mar 17, 2022
LunaSec - Open Source Security Software built by Security Engineers. Scan your dependencies for Log4Shell, or add Data Tokenization to prevent data leaks. Try our live Tokenizer demo: https://app.lunasec.dev

Our Software We're a team of Security Engineers on a mission to make awesome Open Source Application Security tooling. It all lives in this repo. Here

LunaSec 1.2k Jan 7, 2023
Our project for The Microsoft Azure Trial Hackathon on Dev.to

Moodflix your mood, our suggestions. ?? About Overview of our project We have started this project with the purpose of participating to the Microsoft

Emanuele Bartolesi 37 Dec 22, 2022
A nonsensical React application made (almost) entirely by GitHub Copilot

GitHub Copilot Demo This is a demo project for the GitHub Copilot project. The previous sentence was written by it! This is a (fairly ugly) timer app

Cassidy Williams 32 May 1, 2022
Create deployment files and configure GitHub Actions workflows to deploy applications to Azure Kubernetes Service (AKS).

Azure Kubernetes Service (AKS) DevX (Developer experience) Extension for Visual Studio Code (Preview) The AKS DevX extension for Visual Studio Code (P

Microsoft Azure 11 Oct 1, 2022
A small logging proxy server for intercepting and logging code completion requests from copilot.

PilotWatch PilotWatch is a small logging proxy server written in node.js for intercepting and logging code completion requests from Github's Copilot.

John Robinson 7 May 8, 2023