Visual Studio Javascript Express Application
Joann Heavilin
This article is meant for individual developers or startups with developers who are not very familiar with deployments and are currently using PaaS solutions for the same. In this article, we look at the steps one has to do to develop their node.js applications in visual studio code and deploy the same on Alibaba cloud.
You may be wondering why Docker when you can deploy my application directly as shown in the above article. Docker helps provide "Universal portability / repeatability" and solves the biggest problem faced by developers who are starting up namely 'IT WORKS ON MY COMPUTER' phenomenon. If one packages an application using Docker and the same works on his/her desktop, the same will work on any datacenter, any cloud provider and definitely on Alibaba Cloud's Simple Application Server.
Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, MacOS, and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages (such as C++, C#, Java, Python, PHP, Go) and runtimes (such as .NET and Unity). Visual Studio Code makes it easy to deploy applications using Docker and supports generating and adding the appropriate Docker files based on your project type.
Simple Application Server provides you the all-in-one solution to launch and manage your application, set up domain name resolution, and build, monitor, maintain your website with just a few clicks. It makes private server building much easier, and it is the best way for beginners to get started with Alibaba cloud.
We need to get it to run under non root user as we will be using Visual Studio Code (installed next) and its Docker extension as our IDE. VS Code runs as a non-root user and the extension makes it easy to build, manage and deploy containerized applications.
The easiest way to install VS Code is to install as a Snap package. Snaps can be used on all major Linux distributions and comes preinstalled with most Ubuntu desktops. If it is not available on yours, you can install it from -snapd
Public repositories can be used to host Docker images which can be used by everyone else. Docker hub is a public repository and you can find a list of public Docker images for your use. All you need to do is pull those images and start launching containers based on them. We make our images available by publishing it to the public repository on Docker Hub.
We make our repository public and searchable on dockerhub. You can also have the repository private (to yourself or a handful of others). One private repository is free and a billing plan enables more. Private repositories work just like public ones, except you cannot browse or search them.
This will add certain files to your project along with Dockerfile which describe the environment for your app including the location of the source files and the command to start the app within a container.
Please look at the parallel article Developing Node.js App in Visual Studio and Deploying on Simple Application Server to learn how to Create a Simple Application Server Instance on Alibaba Cloud with CentOS7, create a password to the instance, and login using your desktop terminal (instead of putty as in the article).
These are the basic steps one has to do to develop a Node.js application using visual code on an Ubuntu Linux, create a Docker image for the application, create a Docker hub repository and push the image to Docker hub and finally deploy the Docker hub image on Alibaba Cloud's Simple Application Server with CentOS.
Console Ninja is a VS Code extension that displays console.log output and runtime errors directly in your editor from your running browser or node application. It's like your browser dev tools console tab or terminal output from your node app, but instead of having to context switch, values are connected to your code and displayed ergonomically in your editor.
Console Ninja Community feature set includes many fundamental features such as displaying console.log output and runtime errors directly in your editor, showing all recorded logs and errors in the log viewer, etc. Console Ninja Community feature set is free to use, and will always be free to use.
Console Ninja PRO (paid) feature set includes everyting from the Community feature set as well as many additional advanced features that can be explored on our website Pro page and are documented in a separate doc section. Unless the feature is documented as being available in the PRO edition, it will always be available in the Community edition for free.
Console Ninja feature sets are designed and will be extended in future with the goal of providing you the best tool in the world for debugging your applications. Whether you are using the free or paid version - we will do our best to make you as productive as possible. With the PRO feature set, we are aiming to 10x your productivity, especially in more advanced debugging scenarios:
You may easily switch between feature sets in the extension settings, request a trial period for Console Ninja PRO feature set by using the "Console Ninja: Manage License" command in VS Code, and unlock the full Console Ninja PRO feature set by purchasing a subscription.
In addition to the technologies above, Console Ninja also supports node app.js-like workflows including Express, Hapi, Fastify and other similar frameworks. Custom node applications are also supported. To learn more, please refer to the Universal Node applications section.
Console Ninja is designed to fit seamlessly into most typical dev workflows. After you have installed the extension in VS Code and opened your project, you may perform the same steps you usually take:
** Most modern tools run in watch mode with hot reload enabled. If your tool doesn't have such mode, then, the same way as without Console Ninja, you need to refresh your app page to make it run your modified code.
*** Sometimes your modified code may be triggered immediately upon the (hot) reload of the app. For example, when code is located in the root of a component, it will be executed when the app (re)starts. If the modified code is not triggered by the app (re)start, then, the same way as without Console Ninja, you will need to perform your app specific actions to trigger the code execution.
You should now be able to see logs (and errors, if any) in your editor, next to the relevant line of code. Hovering over the console.log or error value will display more details. If you don't see the expected output, please check Console Ninja's current status.
Adding console.log to your code will display the log output in your editor, next to the relevant line of code. Hovering over the console.log value will display additional details. The log output is also displayed in the log viewer.
Adding console.trace to your code will display the call stack trace right in your editor, next to the line of code with console.trace. The stack trace output is also displayed in the log viewer.
Adding console.time('some_label') and console.timeEnd('some_label') to your code will display the time it took to execute the code between the calls right in your editor, next to the line of code with console.timeEnd. The time output is also displayed in the log viewer.
Using the Show Output command displays Console Ninja's log viewer. The log viewer shows all recorded logs and errors from your running application in chronological order, with newer entries at the bottom. When the command is triggered on a line with a console.log result, the last recorded log entry is focused in the log viewer.
Each log entry provides summary details and is collapsed by default, providing a short preview that can be expanded (via mouse or Arrow Right keyboard key after it is focused) to inspect its details. Once the details are expanded, the Enter keyboard key can be used to enter the details keyboard selection/navigation mode; the Esc key can be used to exit the mode.
Each entry preview and expanded error entry details contain clickable links to the target source code. Links that point to http locations are opened in the editor by downloading the file first (a setting allows http links to be opened in the browser instead).
Similar to browser dev tools, sequential entries of a primitive type, such as string, boolean and number, and any errors, that are logged from the same place in the code and have the same value are grouped together and displayed as a single entry. The entry prefix indicates the number of entries in the group.
In the Beside File mode (default, and recommended), the viewer is displayed in a new separate editor group to the left from your current editor. In this case, the view behaves like other opened editor tabs, i.e. it is visible in the Opened Editors in VS Code file explorer view.
In the In View mode, the viewer is displayed as VS Code side view. The view can also be moved to another VS Code panel. The recommended position for the viewer is to the right of the VS Code Output view in the bottom pane of your editor.
Console Ninja supports virtually any node application (starting from node v16.15.0), including Express, Hapi, Fastify, and custom node applications. Simply prefix your node app.js command with console-ninja and run console-ninja node app.js in your terminal.
On UNIX-based systems (e.g. MacOS, Linux) you may source the console-ninja command for a terminal session. After that point, any commands you run in that terminal session will automatically be started with console-ninja. For example:
If you manually manage your shell scripts then you may want to disable the automatic PATH appending behavior. The console-ninja.installBinToPath VS Code setting which is set to true by default allows to disable the behavior.
d3342ee215