├── 4-vso ├── create-env-vso-01.png ├── create-plan-vso-01.png ├── create-quickstart-vso-02.png └── README.md ├── 1-vscode-serverless ├── images │ ├── 001.png │ ├── 002.png │ ├── 003.png │ ├── 004.png │ ├── 005.png │ ├── 006.png │ ├── 007.png │ ├── 008.png │ ├── 009.png │ ├── 010.png │ ├── 011.png │ └── AzureFunctionLogo.png ├── REQUIREMENTS.md └── README.md ├── 3-github-actions ├── assets │ ├── button.png │ ├── images │ │ ├── fork-github.png │ │ ├── linux-bash.png │ │ ├── new-action.png │ │ ├── add-html-code.png │ │ ├── add-yaml-file.png │ │ ├── azure-sidebar.png │ │ ├── create-secret.png │ │ ├── python-action.png │ │ ├── debug-tool-bar.png │ │ ├── github-settings.png │ │ ├── open-in-portal.png │ │ ├── remote-indicator.png │ │ ├── create-app-service.png │ │ ├── python-app-action.png │ │ ├── workflow-complete.png │ │ ├── get-publish-profile.png │ │ ├── python-default-site.png │ │ └── reopen-in-container.png │ └── deploy.yml └── README.md ├── 2-windows-oss-terminal-wsl ├── ubuntu.jpg ├── UbuntuMono-R.ttf ├── nodejsmenudropdown.png ├── cleanupWindowsLab.sh ├── REQUIREMENTS.md └── README.md ├── CODE_OF_CONDUCT.md ├── .gitignore ├── LICENSE ├── SECURITY.md └── README.md /4-vso/create-env-vso-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Azure-Samples/azure-javascript-labs/HEAD/4-vso/create-env-vso-01.png -------------------------------------------------------------------------------- /4-vso/create-plan-vso-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Azure-Samples/azure-javascript-labs/HEAD/4-vso/create-plan-vso-01.png -------------------------------------------------------------------------------- /1-vscode-serverless/images/001.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Azure-Samples/azure-javascript-labs/HEAD/1-vscode-serverless/images/001.png -------------------------------------------------------------------------------- /1-vscode-serverless/images/002.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Azure-Samples/azure-javascript-labs/HEAD/1-vscode-serverless/images/002.png -------------------------------------------------------------------------------- /1-vscode-serverless/images/003.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Azure-Samples/azure-javascript-labs/HEAD/1-vscode-serverless/images/003.png -------------------------------------------------------------------------------- /1-vscode-serverless/images/004.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Azure-Samples/azure-javascript-labs/HEAD/1-vscode-serverless/images/004.png -------------------------------------------------------------------------------- /1-vscode-serverless/images/005.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Azure-Samples/azure-javascript-labs/HEAD/1-vscode-serverless/images/005.png -------------------------------------------------------------------------------- /1-vscode-serverless/images/006.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Azure-Samples/azure-javascript-labs/HEAD/1-vscode-serverless/images/006.png -------------------------------------------------------------------------------- /1-vscode-serverless/images/007.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Azure-Samples/azure-javascript-labs/HEAD/1-vscode-serverless/images/007.png -------------------------------------------------------------------------------- /1-vscode-serverless/images/008.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Azure-Samples/azure-javascript-labs/HEAD/1-vscode-serverless/images/008.png -------------------------------------------------------------------------------- /1-vscode-serverless/images/009.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Azure-Samples/azure-javascript-labs/HEAD/1-vscode-serverless/images/009.png -------------------------------------------------------------------------------- /1-vscode-serverless/images/010.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Azure-Samples/azure-javascript-labs/HEAD/1-vscode-serverless/images/010.png -------------------------------------------------------------------------------- /1-vscode-serverless/images/011.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Azure-Samples/azure-javascript-labs/HEAD/1-vscode-serverless/images/011.png -------------------------------------------------------------------------------- /3-github-actions/assets/button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Azure-Samples/azure-javascript-labs/HEAD/3-github-actions/assets/button.png -------------------------------------------------------------------------------- /4-vso/create-quickstart-vso-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Azure-Samples/azure-javascript-labs/HEAD/4-vso/create-quickstart-vso-02.png -------------------------------------------------------------------------------- /2-windows-oss-terminal-wsl/ubuntu.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Azure-Samples/azure-javascript-labs/HEAD/2-windows-oss-terminal-wsl/ubuntu.jpg -------------------------------------------------------------------------------- /2-windows-oss-terminal-wsl/UbuntuMono-R.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Azure-Samples/azure-javascript-labs/HEAD/2-windows-oss-terminal-wsl/UbuntuMono-R.ttf -------------------------------------------------------------------------------- /3-github-actions/assets/images/fork-github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Azure-Samples/azure-javascript-labs/HEAD/3-github-actions/assets/images/fork-github.png -------------------------------------------------------------------------------- /3-github-actions/assets/images/linux-bash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Azure-Samples/azure-javascript-labs/HEAD/3-github-actions/assets/images/linux-bash.png -------------------------------------------------------------------------------- /3-github-actions/assets/images/new-action.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Azure-Samples/azure-javascript-labs/HEAD/3-github-actions/assets/images/new-action.png -------------------------------------------------------------------------------- /1-vscode-serverless/images/AzureFunctionLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Azure-Samples/azure-javascript-labs/HEAD/1-vscode-serverless/images/AzureFunctionLogo.png -------------------------------------------------------------------------------- /3-github-actions/assets/images/add-html-code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Azure-Samples/azure-javascript-labs/HEAD/3-github-actions/assets/images/add-html-code.png -------------------------------------------------------------------------------- /3-github-actions/assets/images/add-yaml-file.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Azure-Samples/azure-javascript-labs/HEAD/3-github-actions/assets/images/add-yaml-file.png -------------------------------------------------------------------------------- /3-github-actions/assets/images/azure-sidebar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Azure-Samples/azure-javascript-labs/HEAD/3-github-actions/assets/images/azure-sidebar.png -------------------------------------------------------------------------------- /3-github-actions/assets/images/create-secret.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Azure-Samples/azure-javascript-labs/HEAD/3-github-actions/assets/images/create-secret.png -------------------------------------------------------------------------------- /3-github-actions/assets/images/python-action.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Azure-Samples/azure-javascript-labs/HEAD/3-github-actions/assets/images/python-action.png -------------------------------------------------------------------------------- /2-windows-oss-terminal-wsl/nodejsmenudropdown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Azure-Samples/azure-javascript-labs/HEAD/2-windows-oss-terminal-wsl/nodejsmenudropdown.png -------------------------------------------------------------------------------- /3-github-actions/assets/images/debug-tool-bar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Azure-Samples/azure-javascript-labs/HEAD/3-github-actions/assets/images/debug-tool-bar.png -------------------------------------------------------------------------------- /3-github-actions/assets/images/github-settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Azure-Samples/azure-javascript-labs/HEAD/3-github-actions/assets/images/github-settings.png -------------------------------------------------------------------------------- /3-github-actions/assets/images/open-in-portal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Azure-Samples/azure-javascript-labs/HEAD/3-github-actions/assets/images/open-in-portal.png -------------------------------------------------------------------------------- /3-github-actions/assets/images/remote-indicator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Azure-Samples/azure-javascript-labs/HEAD/3-github-actions/assets/images/remote-indicator.png -------------------------------------------------------------------------------- /3-github-actions/assets/images/create-app-service.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Azure-Samples/azure-javascript-labs/HEAD/3-github-actions/assets/images/create-app-service.png -------------------------------------------------------------------------------- /3-github-actions/assets/images/python-app-action.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Azure-Samples/azure-javascript-labs/HEAD/3-github-actions/assets/images/python-app-action.png -------------------------------------------------------------------------------- /3-github-actions/assets/images/workflow-complete.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Azure-Samples/azure-javascript-labs/HEAD/3-github-actions/assets/images/workflow-complete.png -------------------------------------------------------------------------------- /3-github-actions/assets/images/get-publish-profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Azure-Samples/azure-javascript-labs/HEAD/3-github-actions/assets/images/get-publish-profile.png -------------------------------------------------------------------------------- /3-github-actions/assets/images/python-default-site.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Azure-Samples/azure-javascript-labs/HEAD/3-github-actions/assets/images/python-default-site.png -------------------------------------------------------------------------------- /3-github-actions/assets/images/reopen-in-container.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Azure-Samples/azure-javascript-labs/HEAD/3-github-actions/assets/images/reopen-in-container.png -------------------------------------------------------------------------------- /3-github-actions/assets/deploy.yml: -------------------------------------------------------------------------------- 1 | - uses: azure/webapps-deploy@v1 2 | with: 3 | app-name: # Replace with your app name 4 | publish-profile: ${{ secrets.WebApp_PublishProfile }} 5 | -------------------------------------------------------------------------------- /2-windows-oss-terminal-wsl/cleanupWindowsLab.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | rm -rf ~/projects/nodejs-shopping-cart/node_modules 3 | rm /mnt/c/Users/oscon/AppData/Local/Packages/Microsoft.WindowsTerminal_8wekyb3d8bbwe/RoamingState/profiles.json 4 | -------------------------------------------------------------------------------- /1-vscode-serverless/REQUIREMENTS.md: -------------------------------------------------------------------------------- 1 | # REQUIREMENTS 2 | 3 | - [Azure Functions Extension](https://code.visualstudio.com/tutorials/functions-extension/getting-started) 4 | - [Node.js](https://nodejs.org/en/download/) 5 | - [Azure Functions Core Tools](https://github.com/Azure/azure-functions-core-tools#installing) (`npm install -g azure-functions-core-tools`) 6 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Microsoft Open Source Code of Conduct 2 | 3 | This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). 4 | 5 | Resources: 6 | 7 | - [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) 8 | - [Microsoft Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) 9 | - Contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with questions or concerns 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (https://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # TypeScript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # next.js build output 61 | .next 62 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) Microsoft Corporation. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE 22 | -------------------------------------------------------------------------------- /2-windows-oss-terminal-wsl/REQUIREMENTS.md: -------------------------------------------------------------------------------- 1 | # REQUIREMENTS 2 | 3 | - Windows Insider build 18917 or higher 4 | - Windows Terminal https://github.com/microsoft/terminal 5 | - git https://git-scm.com/downloads 6 | - VS Code https://github.com/microsoft/vscode 7 | - WSL https://aka.ms/wsl2 8 | - Open optional windows features and select `WSL` and `Virtual Machine Platform`. NOTE: This will require a system reboot 9 | - Ubuntu 18.04 for WSL in the [Microsoft Store](https://www.microsoft.com/en-us/p/ubuntu-1804-lts/9n9tngvndl3q) 10 | - for the lab set the username to "oscon" and password "portland" 11 | - migrate this distro to WSL 2 from a cmd window by runnig `wsl --set-version Ubuntu-18.04 2` 12 | - VS Code Remove Extension for WSL https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl 13 | - NodeJS and NPM: `sudo apt install npm -y` 14 | - In Windows install fonts using Powershell:
15 | - `git clone https://github.com/powerline/fonts.git` 16 | - run `install.ps1 pro*` 17 | - In Ubuntu install the powerline shell:
18 | - `sudo apt install python3 python-pip` 19 | - `pip install powerline-shell` 20 | - In Ubuntu shell install utilities `sudo apt install cmatrix caca-utils htop` 21 | 22 | ### Setup 23 | - From the Ubuntu shell create a projects directory in your HOME (~\projects) and in that directory run `git clone https://github.com/mscraigloewen/nodejs-shopping-cart` 24 | 25 | ### Cleanup 26 | - delete ~\projects\nodejs-shopping-cart\node_modules 27 | - close all running Terminal or Code windows 28 | - delete terminal profile file: 29 | - ```C:\Users\[USERNAME]\AppData\Local\Packages\Microsoft.WindowsTerminal_8wekyb3d8bbwe\RoamingState\profiles.json``` 30 | -------------------------------------------------------------------------------- /4-vso/README.md: -------------------------------------------------------------------------------- 1 | # Using Visual Studio Online 2 | 3 | ## Overview 4 | 5 | Use Visual Studio Online to build, run, and debug a Node.js app from within a browser. In this lab, you'll learn how to create a VS Online environment from an existing GitHub repository and forward a port for local debugging. 6 | 7 | ## 1. Launch Visual Studio Online 8 | 9 | Browse to the [Visual Studio Online](https://online.visualstudio.com/environments). If you're prompted to sign in, contact a proctor to get you signed in. 10 | 11 | ## 2. Create a plan 12 | 13 | A VS Online plan is required to create VS Online environments. In this lab a VS Online plan has been created for you. 14 | 15 | ## 3. Create an Environment 16 | 17 | To create a new cloud-hosted environment in VS Online select the **Create environment** button in the VS Online management portal. 18 | 19 | ![Create environment in Visual Studio Code](./create-env-vso-01.png) 20 | 21 | Complete the form with the following values: 22 | 23 | - **Environment Name**: My Quick Environment 24 | - **Git Repository**: microsoft/vsonline-quickstart 25 | - **Put environment to sleep after...**: 30 minutes 26 | - **Instance Type**: Standard Environment (Linux) 27 | 28 | ![Create environment in Visual Studio Code](./create-quickstart-vso-02.png) 29 | 30 | A card with the name **My Quick Environment** will appear in the management portal with a status badge of **Creating**. 31 | 32 | ## 4. Connect To and Use the Environment 33 | 34 | Once the green **Available** status badge appears on the environment card, click **My Quick Environment** to connect. 35 | 36 | Once connected, open **Readme.md** from **File Explorer**, and then press [`ctrl`]+[`shift`]+[`V`] to render the markdown file. 37 | 38 | Follow the instructions in **Readme.md** to complete the lab. 39 | -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## Security 4 | 5 | Microsoft takes the security of our software products and services seriously, which includes all source code repositories managed through our GitHub organizations, which include [Microsoft](https://github.com/Microsoft), [Azure](https://github.com/Azure), [DotNet](https://github.com/dotnet), [AspNet](https://github.com/aspnet), [Xamarin](https://github.com/xamarin), and [our GitHub organizations](https://opensource.microsoft.com/). 6 | 7 | If you believe you have found a security vulnerability in any Microsoft-owned repository that meets Microsoft's [Microsoft's definition of a security vulnerability](https://docs.microsoft.com/en-us/previous-versions/tn-archive/cc751383(v=technet.10)) of a security vulnerability, please report it to us as described below. 8 | 9 | ## Reporting Security Issues 10 | 11 | **Please do not report security vulnerabilities through public GitHub issues.** 12 | 13 | Instead, please report them to the Microsoft Security Response Center (MSRC) at [https://msrc.microsoft.com/create-report](https://msrc.microsoft.com/create-report). 14 | 15 | If you prefer to submit without logging in, send email to [secure@microsoft.com](mailto:secure@microsoft.com). If possible, encrypt your message with our PGP key; please download it from the the [Microsoft Security Response Center PGP Key page](https://www.microsoft.com/en-us/msrc/pgp-key-msrc). 16 | 17 | You should receive a response within 24 hours. If for some reason you do not, please follow up via email to ensure we received your original message. Additional information can be found at [microsoft.com/msrc](https://www.microsoft.com/msrc). 18 | 19 | Please include the requested information listed below (as much as you can provide) to help us better understand the nature and scope of the possible issue: 20 | 21 | * Type of issue (e.g. buffer overflow, SQL injection, cross-site scripting, etc.) 22 | * Full paths of source file(s) related to the manifestation of the issue 23 | * The location of the affected source code (tag/branch/commit or direct URL) 24 | * Any special configuration required to reproduce the issue 25 | * Step-by-step instructions to reproduce the issue 26 | * Proof-of-concept or exploit code (if possible) 27 | * Impact of the issue, including how an attacker might exploit the issue 28 | 29 | This information will help us triage your report more quickly. 30 | 31 | If you are reporting for a bug bounty, more complete reports can contribute to a higher bounty award. Please visit our [Microsoft Bug Bounty Program](https://microsoft.com/msrc/bounty) page for more details about our active programs. 32 | 33 | ## Preferred Languages 34 | 35 | We prefer all communications to be in English. 36 | 37 | ## Policy 38 | 39 | Microsoft follows the principle of [Coordinated Vulnerability Disclosure](https://www.microsoft.com/en-us/msrc/cvd). 40 | 41 | 42 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | --- 2 | page_type: sample 3 | languages: 4 | - javascript 5 | - nodejs 6 | products: 7 | - azure 8 | description: "A collection of labs demonstrating how to build Node+JS applications with Azure, Visual Studio Code and the Windows Subsystem for Linux (WSL)." 9 | urlFragment: "azure-javascript-labs" 10 | --- 11 | 12 | # Azure JavaScript Labs 13 | 14 | A collection of labs demonstrating how to build Node and JavaScript applications with Azure, Visual Studio Code and the Windows Subsystem for Linux (WSL). 15 | 16 | 23 | 24 | ## Use Azure Functions to build a RESTful API 25 | 26 | Create an Azure Functions serverless API that returns a list of pets to be adopted. In this lab, you will learn how to create a basic REST API using Node.js Azure Functions and add dependencies from npm. 27 | 28 | [Go to lab](1-vscode-serverless/README.md) 29 | 30 | ## Windows for Node.js Developers 31 | 32 | Setup and customize a Windows PC for Open Source development using the Windows Terminal and Windows Subsystem for Linux (WSL). At the end of this lab you'll use VS Code to debug a Node.js project running in WSL. 33 | 34 | [Go to lab](2-windows-oss-terminal-wsl/README.md) 35 | 36 | ## Deploying a Node.js app with GitHub Actions 37 | 38 | Create a web app in the Azure Cloud using the App Service extension in VS Code then configure a GitHub Actions workflow to add CI/CD to your app and get it deployed. In this lab you'll learn how to build, test, and deploy your app to Azure from your GitHub repository. 39 | 40 | [Go to lab](3-github-actions) 41 | 42 | ## Use Visual Studio Online 43 | 44 | Use Visual Studio Online to build, run, and debug a Node.js app from within a browser. In this lab, you'll learn how to create a VS Online environment from an existing GitHub repository and forward a port for local debugging. 45 | 46 | [Go to lab](4-vso) 47 | 48 | ### Contributing 49 | 50 | This project welcomes contributions and suggestions. Most contributions require you to agree to a 51 | Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us 52 | the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com. 53 | 54 | When you submit a pull request, a CLA bot will automatically determine whether you need to provide 55 | a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions 56 | provided by the bot. You will only need to do this once across all repos using our CLA. 57 | 58 | This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). 59 | For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or 60 | contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments. 61 | -------------------------------------------------------------------------------- /1-vscode-serverless/README.md: -------------------------------------------------------------------------------- 1 | # Working With Azure Functions in VS Code and GitHub 2 | 3 | ## Overview 4 | 5 | **Azure Functions** is a Serverless component from Microsoft that allows you to create event-based functions that can be dynamically scaled to meet the demand. We can work with all kinds of events such as when a file is uploaded to storage, a message appears in the queue or a HTTP request is received. 6 | 7 | Using GitHub we can take an existing application, fork it to our account and then create our own version of the application, all from within VS Code. 8 | 9 | ## What's covered in this lab 10 | 11 | In this lab, you will: 12 | 13 | 1. Fork an existing Azure Functions project on GitHub 14 | 2. Learn how to create and merge branches in VS Code 15 | 3. Debug Functions with VS Code 16 | 4. Deploy Functions to Azure from VS Code 17 | 18 | ## Prerequisites 19 | 20 | 1. You'll need VS Code with Azure Functions extension, Node.js and the Azure Functions Core Tools npm module. 21 | 2. You are using a GitHub account and an Azure account made for the purpose of this lab. These have already been logged into your machine and the account info is saved. 22 | 23 | ## Setting up the GitHub repo 24 | 25 | 1. Navigate to the [example app repository](https://github.com/aaronpowell/trivia-api). 26 | 2. Click the "Fork" button in the upper-right hand corner of the repository. 27 | 28 | ![Fork a GitHub repository](./images/001.png) 29 | 30 | 3. From the forked repository, click the green "Clone" button and copy the URL. 31 | 32 | ![Clone repository link](./images/002.png) 33 | 34 | 4. In VS Code open the Command Pallet (Ctrl/Cmd + Shift + P) and type **Git clone**, select the command and paste in the URL copied in step 3 and select a folder on disk to clone to. 35 | 36 | ![Clone a repo with VS Code](./images/003.png) 37 | 38 | ## Running and Debugging with VS Code 39 | 40 | 1. Click "Run and Debug" from the Activity Bar (Ctrl/Cmd + Shift + D) 41 | 42 | ![Run and Debug](./images/004.png) 43 | 44 | 2. Click "Start Debugging" (F5) 45 | 46 | ![Start Debugging](./images/005.png) 47 | 48 | 3. Add a breakpoint to line 4 of `GetAllQuestions/index.js` 49 | 4. Open a browser and navigate to http://localhost:7071/api/GetAllQuestions 50 | 5. Observe the breakpoint being hit in VS Code, then press F5 to continue execution 51 | 52 | ## Create a branch 53 | 54 | 1. Click 'master' in the Status Bar and enter the name for a new branch (e.g.: update-response) 55 | 56 | ![Create a new branch](./images/006.png) 57 | 58 | 2. Edit `GetAllQuestions/index.js` to return the question and possible answers, without indicating the correct answer 59 | 60 | ![Updating API return value](./images/007.png) 61 | 62 | 3. Click "Source Control" from the Activity Bar (Ctrl/Cmd + Shift + G) and enter a commit message for the change 63 | 64 | ![Enter a commit message](./images/008.png) 65 | 66 | ## Update master branch 67 | 68 | 1. Use the Status Bar to navigate back to the 'master' branch 69 | 2. Edit GetAllQuestions/index.js to only return the first 5 questions in the response 70 | 71 | ![Update the code](./images/009.png) 72 | 73 | 3. Click "Source Control" from the Activity Bar (Ctrl/Cmd + Shift + G) and enter a commit message for the change 74 | 4. Open the Command Pallet (Ctrl/Cmd + Shift + P) and select "Git: Merge Branch", selecting your branch from the previous exercise 75 | 5. Select "Accept incoming Changes" in the Merge Conflict window 76 | 77 | ![Accepting changes in a merge conflict](./images/010.png) 78 | 79 | 6. Open the Command Pallet (Ctrl/Cmd + Shift + P) and select "Git: Delete Branch", selecting your branch from the previous exercise 80 | 7. Click "Source Control" from the Activity Bar (Ctrl/Cmd + Shift + G) and commit the merge to the git repo 81 | 8. Open the Command Pallet (Ctrl/Cmd + Shift + P) and select "Git: Push" to publish to GitHub 82 | 83 | ## Deploying to Azure 84 | 85 | 1. Open the Command Pallet (Ctrl/Cmd + Shift + P) and select "Azure Functions: Deploy to Function App" 86 | 87 | ![Open Azure](./images/011.png) 88 | 89 | 2. Follow the wizard providing information along the way for: 90 | 91 | - Select your subscription 92 | - Function App Name (eg: YOUR_NAME-jsghfunctions) 93 | - Node.js runtime (12.x) 94 | - Azure Region (Pick one close to you, e.g.: Australia East) 95 | 96 | 3. It will take a minute or two to create the app. Once it's done, you'll get prompted with the URL of the deployed app, which you can navigate to in the browser 97 | 4. Open up the [Azure Portal](https://portal.azure.com) and navigate to your subscription -> resource group -> Function App to view the deployed app in Azure 98 | 99 | ## Next steps 100 | 101 | Complete our [survey](https://aka.ms/js19) to register your completion! 102 | 103 | If you'd like to try more labs: 104 | 105 | - [Sample app with an Angular front end connected to Azure Functions](https://github.com/fiveisprime/apm) 106 | -------------------------------------------------------------------------------- /2-windows-oss-terminal-wsl/README.md: -------------------------------------------------------------------------------- 1 | # Windows for Open Source Developers 2 | 3 | This project walks you through setting up and customizing a Windows PC for Open Source development. We'll introduce you to Windows Terminal and the Windows Subsystem for Linux (WSL) 2. At the end of this lab you'll use VS Code to debug a NodeJS project running in WSL. 4 | 5 | ## Prerequisites 6 | 7 | If you are **not** at an event, please see [REQUIREMENTS](REQUIREMENTS.md) to install the prerequisites for this lab. 8 | 9 | ## Configure the Windows Terminal 10 | 11 | ### PROFILES 12 | 13 | Open Windows Terminal (found in taskbar). Press **Ctrl+,** to edit the settings file (or use the Terminal menu and select "settings") 14 | 15 | Scroll down to `"profiles"`. Insert the profile below after the first `[`:
16 | ```json 17 | { 18 | "guid" : "{c6eaf9f4-56a1-5fdc-b5cf-066e8a4b1e40}", 19 | "acrylicOpacity" : 0.5, 20 | "closeOnExit" : true, 21 | "colorScheme" : "Campbell", 22 | "commandline" : "wsl.exe -d Ubuntu-18.04", 23 | "cursorColor" : "#FFFFFF", 24 | "cursorShape" : "bar", 25 | "fontFace" : "Cascadia Code", 26 | "fontSize" : 12, 27 | "historySize" : 9001, 28 | "icon" : "ms-appx:///ProfileIcons/{9acb9455-ca41-5af7-950f-6bca1bc9722f}.png", 29 | "name" : "My Node+JS Profile", 30 | "padding" : "4, 2, 4, 2", 31 | "snapOnInput" : true, 32 | "useAcrylic" : false 33 | 34 | }, 35 | ``` 36 | Save the changes. **Ctrl+S** 37 | 38 | On the Windows Terminal, select the down arrow next to the plus(+) sign as shown in this image. In the drop down, select: `My Node+JS Profile`. 39 | 40 | ![drop down menu](./nodejsmenudropdown.png) 41 | 42 | This profile will open an Ubuntu 18 bash shell. 43 | 44 | Feel free to change any of the profile settings and the Terminal will automatically reload with your changes as you make them. 45 | 46 | ### POWERLINE FONT 47 | Next change your terminal profile to use a Powerline font. Pick one of the following: 48 | 49 | `"fontFace" : "Space Mono for Powerline",`
50 | `"fontFace" : "Noto Mono for Powerline",`
51 | `"fontFace" : "ProFont for Powerline",`
52 | 53 | Save the changes. **Ctrl+S** 54 | 55 | ### POWERLINE SHELL 56 | With the fonts installed, you can install the PowerLine shell in Ubuntu. We've downloaded the powerline-shell for you so all you need to do is add an entry to the .bashrc. 57 | 58 | Open Windows File Explorer. 59 | In the Address bar enter `\\wsl$\Ubuntu-18.04\home\jsinteractive` 60 | Edit (Double-click) .bashrc -> Opens in VS Code 61 | Add the following: 62 | 63 | ```bash 64 | function _update_ps1() { 65 | PS1=$(powerline-shell $?) 66 | } 67 | 68 | if [[ $TERM != linux && ! $PROMPT_COMMAND =~ _update_ps1 ]]; then 69 | PROMPT_COMMAND="_update_ps1; $PROMPT_COMMAND" 70 | fi 71 | ``` 72 | Save the changes using **Ctrl+S**, close the WSL tab and reopen it to see the changes. 73 | 74 | ## TMUX 75 | 76 | To have multiple panes within our Ubuntu 18 shell we can use Tmux. Here's how: 77 | 81 | 1. Open the Ubuntu 18 shell. 82 | 2. Start a new tmux session by typing `tmux` and pressing enter. 83 | 3. Add panes using the following: 84 | - Press **CTRL+B** and then **"** to split the screen vertically 85 | - Press **CTRL+B** and then **%** to split the screen horizontally 86 | - Use **CTRL+B** and then the arrow keys to navigate between the screens 87 | - Use whatever mix and match of cool apps you'd like here. I recommend using `htop` in the top Window, `cmatrix` on the bottom left and `cacafire` 88 | - To quit a window press **CTRL+B** and then **x** and then press **y** to accept 89 | - Quit all windows to exit the tmux session 90 | 91 | ## Run a Node Project in WSL 92 | 93 | In the Terminal using your Node+JS profile, navigate to 94 | `~\projects\` 95 | 1. run `cd node-shopping-cart` 96 | 2. run `npm install` 97 | 3. run `npm start` 98 | 4. Use a web browser to open to see the site is working. You are now running the Linux version of NodeJS locally on Windows via WSL. 99 | 100 | ### Debug the Node Project with VS Code 101 | 1. While still in the Node+JS profile in Terminal, close the previous running instance of NodeJS if you haven't already. We're now going to start the same project using VS Code. 102 | 2. Navigate to the '`\projects\nodejs-shopping-cart` directory and type `code .` to open the project in VS Code. 103 | 3. This opens VS Code on Windows with a feature to debug the NodeJS project running in WSL. 104 | 4. In VS Code you can run the debugger and use breakpoints. You're using a Windows code editor/debugger for a project running the Linux NodeJS. Pretty cool! 105 | 106 | ## Customize Windows Terminal 107 | 108 | Let's make the Node+JS profile look more like Ubuntu. Using your Node+JS profile, update the properties below in the JSON. As you update your profile, the Terminal will automatically reflect your changes. 109 | 1. Set `"useAcrylic" : false,` 110 | 2. Set `"fontFace" : "Ubuntu Mono",` 111 | 3. Set `"fontSize" : 14,` 112 | 4. Set `"colorScheme" : "One Half Dark",` 113 | 5. Set `"cursorShape" : "filledBox",` 114 | 6. Add `"backgroundImage" : "ms-appdata:///roaming/ubuntu.jpg",` 115 | 7. Add `"backgroundImageOpacity" : 0.8,` 116 | 8. Add `"tabTitle" : "Ubuntu 18.04",` 117 | 9. Add `"suppressApplicationTitle" : true` 118 | 119 | After adding these changes, your profile should look like this: 120 | ```json 121 | { 122 | "guid" : "{c6eaf9f4-56a1-5fdc-b5cf-066e8a4b1e40}", 123 | "acrylicOpacity" : 0.5, 124 | "closeOnExit" : true, 125 | "colorScheme" : "One Half Dark", 126 | "commandline" : "wsl.exe -d Ubuntu-18.04", 127 | "cursorColor" : "#FFFFFF", 128 | "cursorShape" : "filledBox", 129 | "fontFace" : "Ubuntu Mono", 130 | "fontSize" : 14, 131 | "historySize" : 9001, 132 | "icon" : "ms-appx:///ProfileIcons/{9acb9455-ca41-5af7-950f-6bca1bc9722f}.png", 133 | "name" : "My Node+JS Profile", 134 | "padding" : "4, 2, 4, 2", 135 | "snapOnInput" : true, 136 | "useAcrylic" : false, 137 | "backgroundImage" : "ms-appdata:///roaming/ubuntu.jpg", 138 | "backgroundImageOpacity" : 0.8, 139 | "tabTitle" : "Ubuntu 18.04", 140 | "suppressApplicationTitle" : true 141 | }, 142 | ``` 143 | 144 | Documentation for the settings in the profiles.json file can be found here: https://github.com/microsoft/terminal/blob/master/doc/cascadia/SettingsSchema.md 145 | 146 | ### Thank you 147 | 148 | Thank you for trying out Windows Terminal and WSL. Complete our [survey](https://aka.ms/js19) to register your completion! 149 | 150 | To learn more, please check out the following resources. 151 | - https://aka.ms/learnwsl 152 | - https://github.com/microsoft/terminal 153 | - https://code.visualstudio.com/docs/remote/wsl 154 | -------------------------------------------------------------------------------- /3-github-actions/README.md: -------------------------------------------------------------------------------- 1 | # Deploying a Node.js Web App using GitHub Actions 2 | 3 | ## Overview 4 | 5 | **GitHub Actions** gives you the flexibility to build an automated software development lifecycle workflow. You can write individual tasks ("Actions") and combine them to create a custom workflow. Workflows are configurable automated processes that you can set up in your repository to build, test, package, release, or deploy any project on GitHub. 6 | 7 | With **GitHub Actions** you can build end-to-end continuous integration (CI) and continuous deployment (CD) capabilities directly in your repository. 8 | 9 | ### What’s covered in this lab 10 | 11 | In this lab, you will: 12 | 13 | 1. Create a web app on Azure using the App Service extension 14 | 1. Create a workflow with GitHub Actions to add CI/CD to your app 15 | 16 | ### Prerequisites 17 | 18 | 1. Your Windows machine should have Node.js LTS and Visual Studio Code. 19 | 20 | 1. You are using a GitHub account and an Azure account made for the purposes of this lab. These have been already logged into from your machine and the account info is saved. 21 | 22 | ### Setting up the GitHub repo 23 | 24 | 1. Navigate to the [example app repository](https://github.com/fiveisprime/Useful-Website). 25 | 26 | 1. Click the "Fork" button in the upper-right hand corner of the repository. From there, click the green "Clone" button and copy the URL. 27 | 28 | ![](assets/images/fork-github.png) 29 | 30 | ## Create an Azure App Service web app 31 | 32 | Create the App Service web app that you'l deploy to from GitHub. 33 | 34 | 1. Click on the Azure icon in the sidebar. 35 | 36 | ![](assets/images/azure-sidebar.png) 37 | 38 | 1) Click on the `+` icon to create a new app service under the **VSCode GitHub Universe HOL** subscription. 39 | 40 | ![](assets/images/create-app-service.png) 41 | 42 | 1. Give your webapp a unique name (we recommend calling it **YOUR_NAME-jsinteractive** ) 43 | 44 | 1. Select **Linux** as your OS and **Node.js LTS** as your runtime. 45 | 46 | 1. It will take a minute or two to create the app. Once it's done, you'll get a prompt to browse to your new site. Click on "View output" and open the link to your site. 47 | 48 | > Note: If creation of the app is taking a bit longer than you expect, call one of the proctors and we'll switch you to an already created app 49 | 50 | 1. The page you browse to will be the default site you see, since you haven't yet deployed anything to the site. 51 | 52 | ![](assets/images/python-default-site.png) 53 | 54 | ## Set up CI/CD with GitHub Actions 55 | 56 | Use GitHub actions to automate the deployment workflow for this web app. 57 | 58 | 1. Inside the App Service extension, right click on the name of your app service and choose "Open in Portal". 59 | 60 | ![](assets/images/open-in-portal.png) 61 | 62 | 1. From the Overview page, click on "Get publish profile". A publish profile is a kind of deployment credential, useful when you don't own the Azure subscription. 63 | 64 | ![](assets/images/get-publish-profile.png) 65 | 66 | 1. Open the settings file you just downloaded in VS Code and copy the contents of the file. 67 | 68 | 1. Add the publish profile as a secret associated with this repo. On the GitHub repository, click on the "Settings" tab. 69 | 70 | ![](assets/images/github-settings.png) 71 | 72 | 1) Go to "Secrets". Create a new secret and call it "AZURE_WEBAPP_PUBLISH_PROFILE". Paste the contents from the settings file. 73 | 74 | ![](assets/images/create-secret.png) 75 | 76 | 1. Navigate to the Actions tab in the repo to find the **Deploy Node.js to Azure Web App** template and select "Set up this workflow". 77 | 78 | ![](assets/images/new-action.png) 79 | 80 | 1. Update the `env` object, set `AZURE_WEBAPP_NAME` to the name of your app. 81 | 82 | 83 | ```yml 84 | env: 85 | AZURE_WEBAPP_NAME: YOUR_NAME-jsinteractive 86 | ``` 87 | 88 | ![](assets/images/add-yaml-file.png) 89 | 90 | 1. Once you're done, click on "Start commit". Fill in the text box with a commit message, and then click the "Commit change" button, which will trigger the workflow. 91 | 92 | 1. While the Action is being queued, let's get into the details of what this workflow is actually doing. Go to the `.github/workflows/azure.yml` file to follow along. 93 | 94 | - **Workflow Triggers (line 11)**: Your workflow is set up to run on "push" events to the branch 95 | 96 | ```yaml 97 | on: 98 | push: 99 | branches: 100 | - master 101 | ``` 102 | 103 | For more information, see [Events that trigger workflows](https://help.github.com/articles/events-that-trigger-workflows). 104 | 105 | - **Running your jobs on hosted runners (line 21):** GitHub Actions provides hosted runners for Linux, Windows, and macOS. We specify the hosted runner in our workflow as below. 106 | 107 | ```yaml 108 | jobs: 109 | build-and-deploy: 110 | name: Build and Deploy 111 | runs-on: ubuntu-latest 112 | ``` 113 | 114 | - **Using an action (line 26)**: Actions are reusable units of code that can be built and distributed by anyone on GitHub. To use an action, you must specify the repository that contains the action. We are also specifying the version of Node.js. 115 | 116 | ```yaml 117 | - uses: actions/checkout@master 118 | - name: Use Node.js ${{ env.NODE_VERSION }} 119 | uses: actions/setup-node@v1 120 | with: 121 | node-version: ${{ env.NODE_VERSION }} 122 | ``` 123 | 124 | - **Running a command (line 31)**: You can run commands on the job's virtual machine. This action is running the npm commands below to install the dependencies, build the application, and run the tests. 125 | 126 | ```yaml 127 | - name: npm install, build, and test 128 | run: | 129 | # Build and test the project, then 130 | # deploy to Azure Web App. 131 | npm install 132 | npm run build --if-present 133 | npm run test --if-present 134 | ``` 135 | 136 | > For workflow syntax for GitHub Actions see [here](https://help.github.com/en/github/automating-your-workflow-with-github-actions/workflow-syntax-for-github-actions) 137 | 138 | 1. You can go back to the Actions tab, click on your workflow, and see that the workflow is queued or being deployed. Wait for the job to complete successfully before going back to your website. 139 | 140 | ![](assets/images/workflow-complete.png) 141 | 142 | ## Test out your app! 143 | 144 | 1. Back in VS Code, go to the App Service extension, and right click on your app service and click on "Browse Website" to see your site running. 145 | 146 | 1. Switch back to GitHub to test the GitHub Actions workflow you just made. Edit `views/index.hbs` using the GitHub editor and add the following lines of code on line 11 147 | 148 | ```html 149 |
150 |

Press the button!

151 |

152 | ``` 153 | 154 | ![](assets/images/add-html-code.png) 155 | 156 | 1) Go back to the Actions tab and you can watch the build finishing up. Once you see all the green check marks, go to Edge and reload your website! 157 | --------------------------------------------------------------------------------