- [Core Template Studio Submodule](#core-template-studio-submodule)
- [How to run the extension locally](#how-to-run-the-extension-locally)
- [How to develop the client](#how-to-develop-the-client)
- [Troubleshooting](#troubleshooting)
- [How to build a local vsix](#how-to-build-a-local-vsix)
- [Tests](#tests)
- [Under the hood](#under-the-hood)
- [Folder overview](#folder-overview)
Before starting make sure you read the [Web Template Studio arquitecture](application-architecture.md) document.
@ -29,15 +31,16 @@ If you just want to take advantage from *Web Template Studio* extension, check t
1. Run the command `npm config set scripts-prepend-node-path true`. This tells VSCode which Node version to run during the extension compilation (otherwise you'll get an error during the build process).
### For a react native application
1. You have to check the following [dependencies](https://microsoft.github.io/react-native-windows/docs/rnw-dependencies).
You have to check the following [dependencies](https://microsoft.github.io/react-native-windows/docs/rnw-dependencies).
In the Wizard you have a link on the right-side bar, to show a modal with the System Requirements.
In the Wizard you have a link on the right-side bar, to show a modal with the System Requirements. If any of them is missing you will see a warning.
<imgalt="React Native System Requirements"src="../resources/react-native-requirements.png"width="85%"/>
If you are running `WebTS` in Mac/Linux you will see a different message, notifying you that the generated native Windows application cannot be run.
**Note**: If using Windows, use Git Bash.
<imgalt="React Native System Requirements"src="../resources/react-native-requirements.png"width="85%"/>
At some point you may also need to install [React-scripts](https://yarnpkg.com/package/react-scripts) and [Typescript](https://www.typescriptlang.org/).
**Note**: When developing in `WebTS` you may also need to install [React-scripts](https://yarnpkg.com/package/react-scripts) and [Typescript](https://www.typescriptlang.org/).
## Project folder structure
@ -155,10 +158,14 @@ After installation, use `Ctrl + Shift ⇧ + P` (Windows/Linux) or `Command ⌘ +
You can check available commands [here](./contributing/application-architecture.md#extension).
### Possible problems and workarounds to fix them
1. You may get some errors on the output console for the extension: `webtemplatestudio-{env}`, or maybe you realise that there´s missing information displayed on the screen.
For example, no Frameworks at all for the `Create Web App` command. Make sure you have the proper versions of the .mstx for the templates in the extension folder - as mentioned above, for *Windows* would be `%USERPROFILE%\.vscode\extensions\wasteamaccount.webtemplatestudio-{environment}-{version}\src\corets-cli` or in *Mac/Linux*`~/.vscode/extensions/wasteamaccount.webtemplatestudio-{environment}-{version}/src/corets-cli`.
You may get some errors on the output console for the extension: `webtemplatestudio-{env}`, or maybe you realise that there´s missing information displayed on the screen.
For example, no Frameworks at all for the `Create Web App` command. Make sure you have the proper versions of the `.mstx` for the templates in the extension folder - as mentioned above, for *Windows* would be `%USERPROFILE%\.vscode\extensions\wasteamaccount.webtemplatestudio-{environment}-{version}\src\corets-cli` or in *Mac/Linux*`~/.vscode/extensions/wasteamaccount.webtemplatestudio-{environment}-{version}/src/corets-cli`.
If that´s not the case, and you have an older version, or you´re missing some package of templates, then you will need to retrieve them from the generated .vsix in the [Build Pipeline](https://winappstudio.visualstudio.com/Vegas). Also will need to update the `Allowed Packages` with the .mstx hashes in the file `CoreTemplateStudio.config` within the proper folder depending on the OS you are working (*win21* for instance, when developing on *Windows* for example).
If that´s not the case, and you have an older version, or you´re missing some package of templates, then you will need to retrieve them from the generated `.vsix`.
1. You can follow [the following instructions](https://github.com/microsoft/CoreTemplateStudio/wiki/Tools:-WTS-Packaging-Tool) to create the package.
2. If you have permissions, you can download the `.vsix` from the *Build Pipeline*.
**Note**: You will also need to update the `Allowed Packages` with the `.mstx` hashes in the file `CoreTemplateStudio.config` within the proper folder depending on the OS you are working (*win32* for instance, when developing on *Windows* for example).
<imgalt="Install extension from .vsix"src="../resources/vscode-output-window-errors.png"width="500px"/>
<imgalt="Folder where you can find the .mstx for the templates"src="../resources/extension-folder-mstx.png"width="400px"/>
@ -194,6 +201,46 @@ repository by [rebornix](https://github.com/rebornix):
- For all resources going to the webview, their scheme is `vscode-resource`
- We add a baseUrl `<base href="${vscode.Uri.file(path.join(this._extensionPath, 'build')).with({ scheme: 'vscode-resource' })}/">` and then all relative paths work.
## Troubleshooting
You may encounter some issues when using or developing in WebTS. It could be due to folder permissions, missing to create the Template packages,... Find below a list of folders that you may be interested in visiting and removing if this happens to you.
- You need permissions to write on the local `WebTS` folder, where you can find the `Logs` and `Templates` folders.
- Web Template Studio may be missing execute permissions on the `corets-cli` folder, can check full path on the table below, where the Core Template Studio CLI is located.
- The template cache is located in the `.templateengine` folder. Template caches are isolated by environment.
**Note**: If you clean or remove the corets-cli folder, you should make sure that you re run the build-all.sh script. Otherwise, if you removed the Templates or the Template Cache, you need to Launch the `Web Template Studio` wizard again.
**Warning**: When you are debugging the application, a shortcut to the `Templates` folder of your code is used. Mind that everything you modified there, will be changed on the **local repository**.
## Useful folders
To make it easier for you to see which folder is used on the different OS, we added a summary table below:
| Environment | Description | Folder |
| ----------- | ------ | ----------- |
| `Windows` | Core Template Studio CLI | `%userprofile%\.vscode\extensions\wasteamaccount.webtemplatestudio-[environment]-[version]\src\corets-cli\` |
@ -37,14 +37,14 @@ This folder will contain all the necessary frontend and backend files for the de
*Web Template Studio* will then automatically launch the command `Azure App Service: Deploy to Web App...`, which will be in charge of deploying the application to an *Azure App Service*.
- If you have added an *Azure App Service* when creating your application with *Web Template Studio*, the application already has a deployment configuration, so it will use the created *Azure App Service*.
- If you have added an *Azure App Service* when creating your application with *Web Template Studio*, the application already has a deployment configuration, so it will use the created *Azure App Service*.
- Otherwise, the *Azure App Service* extension will ask you for the configuration settings to create a new *Azure App Service*:
- The folder that contains the app to deploy to the App Service. Select the `publish` folder for deployment to be successful.
- Select `Create New Web App...`
- Enter your web app name
- Select Linux as your OS
- Select Node.js 12 LTS for a Node/Express application, Python 3.7 for a Flask application or .Net Core Latest runtime for ASP .NET application.
- Otherwise, the *Azure App Service* extension will ask you for the configuration settings to create a new *Azure App Service*:
- The folder that contains the app to deploy to the App Service. Select the `publish` folder for deployment to be successful.
- Select `Create New Web App...`
- Enter your web app name
- Select Linux as your OS
- Select Node.js 12 LTS for a Node/Express application, Python 3.7 for a Flask application or .Net Core Latest runtime for ASP .NET application.
Start the application deployment to *Azure App Service*. We can see the progress of the deployment in the output of the *Azure App Service* extension.
Judith de la Fuente
GitHub