Microsoft Web Template Studio for Visual Studio Code

Git Hub: https://github.com/Microsoft/WebTemplateStudio/

Introduction and Background

Microsoft has been gaining my attention for the past few months. I’m really impressed by the way they are growing as a company. As we all know everybody is now moving towards open source platforms. When it comes to hosting solutions, people who use the modern technological stack prefer using open source Linux operating system instead of a Windows-based solution. But at the same time, we still have respect for Microsoft because it has been a great company offering so many good products for us.

Microsoft has been one of the greatest software providers for the past few decades. We have no doubt about it. Even though the cost of some of the products is very high, they are one of the best products in the market. Some people use the pirated version of the software especially when it comes to home use. But even for that, the company introduced a HUP – Home User Program for the corporate employees to make it cheaper and convenient for them.

Source

These are some of the factors that makes me have a great opinion about Microsoft and it also makes me think that the company is growing very much in spite of having competition from the Open source communities that are already present in the market. A few days back I read an article online about an announcement from Microsoft saying that they have now released Microsoft web templates as open source. As it is a full stack web template, I wanted to give it a try and write an article on that.

Installation and Setup

The source code of Web Template studio is available open on GitHub. If you want to get an idea of how it is built, you can visit and take a look at the code. The installation and setup are also very simple if we do it from the IDE itself. For the installation and Setup, there are different options available.

  • From the extensions section/marketplace in Visual studio code.
  • Node
  • Yarn

I used the extensions section in VS Code editor. But I couldn’t successfully download it. I don’t know what was the reason but I received a pop-up message saying I can install with a different option. I then switched to manual download.

After downloading them and installing the extension, I launched the application with the shortcut command `Ctrl+Shift+P` and entered Web Template Studio. After we launch the Studio, we get a neat wizard that helps in setting up the project.

The wizard was very helpful. I had to just enter the details and follow the steps in the wizard. After I completed all the steps, the Template Generation status was complete.

The good thing about the wizard was that it was able to provide a full stack web development template with front-end, backend and database components. The template studio currently supports React and Node.js along with Express and Azure Cosmos DB for the backend which is what most of the full stack developers use nowadays.

After the template components were generated, I went and had a look at the files that were created. Especially I was curious to check the server part and I was surprised to see that the code was really neat along with routes file as Express is also included in this template. The react components were also automatically created. I went and had a look at that as well. I was able to compare this template creation tool with the `ng init` command that I usually use for my angular applications. I’ve decided to use Web Template Studio for my next react project with Node.js as my server-side code.

There are also different types of page templates available in this templating tool. We can either create a blank application and build everything from scratch or use any of the paging templates to define the structure of the application. In order to launch the application, you can use yarn install the command to install the dependent modules and then you can use yarn start to start your application.

Upcoming features

I guess the development team has already done a great job in providing an easy templating feature that anyone can use to build their full stack application. In the road map, the team is having Vue.js and angular as their next release items. There is already an option available in the extension to experiment this out. If you go to the Web Template Studio application, you can enable preview mode where the experimental version of angular application and Vue will be available. But you have to be aware that they are not fully ready and when you choose to enable these features, you have to be aware that they can have issues and are not production ready yet. But for the fun sake, you can check that out.

Project is Open Source

Microsoft is showing more love towards Open Source nowadays. We have been getting some awesome updates from Microsoft for the past few months. I admired the company when they acquired GitHub and decided to provide Private repositories for free. Today when I read about Web Template Studio, I feel really happy that we might even get a free operating system from them in the distant future. The revenue generation model for these companies is getting different nowadays based on how we are moving with technology.

Source

Contributing: https://github.com/Microsoft/WebTemplateStudio/blob/dev/CONTRIBUTING.md

Roadmap: https://github.com/Microsoft/WebTemplateStudio#feedback-requests-and-roadmap

If you are a developer and would like to contribute to this project, you can read the contributing guidelines and the roadmap of the project and align yourself with that to contribute. I’m personally someone who admire templating tools. I personally feel that templates have always been a great achievement in the internet world because anyone even without a full stack knowledge can develop their own application if a proper template is provided to them. As it is now a community driven project, if you have any feedback for the project, you can share them and work towards a public roadmap.

Image Source: Screenshots from VS Code.

Be the first to comment

Leave a Reply

Your email address will not be published.


*