Microsoft waves the wizard wand, emits the Web Template Studio
It looks like you're trying to build a full-stack web app in Visual Studio Code. Would you like some help with that?
Microsoft has flung out an early toolset aimed at getting full-stack web applications up and running faster for Visual Studio Code users.
The tech, named the Microsoft Web Template Studio, takes the form of a wizard which, after a few questions, will leave developers with enough to bootstrap their cloud-based app rather than having to put the things together manually.
So long as you use the frameworks and cloud resources that Microsoft thinks are appropriate, of course. In this case React and Node.js with Azure naturally providing cloud services in the form of Functions and Cosmos DB.
The gang is keen to stress, however, this is very much a work in progress and are looking for feedback on what the VS Code community reckons it really needs.
Yes, you can find it on GitHub. This is the new Microsoft after all.
Although still very much a work in progress, we took it for a spin to see how much time the thing would save if one was willing to slip into the wizardy straitjacket. The answer? Quite a bit.
Adding the extension to VS Code is a matter of a quick trip to the marketplace once dependencies have been set up. You'll need the Yarn package manager installed as well as Node.js on your system before the action can begin. A swift
ctrl-shift P to fire the thing up and yet another take from Redmond on what a setup wizard should look like is eventually barfed onto the screen.
A few clicks through, and the first of the limitations arrives – the page to select project type has only one choice: Full Stack. The team is looking into single page and RESTful applications in the future, but for now it's a bit of a placeholder, awaiting more flexible days.
Next up is Frameworks, which has React selected for the front-end and Node.js for the back-end. It's another vaguely pointless page unless the user has enabled the preview mode, in which case the daring can switch React out for Angular. Otherwise it's information only.
One of the neat features of the Web Template Studio also puts in an appearance, with a list of licences used by the application thus far, as well as version information.
As with the rest of the Web Template Studio, a developer could work this out for themselves, but it's a convenient nice-to-have.
The first bit of proper interactivity comes with selecting from the four page types added so far by Microsoft. There's the regulation blank page, a master details layout and common patterns in the form of a grid and list. Devs can fill their boots here, simply entering a name for each.
Finally, there is the Azure page. Until the user has signed into Azure, the options for Functions and Cosmos DB are disabled. Except they aren't – we gleefully clicked on one and the Template Studio fell flat on its face. We'll forgive it for that – it is extremely early code after all.
Once you're signed in, attempting to create a Resource Group for Functions will fling you into the Azure Portal, but otherwise things are pretty well integrated, although the Web Template Studio is all about deploying to Azure rather than reusing existing cloudy bits and pieces at this stage. For Cosmos DB, only the SQL or MongoDB API can be selected right now.
Having reviewed the licences, and allowed the tool to do its stuff (unsurprisingly it is a lot quicker to generate the VS Code files than to deploy to Azure), the boilerplate project is ready for action, replete with readable code, Microsoft's take on best practices and a
README.md file to get started.
If it all sounds familiar, it should do. Microsoft tried something similar with the Windows Template Studio for UWP apps.
It is still very early days for the Web Template Studio, and promises of more project types and frameworks, such as Vue, in the pipeline make the tool an enticing prospect for some lunchtime tinkering at the very least. ®