Merge pull request #1820 from microsoft/prupipho-patch-1

Update getting-started-developers.md
This commit is contained in:
David Gómez 2021-06-02 12:05:13 +02:00 коммит произвёл GitHub
Родитель e505180ace 89e76aaaba
Коммит 317ce7a3ae
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: 4AEE18F83AFDEB23
2 изменённых файлов: 17 добавлений и 6 удалений

Просмотреть файл

@ -6,12 +6,16 @@ This section outlines the main concepts and definitions used in *Web Template St
*Web Template Studio* is divided in the following main elements:
- **Extension**: Refers to the Visual Studio Code Extension project, which, once installed, allows users to have an improved experience when creating a new Web Application from the `Web Template Studio: [command name]` command. The extension is written in typescript.
- **Extension**: Refers to the Visual Studio Code Extension project, which, once installed, allows users to have an improved experience when creating a new Web or React Native Application. The extension is written in typescript.
The extension is started by using the the `Web Template Studio: [command name]` command. Currently available commands are:
- Web Template Studio: Create Web App
- Web Template Studio: Create React Native App
- Web Template Studio: Deploy Web App
Can check available commands [here](./contributing/application-architecture.md#extension).
- **Wizard**: Refers to the WebTS client project, where all user interaction occurs after launching *Web Template Studio*. The Wizard guides the user through some steps to create the desired project. It allows the user to select from the available frameworks, pages and Azure Cloud Services. The wizard is created with React Typescript and is displayed through the React Panel.
- **Core Template Studio and Core Template Studio CLI**: Refers to the .NET Core executable that handles all of the template synchronization and code generation (composition, generation + postaction execution). The CLI is the entry point for executing commands on Core Template Studio executable. CoreTS CLI is a self-contained .NET Core 3.1 application.
- **Template**: A template contains code with metadata. The metadata will contain the following template information: name, description, licensing, remarks, programming language, type, etc. The template definition is based on [dotnet Template Engine](https://github.com/dotnet/templating). [More details on templates](./contributing/templates.md)
- **Template**: A template contains code with metadata. The metadata will contain the following template information: name, description, licensing, remarks, programming language, type, etc. The template definition is based on [dotnet Template Engine](https://github.com/dotnet/templating). For more details templates see [Understanding the Templates](./contributing/templates.md)
## Other Terminology

Просмотреть файл

@ -95,7 +95,11 @@ Core Template Studio is integrated into *Web Template Studio* using a git submod
When you clone *Web Template Studio* you have to run two commands: `git submodule init` and `git submodule update` to fetch all the data from Core Template Studio. When fetching changes, also execute `git submodule update` after doing git fetch to be sure you're submodule is up to date.
### Update with remote changes
Changes on Core Template Studio should be done on the Core Template Studio repos. In WebTS, to update the submodule to the most recent commit, you have to run the command: `git submodule update --remote`.
Changes on Core Template Studio should be done on the Core Template Studio repos. In WebTS, to update the submodule to the most recent commit, you have to run the command: `git submodule update --remote`.
This will require a new `git submodule update` on other local repositories to get the update.
For more info visit the [official documentation](https://git-scm.com/docs/git-submodule).
## How to run the extension locally
1. Run `./build-all.sh` from the `_build` folder. This script installs dependencies and compiles the client and core template studio and copies it to the extension. It also builds and installs the extension.
@ -120,9 +124,12 @@ Changes on Core Template Studio should be done on the Core Template Studio repos
As the client is injected as a static web app in the webview of the extension, debugging inside the extension can be challenging. Running the client in a browser is useful for quickly testing HTML or CSS changes and for debugging since you can use **Chrome extensions** such as `React and Redux developer tools`.
When running in the browser, communication with the extension is done against the mock `mockVsCodeApi.ts` in the `mockData` folder. Note that the behaviour of the client on the browser may differ from the behaviour in the extension, so make sure to test out both.
Styles are mocked in the Browser using the file [`mockThemes.css`](../../src/client/src/css/mockThemes.css).
1. Run `./build-client.sh` from the _build folder.
To choose what platform you want to debug, you can modify `mockConfig.ts` in the `mockData`folder.
1. Run `./build-client.sh` from the `_build` folder. Or you can use the command `yarn build` if you are on the `client` folder already.
2. Open the `src/client` folder using `VSCode`.
3. Start the client using `yarn start` to begin development in the browser. We recommend using a chromium based browser such as Chrome.
@ -132,7 +139,7 @@ Styles are mocked in the Browser using the file [`mockThemes.css`](../../src/cli
### To debug from Visual Studio Code:
Install [Debugger for Chrome extension](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) in Visual Studio Code debug Wizard Client.
After starting the client using `yarn start` in VSCode Debug View (`Ctrl + Shift ⇧ + D` (Windows/Linux) or `Shift ⇧ + Command ⌘ + D` (Mac) in Visual Studio Code) select "*Debug WebTS Client*" and start debugging (`F5`).
After starting the client using `yarn start` in VSCode Debug View (`Ctrl + Shift ⇧ + D` (Windows/Linux) or `Shift ⇧ + Command ⌘ + D` (Mac) in Visual Studio Code) select "*Debug WebTS Client*" and start debugging (you can directly press: `F5`).
#### More info:
- [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)