Update Readme for WEBTS Repository (#1082)

* update readme

* update screenshot for readme

* typo

* remove the old screenshot from the repository

* change instruction to instructions

README.md

@@ -32,17 +32,26 @@ Visual Studio Code extensions are currently not signed. WebTS provides the Secur
 
 To verify the integrity of the package, download the vsix from the Marketplace, calculate the hash of the package using the powershell command ‘Get-FileHash’ or any other tool that allows you to calculate the packages hash, and compare both.
 
-## Instruction To Use
+## Instructions To Use
+
+### Create a new project
 
 - Open **VSCode**
-- Press `ctrl+shift+p` in Windows/Linux or `⇧⌘P` in Mac to open VSCode's extension launcher
+- Press `Ctrl + Shift + P` in Windows/Linux or `Shift ⇧ + Command ⌘ + P` in Mac to open VSCode's extension launcher
 - Type/Select `Web Template Studio: Launch` and press `Enter` to launch the extension
 
+### Deploy the generated project
+
+- Open **VSCode**
+- Open the generated project
+- Press `Ctrl + Shift + P` in Windows/Linux or `Shift ⇧ + Command ⌘ + P` in Mac to open VSCode's extension launcher
+- Type/Select `Web Template Studio: Deploy App` and press `Enter` to begin the deployment
+
 ## Example Scenario
 
-I need a full-stack web app that stores data in a Cosmos database.
+I need a full-stack web app that is deployed on Azure App Service Web App.
 
-![Readme-app-screenshot](./docs/resources/readme-app-screenshot.png)
+![Readme-app-azure-screenshot](./docs/resources/readme-app-azure-screenshot.png)
 
 ## Features
 
@@ -50,7 +59,7 @@ Web Template Studio approaches full-stack web app creation using the following t
 
 - **Frameworks**: First, which frameworks do you want to use for your frontend and backend? We currently support three frameworks for frontend: _[React](https://reactjs.org/)_, _[Angular](https://angular.io/)_, _[Vue.js](https://vuejs.org/)_ and two frameworks for backend: _[Node](https://nodejs.org/en/)_, _[Flask](http://flask.pocoo.org/)_. We also provide a dependency checker to make sure you have the required version of Node and/or Python installed.
 - **App pages**: Next, to accelerate app creation, we provide a number of app page templates that you can use to add common UI pages into your new app. The current page templates include: _blank page_, common layouts (*e.g., master detail) and pages that implement common patterns (*e.g., grid, list). Using the wizard, add as many of the pages as you need, providing a name for each one, and we'll generate them for you.
-- **Cloud Services**: Lastly, you specify which Azure cloud services you want to use, and we'll build out the framework for the services into your app including tagging 'TODO' items. Currently supported services cover storage (_Azure Cosmos DB_), and compute (_Azure Functions_).
+- **Cloud Services**: Lastly, you specify which Azure cloud services you want to use, and we'll build out the framework for the services into your app. Currently supported services cover storage (_Azure Cosmos DB_), and hosting (_Azure App Service_).
 
 Once you make the selections you want and click generate, you can quickly extend the generated code.
 

src/extension/README.md

@@ -7,19 +7,28 @@ The resulting web application is well-formed, readable code that incorporates cl
 Azure while implementing proven patterns and best practices. Sprinkled throughout the generated code we have links to
 Docs to provide useful insights.
 
-## Instruction To Use
+## Instructions To Use
+
+### Create a new project
 
 - Open **VSCode**
-- Press `ctrl+shift+p` in Windows/Linux or `⇧⌘P` in Mac to open VSCode's extension launcher
+- Press `Ctrl + Shift + P` in Windows/Linux or `Shift ⇧ + Command ⌘ + P` in Mac to open VSCode's extension launcher
 - Type/Select `Web Template Studio: Launch` and press `Enter` to launch the extension
 
+### Deploy the generated project
+
+- Open **VSCode**
+- Open the generated project
+- Press `Ctrl + Shift + P` in Windows/Linux or `Shift ⇧ + Command ⌘ + P` in Mac to open VSCode's extension launcher
+- Type/Select `Web Template Studio: Deploy App` and press `Enter` to begin the deployment
+
 ## Features
 
 Web Template Studio approaches full-stack web app creation using the following three attribute sets:
 
 - **Frameworks**: First, which frameworks do you want to use for your frontend and backend? We currently support three frameworks for frontend: _[React](https://reactjs.org/)_, _[Angular](https://angular.io/)_, _[Vue.js](https://vuejs.org/)_ and two frameworks for backend: _[Node](https://nodejs.org/en/)_, _[Flask](http://flask.pocoo.org/)_. We also provide a dependency checker to make sure you have the required version of Node and/or Python installed.
 - **App pages**: Next, to accelerate app creation, we provide a number of app page templates that you can use to add common UI pages into your new app. The current page templates include: _blank page_, common layouts (*e.g., master detail) and pages that implement common patterns (*e.g., grid, list). Using the wizard, add as many of the pages as you need, providing a name for each one, and we'll generate them for you.
-- **Cloud Services**: Lastly, you specify which Azure cloud services you want to use, and we'll build out the framework for the services into your app including tagging 'TODO' items. Currently supported services cover storage (_Azure Cosmos DB_), and compute (_Azure Functions_).
+- **Cloud Services**: Lastly, you specify which Azure cloud services you want to use, and we'll build out the framework for the services into your app. Currently supported services cover storage (_Azure Cosmos DB_), and hosting (_Azure App Service_).
 
 Once you make the selections you want and click generate, you can quickly extend the generated code.