Software giant Microsoft today released a new Visual Studio Code extension which can make the developer’s task easy. Web Template Studio (WebTS) as its name is, provides an easy wizard to create a web application with back-end as well as front-end.
If you are an Angular developer, React.js developer or Vue.js developer then you must have used Visual Studio code. This is also my favourite for writing MEAN stack, MERN stack as well as MEVN stack code.
The important thing about visual studio code is its IntelliSense as well as several plugins which can be downloaded and installed for free.
Good news for Angular, React.js and Vue.js developer
By the time this blog is written, a new plugin has been launched 24 hours before (21/08/2019) for visual studio code which is cool for these developers.
Now you can develop a full-stack website using just a few clicks. Top of all its free which can be downloaded and installed with visual studio code.
The plugin has a built-in template which you can choose and just with few clicks you can create a full-stack website.
Frameworks: According to its official website it asks which framework one wants to use for frontend and which one for the back-end. Currently, only three front-end frameworks are supported. For front-end Angular, React.js and Vue.js are supported and for back-end, they provide Node.js and Flask.
Apart from that it also provides a dependency checker through which it checks whether you have required version of Node and/or Python installed. If the requirement does not meet, it prompts you to install the current version and proceed.
Create pages: This is important where your time is saved. To make the development process easier it provides page templates which can be used for common UI pages. And presently the page templates are a blank page, master page, grid page as well as list page. While I was testing, it was displaying that currently, you can select up to 20 pages templates. Once you select the template, you can provide a custom name to those templates.
Cloud Services support: Apart from that you can also mention which Azure cloud services you want to use. It also helps to build out the framework for the services into your app. Presently, the supported services cover storage (Azure Cosmos DB), and hosting (Azure App Service).
After making selections you can extend the generated code.
Before installing the plugin, make sure that you have installed the latest version of visual studio code. If not, you can download and install it from here.
https://code.visualstudio.com/
Once you have installed the software, you follow this link.
https://marketplace.visualstudio.com/items?itemName=WASTeamAccount.WebTemplateStudio-dev-nightly
Click on the above installed button and it will redirect you to the visual code.
Here you will see an install button. In my case, it’s already installed. So, it’s showing disables and uninstall.
Once you have installed, here is how you can create a new project.
Step 1: Create a new project
Step 2: Open VS Code
Step 3: Press Ctrl + Shift + P in Windows/Linux or Shift ⇧ +
Command ⌘ + P on Mac to open VSCode’s extension launcher
Type/Select Web Template Studio: Launch and press the Enter button to launch the extension.
After that, you will see this screen.
Step 4: Write project Name
In my case, I have typed Acesoftech.
Step 5: In the next step, select the path where you want to place your project.
Click on next button.
Step 6: After that, you will see this screen. Here you can select the type of App you want to create. In my case I am using Angular; you can select whatever application you like.
Step 7: Now scroll down below and you will see this screen. Select here the back-end technology you want to use.
In my case, I am selecting, Node/Express.Js
Click on next button.
Step 8: Here you are prompted to select the pages you want into your application.
You can select up to 20 pages.
Once you select the page, you can also provide its name.
I selected 4 different pages and it shows something like this.
Step 9: And after clicking on next button, you are prompted to select if you want to host your app at Azure cloud server.
If you don’t want to, you can skip.
Also, you can arrange the pages. You can push-up or down the pages.
In my case, you can see how I have arranged the pages.
If you want to add more pages, you can click on numbers and navigate back.
In my case, I added one more page called contact us.
Step 10: Now click on create project.
Step 11: Now click on open Project.
This is the project description. The above folder structure, you can see there is front-end as well as back-end both.
Step 12: Now open terminal.
Step 13: Now let’s run the project with ng serve.
And finally, you will see this screen after compiling angular.
Step 14: Now open the browser and see the result.
This is the page template created.
Please let us know with your comment.
This article is written by Mr. Umar Rahman. He is CEO and founder of Acesoftech Academy. He has more than 19 years of experience in web and software development as well as teaching experience. He has been actively teaching MEAN stack and full-stack web development course in Kolkata at Acesoftech Academy.
