Skip to content

Latest commit

 

History

History
80 lines (53 loc) · 4.07 KB

getting-started-developers.md

File metadata and controls

80 lines (53 loc) · 4.07 KB
Raw

Getting started with the Codebase

Prerequisites

  1. Install Node.js
  2. Install Gulp
  3. Install Git
  4. Install .NET Core SDK
  5. Install Visual Studio Code
  6. Install Yarn. You will need to finish installing Node.js before you install Yarn.
  7. 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).

Note: If using Windows, use Git Bash.

Running the Extension

  1. Clone the repository with git clone https://github.com/microsoft/WebTemplateStudio.git or git clone [email protected]:microsoft/WebTemplateStudio.git.
  2. The repository depends on another submodule called CoreTemplateStudio. To copy dependent code from submodule, run:
  git submodule init
  git submodule update
  1. Run ./build. This script compiles the client and builds the extension.
  2. Open the src/extension folder using VSCode.
  3. Start the debugger by pressing F5. This should open the Extension Development Host in a new Visual Studio Code window.
  4. In the Extension Development Host, press Ctrl + Shift + P on Windows/Linux or Command ⌘ + Shift + P to open the Command Palette.
  5. In the Command Palette, type Web Template Studio: Launch and press Enter to launch the extension. Make sure that you don't have the Web Template Studio from the marketplace installed, otherwise it will throw an error.

Developing the Client

The client lives in the src/client directory. To run the client for development, navigate to src/client and use the command

yarn start

to begin development in the browser. We recommend using a chromium based browser such as Chrome.

The client was bootstrapped using Create-React-App with TypeScript.

Creating VSIX Package

Note: You cannot sideload the VSIX and build/run the extension through Extension Development Host (using F5 on VSCode) at the same time or there will be naming conflicts. The VSIX should be uninstalled first.

The installation script createVsix will build the extension package (.vsix) for you.

./createVsix

The script will package the extension into the root directory /dist folder. The vsix package can be distributed and installed by anyone who has VSCode using the command in the extension directory:

code --install-extension [extensionName].vsix

webts-0.0.0-UNTRACKEDVERSION.vsix is the default extensionName.

Alternatively, copy the extension into your extensions directory. For Windows, it is %USERPROFILE%\.vscode\extensions. For Mac/Linux, it is ~/.vscode/extensions (By Default).

After installation, use ctrl+shift+p (Windows) or cmd+shift+p (Mac) to open the Extension Launcher and select Web Template Studio: Launch to run the extension.

Running the client in the VSCode Extension

To see any changes made on the client within VSCode, run the instructions shown in the Running the extension section to rebuild the client and the extension. The resulting changes should appear in VSCode when the extension runs.

Rebuilding the client is required because the client is injected into a VSCode Webview using the production build of the client.

Under the Hood

The following notes are inspired by the vscode-webview-react repository by rebornix:

  • We inline index.html content in src/extension/src/extension.ts when creating the webview
  • 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.