Microsoft's Web Template Studio walkthrough 🌐
Tags: web, react, node, fullstack
Published: 2020-01-29 14:20:48

---
title: Microsoft's Web Template Studio walkthrough 🌐
published: true
description: A walkthrough of Microsoft's WebTS extension for Visual Studio
tags: web, react, node, fullstack
cover_image: https://i.imgur.com/ErrjIif.png
---

Okay, so recently I discovered a new extension for VS Code called **[Web Template Studio](https://github.com/Microsoft/WebTemplateStudio/)** (WebTS). It's a wizard-based tool built by Microsoft which basically helps to quickly create a new web-based project (mostly full-stack web application) using a wizard-like experience. It's like installing new software inside VS Code! 

> The aim is to generate a boilerplate code by letting the user choose which tech stack they want. Optionally, to deploy it with cloud services.

As it's a Microsoft made extension, they offer you to add their Azure cloud services in your project while creating the new project.

If you're a Microsoft's [Universal Windows Platform](https://docs.microsoft.com/en-us/windows/uwp/get-started/universal-application-platform-guide) (UWP) fan (like I was years ago) or have used the Visual Studio IDE for that, you must've heard about [Windows Template Studio](https://github.com/Microsoft/WindowsTemplateStudio/) (WTS). WebTS takes the same _template_-like process but the difference here is in the code project they output. While WTS was aimed to quickly build a UWP app, this time around they made WebTS to generate a boilerplate web app with cloud integration.

As written in its GitHub repo, this was created using TypeScript and React. ⚛
A great thing we can get to know about this extension is that it was initially created by Microsoft Garage interns, kudos to them. 👏

Some of the popular frameworks/libraries can be used to generate a boilerplate project using WebTS. Here are a few examples:

- React
- Express
- Bootstrap
- Angular
- Vue
- Node.js
- Flask
- Moleculer

I found it interesting to use, so here's my walkthrough in simple words on how to use Microsoft's Web Template Studio extension...

---

### ⬇ Download and Install 
First things first, we need to download and install the extension. Open up the 'Extensions' tab in VS Code and search for "Web Template Studio" by Microsoft. Else, you can head over to the [extension website](https://marketplace.visualstudio.com/items?itemName=WASTeamAccount.WebTemplateStudio-dev-nightly). Hit "Install" and "Reload" if required.

### 🔃 Start the WebTS 
Start the [Command Pallete](https://code.visualstudio.com/docs/getstarted/userinterface#_command-palette) in VS Code by hitting <kbd>Ctrl+Shift+P</kbd> (Windows/Linux) or <kbd>Shift ⇧ + Command ⌘ + P</kbd> (Mac). Next, type or select "Web Template Studio: Launch" and press <kbd>Enter</kbd> to launch the extension.

It will start its server and you will be presented with the Web Template Studio wizard. This comprises of 5 steps where you'll add the project details.

Here's the complete process with GIF:

![Microsoft Web Template Studio GIF](https://media.giphy.com/media/KZqdrIYTwDjo77JDkk/giphy.gif)

Here's what's happening...

1. **Creating a new project**: in the first step, you just mention the name and save location. I want to make a 'CrazyAppWithTemplate' as the name and will save it to the appropriate location as shown.

2. **Choosing the tech stack**: the exciting part comes in step 2! Here you choose what frontend and the backend framework you need according to the project.  _The WebTS extension is made to work with a full-stack project_. I'm comfortable with React as the frontend library and Node/Express as the backend framework to work so I chose those as seen in the GIF above. You can even blend Vue.js with Flask!

3. **Adding web pages**: towards the left, you'll see some options in the form of cards where you can choose what type of page layout you want. You can add up to **20** pages to your app at one time. Some of the options available are _Blank_, _Grid_, _List_ etc. They do as the name suggest. The _Blank_ one will be your choice if you want to build the pages from scratch, the _Grid_ includes some images and other elements organised in a grid form and similar is the _List_. As you can see I added just one _Grid_ page for the demo.

4. **Optional cloud services**: if you think your app needs some cloud support from Microsoft, feel free to configure [Azure Cloud Services](https://azure.microsoft.com/en-in/services/cloud-services/) available in the final step of the wizard. You can use this to host your web app with Azure Cloud Hosting service.

5. **Summary of your project**: at last, you see all the information about the boilerplate app that will be generated. I recommend you to review this page so that if you ever did something wrong you can easily go back a step or two to configure accordingly.

Here's what I've used:

- _App name_: CrazyAppWithTemplate
- _Front-end framework_: React
- _Back-end framework_: Node/Express
- _Page(s)_: a single page with _Grid_ layout
- _Optional cloud services?_: No 

All done, time to hit the "Create Project" button! 🤩

After a minute, you'll get the dialog which tells you that the project boilerplate was created and you can now click on "Open Project". This opens your project in a new VS Code window containing the following structure:

```
.
├── src - React front-end
│ ├── components - React components for each page
│ ├── App.jsx - React routing
│ └── index.jsx - React root component
├── server/ - Express server that provides API routes and serves front-end
│ ├── routes/ - Handles API calls for routes
│ ├── app.js - Adds middleware to the express server
│ ├── sampleData.js - Contains all sample text data for generate pages
│ ├── constants.js - Defines the constants for the endpoints and port
│ └── server.js - Configures Port and HTTP Server
└── README.md
```

As stated in the _Readme.md_ file, the front-end is served on `http://localhost:3000/` and the back-end on `http://localhost:3001/`.

Of course, the next step is to install all the dependencies required (or get that massive _node_modules_ folder 🥴). Open up a terminal (or the inbuilt VS Code terminal), run `npm install` or `yarn install` depending on your package manager. 
After the dependencies are installed successfully start the development server with `npm start` or `yarn start`, on a browser visit `http://localhost:3000/` and (drumroll 🥁)... you've created the boilerplate for the full-stack web app of your choice! 

![Tada gif](https://media.giphy.com/media/ZcVWDLOp2L4WAFM98X/giphy.gif)

---

### What's next? 🤔
The Readme file in the project's root directory gives you all the information about what to do next. You can do the following:

1. **Add your own data**: of course, right now you see some default text and images are being placed in the app you served, you can change it with your own data stored in _/server/sampleData.js_ file and for images, they're inside _/src/images_.

2. **Create a new page**: add your own React components on the front-end by creating a new folder inside _/src/components_, and then adding its route inside _/src/App.js_.

3. **Use Azure for deployment**: if you plan to add Azure App Service after creating the project then follow the steps as mentioned in the Readme. Or you can head over to the [deployment documentation on GitHub](https://github.com/Microsoft/WebTemplateStudio/blob/dev/docs/deployment.md) for the same.

---

### Additional resources 📚

1. The official GitHub repo of WebTS:

{% github Microsoft/WebTemplateStudio no-readme %} 

2. [Microsoft's blog on WebTS announcement](https://blogs.windows.com/windowsdeveloper/2019/05/15/announcing-microsoft-web-template-studio/).

3. Dan Vega's tutorial video
 
{% youtube fi4ZjqNcSQc %} 

---

### Your opinion? 💭

What do you think about Web Template Studio extension by Microsoft? Will you use if for your future projects or not? I'm sure gonna give it a chance for one of my full-stack apps in future. Are there any caveats you feel? Write it down in the comments and let me know. 

---

<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="en" dir="ltr">Can be all too familiar...<br><br>Source: <a href="https://t.co/JQ31pv8yO4">https://t.co/JQ31pv8yO4</a><a href="https://twitter.com/hashtag/DevHumour?src=hash&amp;ref_src=twsrc%5Etfw">#DevHumour</a> <a href="https://twitter.com/hashtag/Developer?src=hash&amp;ref_src=twsrc%5Etfw">#Developer</a> <a href="https://t.co/Kxc0cNDKtT">pic.twitter.com/Kxc0cNDKtT</a></p>&mdash; Microsoft Developer UK (@msdevUK) <a href="https://twitter.com/msdevUK/status/1221845326824398853?ref_src=twsrc%5Etfw">January 27, 2020</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

---

#### [📫 Subscribe to my weekly developer newsletter 📫](https://mailchi.mp/f59beeac6b9b/devupdates)

##### PS: From this year, I've decided to write here on DEV Community. Previously, I wrote on Medium. If anyone wants to take a look at my articles, [here](https://medium.com/@vaibhavkhulbe)'s my Medium profile.