Microsoft's Web Template Studio walkthrough 🌐

#web #react #node #fullstack

Okay, so recently I discovered a new extension for VS Code called Web Template Studio (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 (UWP) fan (like I was years ago) or have used the Visual Studio IDE for that, you must've heard about Windows Template Studio (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. Hit "Install" and "Reload" if required.

🔃 Start the WebTS

Start the Command Pallete in VS Code by hitting Ctrl+Shift+P (Windows/Linux) or Shift ⇧ + Command ⌘ + P (Mac). Next, type or select "Web Template Studio: Launch" and press Enter 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:

Here's what's happening...

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.
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!
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.
Optional cloud services: if you think your app needs some cloud support from Microsoft, feel free to configure Azure Cloud Services available in the final step of the wizard. You can use this to host your web app with Azure Cloud Hosting service.
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!

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:

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.
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.
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 for the same.

Additional resources 📚

The official GitHub repo of WebTS:

microsoft / WebTemplateStudio

Microsoft Web Template Studio quickly builds web applications using a wizard-based UI to turn your needs into a foundation of best patterns and practices

Microsoft's blog on WebTS announcement.
Dan Vega's tutorial video

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.

Can be all too familiar...

Source: https://t.co/JQ31pv8yO4 #DevHumour #Developer pic.twitter.com/Kxc0cNDKtT
— Microsoft Developer UK (@msdevUK) January 27, 2020