BT

InfoQ Homepage News Microsoft Web Template Studio: Visual Studio Code Extension for Simplifying Web App Creation

Microsoft Web Template Studio: Visual Studio Code Extension for Simplifying Web App Creation

Bookmarks

Last month, Microsoft announced a new version of Web Template Studio (WebTS), a cross-platform extension for Visual Studio Code aimed at simplifying the creation of new web applications. The extension uses "wizards" to assist the developer in the creation of boilerplate code for full-stack web applications, and it includes support for existing frontend and backend frameworks.

Microsoft open-sourced WebTS earlier this year on GitHub, supporting only React.js and Node.js for the frontend and backend (respectively). The new release includes support for other frameworks: Angular (frontend), Vue.js(frontend), and Flask(backend). In addition to these frameworks, WebTS also supports cloud services for storage (Azure Cosmos DB) and hosting (Azure App Service). Both services require an active Azure account.

Image source: https://blogs.windows.com/windowsdeveloper/2019/08/21/growing-web-template-studio/

WebTS is written in TypeScript and React. It can be installed directly from Visual Studio's Marketplace, or manually from the latest GitHub releases. Once this is done, creating a new web application involves the following steps:

  • Running the WebTS project creation command on VS Code (Web Template Studio: Launch)
  • Setting up your project (application name and folder)
  • Choosing your frontend and backend frameworks
  • Selecting pages for your application (up to 20, chosen from different page templates)
  • Choosing storage and hosting services (optional)

The provided page templates include common layouts and patterns such as grid or list. It is worth noting that none of the supported frameworks are available in their latest releases, and it is not possible to select a different framework version other than the one specified by the template. At publication the supported framework versions are:

  • React.js: v16.8.4
  • Angular: v8.0.2
  • Vue.js: v2.6.6
  • Node.js: v10.15.0
  • Flask: v1.0.3

Once the initial setup is complete, the project can be deployed to the web through the command Web Template Studio: Deploy App (in the case it uses one of the cloud services provided by the extension). More information about setting up VS Code, installing the extension, and creating a new web application can be found here.

An interesting aspect of the extension is that it was initially created by interns from Garage, Microsoft's startup-style internship program. This was also noted by the community - as Tmm84 points out on HackerNews:

[WebTS] does simplify the whole get a web service up part of development. The one thing that isn't touted enough on the page is how much this was brought about by interns. I hope those interns get some respect for something this functional and usable.

Web Template Studio is available for Visual Studio Code on all platforms (Version 1.33 or above), and it requires Node.js and yarn as dependencies. More information about the extension can be found here.

Rate this Article

Adoption
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Community comments

  • It's good but !!

    by Umer Qaiser /

    Your message is awaiting moderation. Thank you for participating in the discussion.

    Where's the BLAZOR framework ??????

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

BT

Is your profile up-to-date? Please take a moment to review and update.

Note: If updating/changing your email, a validation request will be sent

Company name:
Company role:
Company size:
Country/Zone:
State/Province/Region:
You will be sent an email to validate the new email address. This pop-up will close itself in a few moments.