Русский

How easy can development be when using TypeScript (JavaScript, Pug, Stylus, etc.)? Example of using WebDevSynergy in conjunction with Visual Studio Code in two clicks:

1. Launch the "live server".
2. Launch the file watcher.

Now print the code in TypeScript. As soon as you save the file, the browser page will refresh and show the result:

1. What is WebDevSynergy?

WebDevSynergy is a simple and reconfigurable web development environment. All that is needed for the environment to work is an installed NodeJS. Features:

1. Independence from any IDE (but nothing interferes, and it is even recommended, to use this environment in conjunction with your preferred IDE).
2. Easy customizability (you can either disable/remove existing modules, or connect new ones according to the template).

In this example, only the following features are implemented:

1. A "live server" for testing the application in a browser based on Browsersync.
2. Compilation features implemented with Gulp:
   • Typescript -> JavaScript;
   • Pug -> HTML;
   • Stylus -> css.
3. A simple and fast way to show the result of your work over the Internet using Localtunnel

The Gulp (task manager) modules are turned on/off through the gulpfile.js/config-wds.js configuration file.

2. How to install and configure (option without dependency on the IDE).

Step	Description	Screenshot
1	Download and install NodeJS (see instructions on the NodeJS website).
2	Download and unpack this repository to a place convenient for you (or you can use git commands).
3	Open your console and navigate to the unzipped folder, where run the command npm install to initialize the environment and load the necessary modules.
4	To start, use the following commands:    * Starting a "live server" - npm run rls.    * Starting file monitoring and compiling: typescript -> javascript, pug -> html, etc. - npm run rfw.    * If necessary show the development result (you need an already working "live server") - npm run lt. As a result, you will get a temporary link that you can share, and by which everyone can go to the running " live server"

Your development application will be located in the app folder (it's customizable). Now open, for example, in notepad the main.ts file from the app folder, change it and save it. You will see how the page in the browser refreshes and displays the changes.

3. Visual Studio Code and WebDevSynergy.

Step	Description	Screenshot
1	Download and install NodeJS (see instructions on the NodeJS website).
2	Download and unpack this repository to a place convenient for you (or you can use git commands).
3	Launch VSC and open a folder in it.
4	You can use the built-in terminal to initialize the environment and download the required packages by running the npm install command in it.
5	In the lower left corner, in the NPM SCRIP tab, you can see the available commands that can be used to run the "live server" Browsersync (rls), Gulp compilation scripts (rfw), and the module Localtunnel (lt). You can also change the names to more readable ones in the package.json settings file in the scripts section.

But that's not all. For more convenience, you can do the following:

Step	Description
6	Add start and stop task data to VSC environment tasks. To do this, create a .vscode folder and a tasks.json file in it. Add the following to it:

{
	"version": "2.0.0",
	"tasks": [
		{
			"label": "Run live server",
			"type": "npm",
			"script": "rls",
			"problemMatcher": [],
			"presentation": {
				"group": "dev"
			}
		},
		{
			"label": "Run files watcher",
			"type": "npm",
			"script": "rfw",
			"problemMatcher": [],
			"presentation": {
				"group": "dev"
			}
		},
		{
			"label": "Local tunnel",
			"type": "npm",
			"script": "lt",
			"problemMatcher": [],
			"presentation": {
				"group": "dev"
			}
		}
	]
}

Step	Description	Screenshot
7	You can run tasks from the control line Ctrl+P and type >Tasks: Run Task and then select the desired task.
8	You can also install any manager or task explorer and use it.

4. "Under the hood".

How it works. Saving files with .ts, .pug, and other extensions is tracked by Gulp and immediately translated to .js, .​​html and other, respectively. In turn, changes in the files with the .js, .html and other extensions are monitored by Browsersync, which will immediately refresh the page in the browser. You can organize your files into separate folders within app, Gulp, by default, will always create a final file next to the original. You can change this behavior by using the dirFrom and dirTo settings in the config-wds.js settings file, which allow you to rewrite part of the output path of the final file. If you change the settings files, you need to restart the corresponding service (in the case of the config-wds. js, this will be the rfw)!

5. Note.

Using the features of Gulp, you can add any functionality you need. It shouldn't be difficult to understand the structure of the code in the gulpfile.js folder. Browsersync and Gulp are much more powerful than the capabilities used here. But that's another story, which you can learn more about on their official pages.

This environment does not depend on the IDE, and you can write the code in any text editor. But it is much more convenient and efficient to use the IDE for this, and it does not matter which one. Consider working with Visual Studio Code as an example in the next section.