Hackathon Guide
User Manual:
Open the PDF directly: View PDF .
Page Count: 66
Download | |
Open PDF In Browser | View PDF |
1. Pre-requisites This lab assumes you have the Google Chrome browser installed and available for debugging. If you do not have Chrome installed, go to https://www.google.com/chrome/browser/ Download and run the latest Git for Windows installer, which includes the Git Credential Manager for Windows. Make sure to leave the Git Credential Manager installation option enabled when prompted. Note: When you connect to a VSTS Git repository from your Git client for the first time, the credential manager prompts for your Microsoft Account or Azure Active Directory credentials. If your account has multi-factor authentication enabled, you are prompted to go through that experience as well. Download Azure CLI here: https://docs.microsoft.com/en-us/cli/azure/install-azure-cliwindows?view=azure-cli-latest Download Visual Studio Code from http://visualstudio.com Install Docker from https://docs.docker.com/install/ Note: Make sure you install Docker “Edge” for windows, not the “Stable” release. This guide has been verified against the following Docker version: 2. Create a Project in VSTS 1. Create a new instance of Visual Studio Team Services by navigating to http://visualstudio.com 2. Click on “New Project” in VSTS. 3. Enter Project Name, Description, Version control, and Work item process and click Create. 4. Select “or initialize with a readme or gitignore”. 5. Add a .gitignore file by selecting “Node”, 6. Click Initialize. Note: Readme file is used to give a brief introduction of the project and gitignore file is used to ignore tracking of files such as temp files and build results. 3. Open Visual Studio Code 1. Install Extensions by Selecting View Extensions and typing “javascript” Recommended extensions to install: Angular 5 and TypeScript/HTML VS Code Snippets Angular 5 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout ESLint JavaScript (ES6) code snippets npm IntelliSense Debugger for Chrome Visual Studio Team Services Docker Docker Explorer Nginx.Conf Nginx.Conf Hint Apache conf Apache Conf Snippets 2. Launch Git Bash or use Windows Command line to execute the following commands to create our repository directory: 3. Open your VSTS project in your browser 4. Click on Clone in the upper right-hand corner 5. Generate Git Credentials: 6. Then enter a new password and click Save Git Credentials: 7. Copy the git repository url as follows: 8. Clone the repository from the bash shell you opened earlier as follows: Git clone9. Enter your credentials you setup in previous steps 10. After successful login you should see: 4. Write some code… Not quite, we are just going to use an existing code base from GitHub and download the latest copy of the source to update our local repo. 1. Open the browser and navigate to https://github.com/jonsamwell/angular-simpleshopping-cart 2. Download code as follows: 3. Extract the contents of the “angular-simple-shopping-cart-master” folder within the zip file to c:\shoppingcartdemo\demo Note: answer “replace” when duplicate files found. 4. Now we are going to add untracked files and commit our changes to our local repository, but before we can do that we have to tell Git who we are by issuing the two following commands: git config --global user.email "you@outlook.com" git config --global user.name "Your Name" 5. Add untracked files as follows: cd \Demo git add -A 6. Commit Changes: git commit -a -m “Initial Revision” 7. Push repository to VSTS into Master branch by executing the following command (no Screenshot): Git push –repo i.e. git push –repo https://mtctor.visualstudio.com/_git/Demo 8. And Voila! You can now see your repository pushed up into VSTS: 5. Setup VSTS integration using the new auth experience 1. Open VSCode and Select File->Open folder: “C:\shoppingcartdemo\Demo” 2. Watch this step by step video on how to setup the new Authentication experience. https://youtu.be/HnDNdm1WCIo?t=2m55s 6. Let’s Build something… 1. Once you have Cached your credentials using the new authentication experience, ensure all dependencies are current by running “npm install” in the VS Code terminal window 2. Run a local instance of the app to see how it runs by running “npm start” in the vscode terminal: 3. Your app is compiled and running under a node web server, but we need to add a launch file so we can launch a debugger window using Chrome. We do so by creating a new configuration file by selecting the “DebugAdd Configuration” menu item and selecting “Chrome” from the drop down. 4. We need to ensure the new launch.json file is pointing to the correct url. Node will automatically assign a random port on your computer to host your angular application on and you can get this url from the previous step where you ran “NPM Start”: Note: With the above url , you are going to update the launch.json file and specifically update the “url” property of the Chrome configuration as such: 5. Now click on DebugStart debugging 6. Try some breakpoints and debugging techniques… 7. Check in your additional file “Launch.json” using the VSCODE IDE now: Add Files to local repository (Stage) 8. Commit Changes to local Repository 9. Push Changes from local repository to VSTS 10. Build Complete… 7. Setting Up Work Item Check-in and Build Configuration 1. Go to VSTS dashboard and create a task. We will associate this task with check-in. 2. Assign a task to a resource (Yourself in this case), enter description, set priority, and specify effort. Click Save and Close. When user saves, unique task number is assigned to each task. Go back to VSCODE, make changes to the launch.json file and associate the work item while committing the code. 3. Make the code change by appending “on port 4200” as shown below: 4. Add Change (Stage) 5. Commit Change by Associating work item: 6. Select Work Item task: 7. Commit Change with a message ”Added port ” 8. Push Change to VSTS. 9. When we go to task board in VSTS, we can see development history associated with this item. Check out here: 8. Deploy to Azure App Services We will need to add a web.config file to instruct our underlying web server on Azure to rewrite all incoming request to serve our index.html file. 1. Create a new file named web.config in src\app\ by right-clicking on src\app folder and selecting ‘New File’ 2. Add the following contents to the web.config: 3. Modify the /gulpfile.js as follows to remove the code that modifies the index.html element. Note: The original developer added this code, but it is no longer needed as you can leverage angular CLI to modify this directly. Also, we have added a copy process to deploy the web.config to the distribution folder: var gulp = require('gulp'); var replace = require('gulp-replace'); var htmlmin = require('gulp-htmlmin'); gulp.task('js:minify', function () { gulp.src(["./dist/main.*.js", "./dist/polyfills.*.js", "./dist/inline.*.js"]) .pipe(replace(/\/\*([\s\S]*?)\*\/[\s\S]?/g, "")) .pipe(gulp.dest("./dist")); }); gulp.task('web:config', function () { gulp.src(["./src/app/web.config"]) .pipe(gulp.dest("./dist")); }); gulp.task("html:minify", function () { return gulp.src('dist/*.html') .pipe(htmlmin({ collapseWhitespace: true })) .pipe(gulp.dest('./dist')); }); gulp.task("default", ["js:minify", "html:minify", "web:config"]); 9. Create the Azure App Service The next step is to create an Azure Web App which will host our Angular application. You can sign up for a free or paid account and log in the Azure portal. 1. New -> Web and Mobile -> Web App 2. Fill in the web app details as such: 3. Then Click "Create". 10. Linking your VSTS account to your Azure subscription Next, you need to link your VSTS account to your Azure subscription (see also this post on this topic). To do this, go to the Azure Portal… 1. Click More Services (image says 'Browse' but that was the old name) and search for 'Team': 2. Now select the relevant Team Services account, click Link button at the top, and then the Link button in the other blade: And you're done! You will now be able to set up continuous deploying to your git repos hosted in VSTS. 11. Setting Up CI Pipeline With VSTS In the next steps we will set up our VSTS CI/CD pipeline to push the Angular application to the newly created Azure Web App. Start by creating a new build definition under VSTS: 1. Build and Release -> Builds -> New 2. Add an npm task to install the npm packages required by the Angular application 3. Add another npm task to build the application and create the dist folder: 4. Add a publish artifact task that generates the dist artifact which will be provided later on as an input to our release definition: 12. Setting Up CD Pipeline With VSTS The last step is to add a CD pipeline which will deploy the artifacts created by the build to the Azure Web App. In this demo I am keeping the release pipeline simple by deploying the artifacts directly to production. In a real life application you will probably create multiple environments before releasing to production (Development, QA, Staging, etc.): The production environment includes a single task that deploys the Angular application to an Azure Web App: That's it! You now have a fully functional CI/CD pipeline that will deploy your Angular application to an Azure Web App (Windows based) the next time you check in your code. Up Next: Retrieve Products from a Cosmos DB Backend 13. Cosmos DB - Replacing Static Products Back End 1. 2. Create Cosmos DB Account, Database, and Collection a. In the Azure Portal click on “New Resource” then type Cosmos DB in the search bar. Press “Enter”. Click the search result titled “Cosmos DB”. Click “Create” on the next page. b. For ID, choose an ID for the Cosmos DB account. Choose “SQL” as the account type. Resource group and Location depend on existing deployment configuration. Choose whatever settings make sense. Click create. c. Click the “Add Collection” button. Choose a database title and specify “Products” as the collection name. Choose “Fixed” for storage capacity. Choose “/id” as the partition key. Set the throughput to 1000 (the minimum) RU. Click OK. Import Data a. Download and locally extract the contents of: https://cosmosdbportalstorage.blob.core.windows.net/datamigrationtool/2018.02. 28-1.8.1/dt-1.8.1.zip b. Download and store locally: https://github.com/Microsoft/MTC_EnterpriseSPADev/blob/master/src/assets/pr oducts.json c. Run the dtui executable in the extracted archive. d. Click next in the tool e. Click add files, then select the file above step “products.json”. Click next. f. In the Azure Portal, select your cosmos DB. It can be found in the resource group in which it was created. Click on it. Then click “Keys” under settings. 3. g. Copy and paste the “Primary Connection String” value into Notepad. Add a “;” to the end if one isn’t present. Add “Database= ” to the connection string in Notepad. Copy the whole string. h. Paste the complete connection string into the connection string field in dtui. i. Put Products into the collection field in dtui. The partition key and id field should both be “/id”. Click next. j. k. Click next until the import completes. In the Azure Portal, click on your cosmos db (per 13.2.6), then “Data Explorer”, then select your collection, then click “Documents”. You should see 5 documents with GUID id’s. Create Azure Function App a. Follow the instructions in the section titled “Build a function in Visual Studio 2017” from https://docs.microsoft.com/en-us/azure/cosmos-db/tutorial-functions-httptrigger#publish-the-azure-function Deviations from the preceding guide are as follows: - Use “CosmosFunctions” as the project name in step 1. - For step 2b, use “Microsoft.Azure.DocumentDB” instead of the default of “Microsoft.Azure.Graphs”. - For step 3, use “ProductFunction” as the function title. using using using using using using using using using using using using b. Replace the code in “ProductFunction.cs” with the code below. Change < > to the URI of your Cosmos DB from the Cosmos DB account overview page. Change < > to the primary key from the Keys tab. c. NOTE: In a production setting, be sure to externalize these values. System.Linq; System.Net; System.Net.Http; System.Threading.Tasks; Microsoft.Azure.WebJobs; Microsoft.Azure.WebJobs.Extensions.Http; Microsoft.Azure.WebJobs.Host; Microsoft.Azure.Documents.Client; System; System.Collections.Generic; Newtonsoft.Json; System.Text; namespace CosmosFunction { public static class ProductFunction { [FunctionName("ProductFunction")] public static async Task Run([HttpTrigger(AuthorizationLevel.Anonymous, "get", "post", Route = null) ]HttpRequestMessage req, TraceWriter log) { log.Info("C# HTTP trigger function processed a request."); DocumentClient client = new DocumentClient(new Uri("< >"), "< >"); IQueryable query = client.CreateDocumentQuery(UriFactory.CreateDocumentCollectionUri("< >", "Products"), "select * from c"); List
Source Exif Data:
File Type : PDF File Type Extension : pdf MIME Type : application/pdf PDF Version : 1.7 Linearized : No Page Count : 66 Language : en-CA Tagged PDF : Yes XMP Toolkit : 3.1-701 Producer : Microsoft® Word 2016 Creator : Mark Franco Creator Tool : Microsoft® Word 2016 Create Date : 2018:04:12 14:04:14-04:00 Modify Date : 2018:04:12 14:04:14-04:00 Document ID : uuid:EDB71418-5846-4C6C-8C55-CAB2C5E8A0C5 Instance ID : uuid:EDB71418-5846-4C6C-8C55-CAB2C5E8A0C5 Author : Mark FrancoEXIF Metadata provided by EXIF.tools