ReactJS, Angular, and Vue.js with the Barracuda App Server

(How to use AngularJS, ReactJS, and Vue.js with any web server, including the Barracuda App Server)

Frameworks such as AngularJS, ReactJS, and Vue.js greatly simplify the design of modern Single Page Applications (SPA). This tutorial will show you how to use these frameworks with the Barracuda App Server. The application we will develop is a Vue.js powered SPA; however, the focus is on using modern frameworks with the Barracuda App Server and not so much on the actual Vue.js implementation. You can apply the same development setup for all web frameworks that require a packaging system such as WebPack, including ReactJS and Angular.

The article A Modern Approach to Embedding a Web Server in a Device shows how to develop a Vue.js application for the Barracuda App Server by using a so-called CDN repository. CDN is an acronym for Content Delivery Network and is an online service that stores static assets for various frameworks. Using a CDN is sufficient for simple applications and when the Barracuda App Server runs in an environment where the browser can access the Internet to load these static assets. However, using a CDN is not recommended for more advanced applications or production mode.

The web development's journey from simple static sites to "Single Page Apps" underscores its growing complexity. Mastering the field is challenging with the surge of new frameworks and intricate dependencies. An expert developer's guidance is invaluable if you're not immersing yourself 100% in these nuances.

AngularJS, ReactJS, and Vue.js Developer Mode vs. Production Mode

There is a distinct difference between developer mode and production mode in any modern web framework.

A released SPA contains only static assets (HTML, CSS, JavaScript, and images) and can be loaded by any web server. The released SPA is produced by a command line tool that bundles all web framework components into components that a browser can understand.

When developing a SPA, the web framework components must be converted to a format the browser on the fly understands.

AngularJS, ReactJS, and Vue.js Developer Mode

Most modern web frameworks use a module bundler such as webpack, which is a program run at the command line. The job of the bundler is to take all the various widgets and framework components and produce assets that a browser can load. In other words, the bundler converts components the browser cannot understand into components the browser can understand.

Using WebPack with Barracuda App Server

Figure 1: Converting framework components to assets a browser can understand

In developer mode, the conversion is typically performed automatically and as soon as you save any of the web components that are part of your SPA.

WebPack and other tools needed during development are designed for Node.js; thus, Node.js is required during the development. The Node.js environment can be installed on a standard desktop computer and the Barracuda App Server can be running on the same computer or an embedded device.

SPA developer mode for Barracuda App Server using Node.js

Figure 2: SPA developer mode for Barracuda App Server using Node.js

Although the developer setup in Figure 2 may initially look inconvenient, you will find, when getting started, that it is a very efficient way to develop SPA applications. An SPA has more in common with a standard desktop application than a traditional web application. By separating the front-end development from the back-end development, things are conceptually easier to understand. This is especially true if the Barracuda App Server is running on an embedded device and when using a front-end developer team and a back-end developer team. The front-end team can develop the SPA using their desktop computer and communicate with a Barracuda App Server running on the device.

AngularJS, ReactJS, and Vue.js Release Mode

When the SPA application has been completed, a module builder such as webpack is run at the command line to produce the released assets. These assets can then be moved over to the Barracuda App Server, preferably as a deployed Barracuda App Server application -- i.e. deployed as a ZIP file.

SPA release mode

Figure 3: SPA release mode, where SPA assets are stored in ZIP file

Using AJAX, REST, or WebSockets

You may use any available web technology for the SPA to Barracuda App Server communication; however, we recommend using WebSockets for all communication since SPA and WebSockets go hand in hand. In its most basic form, an SPA is a browser-based application that does not refresh as the user interacts with the page and the WebSocket connection provides a persistent connection.

You may still think AJAX and REST are the best technology since sliced bread; however, in point of fact, the entire AJAX protocol can easily be built using Websockets technology. This makes Websockets literally a superset of AJAX so it makes sense that we standardize all communication using WebSockets. In fact, we have a tutorial that shows how easy it is to run AJAX over WebSockets .

Download the Vue.js example from GitHub

The example we have prepared, which can be downloaded from GitHub, indirectly uses WebSockets via the SMQ protocol. We use SMQ and not directly WebSockets to get the benefits a publish/subscribe protocol provides to reactive multiuser applications. This is particularly useful in embedded devices, where multiple users may simultaneously work with the same hardware -- in other words, multiple users working with a shared resource. In such a setup, AJAX will not suffice since a response to an action must be replicated across all connected browsers. The article A Modern Approach to Embedding a Web Server in a Device explains this concept in detail.

Video 1: How to install and use the Vue.js SPA available on GitHub


GitHub Link: https://github.com/RealTimeLogic/SMQ-LED-Vue.js


Single Page Application Design Considerations

The hype is all about designing fully-fledged JavaScript powered Single Page Applications (SPAs), but is this technology a good choice for your next web-based device management application? The feedback from customers designing fully-fledged SPAs is that they are expensive to develop, maintain, and require highly specialized developers.

Dynamically rendering small components and widgets in the browser using JavaScript is easy. Rendering the complete application, including the page routing using JavaScript, is complex. A hybrid design provides the best solution since it is faster and easier to build and maintain.

A better choice may be to use SPA technology for smaller components and leave the rendering of the main scaffolding to the server side. The tutorial How to Build an Interactive Dashboard App shows how easy it is to render the application's scaffolding on the server side.

Security Considerations

We left out authentication and authorization in the above tutorial; however, a real application would typically require authentication as a minimum requirement.

As mentioned above, we recommend using WebSockets for all server communication since a WebSocket connection is persistent, and a SPA persists in the browser until the browser window is closed. For this reason, a SPA has much in common with a standard desktop application, except for being distributed; one part runs in the browser, and the other part runs on the server. The services the server provides typically require some authentication before being accessed.

The example application (link above) uses the SMQ protocol for server communication. SMQ includes authentication as an option, and you may use the SMQ authentication mechanism. However, if you are using a raw WebSocket connection or if you use SMQ but prefer another type of authentication, you have two options:

  1. Authenticate when loading the SPA assets and use an authentication token when establishing the WebSocket connection.
  2. Implement an authentication mechanism over WebSockets.

Authenticate when loading the SPA

Depending on the type of web server being used, you may have the option to authenticate the user when loading the SPA assets. An authentication token can be created when loading the assets, which can be used when establishing the WebSocket connection. For example, when using the Barracuda App Server, the standard login mechanism may be applied and activated when loading the SPA assets. The server creates an authentication token in the form of a cookie, and the browser sends this cookie to the server if the WebSocket connection is to the origin server -- i.e., to the server from where the assets were loaded. The server side can then check if the user is authenticated when the server-side LSP code registers the WebSocket request.

Note that a cookie-based authentication token should only be used over a secure connection, a TLS-protected connection.

Implement an authentication mechanism over WebSockets

The second option is implementing an authentication protocol communicating over WebSockets. The SMQ authentication option uses this concept; however, SMQ can also use a cookie-based authentication token as explained above.

Implementing your own authentication over the WebSockets protocol is not difficult, but there are a few things to consider. Our SPA reference example for the Minnow Server includes a secure WebSocket-based authentication protocol even on a non-TLS-protected connection. For more information on this protocol, navigate to the Minnow Server Reference Platform Specification and scroll down to section Authentication and Password Management.


Looking for Guidance?

Dive deep into our treasure trove of embedded web server and IoT tutorials designed for enthusiasts like you. Yet, if deadlines loom or challenges arise, remember our experts are on standby. With Real Time Logic, you have the freedom to learn and the assurance of expert support when you need it. Let's bring your project to fruition your way.



OPC-UA

OPC-UA Client & Server

An easy to use OPC UA stack that enables bridging of OPC-UA enabled industrial products with cloud services, IT, and HTML5 user interfaces.

Edge Controller

Edge Controller

Use our user programmable Edge-Controller as a tool to accelerate development of the next generation industrial edge products and to facilitate rapid IoT and IIoT development.

On-Premises IoT

On-Premises IoT Platform

Learn how to use the Barracuda App Server as your On-Premises IoT Foundation.

Embedded Web Server

Barracuda Embedded Web Server

The compact Web Server C library is included in the Barracuda App Server protocol suite but can also be used standalone.

WebSocket Server

Microcontroller Friendly

The tiny Minnow Server enables modern web server user interfaces to be used as the graphical front end for tiny microcontrollers. Make sure to check out the reference design and the Minnow Server design guide.

WebDAV Server

Network File System

Why use FTP when you can use your device as a secure network drive.

HTTP Client

Secure HTTP Client Library

PikeHTTP is a compact and secure HTTP client C library that greatly simplifies the design of HTTP/REST style apps in C or C++.

WebSocket Client

Microcontroller Friendly

The embedded WebSocket C library lets developers design tiny and secure IoT applications based on the WebSocket protocol.

SMTP Client

Secure Embedded SMTP Library

Send alarms and other notifications from any microcontroller powered product.

Crypto Library

RayCrypto C Library

The RayCrypto engine is an extremely small and fast embedded crypto library designed specifically for embedded resource-constrained devices.

Embedded PKI Service

Automatic SSL Certificate Management for Devices

Real Time Logic's SharkTrust™ service is an automatic Public Key Infrastructure (PKI) solution for products containing an Embedded Web Server.

Modbus

Modbus TCP client

The Modbus client enables bridging of Modbus enabled industrial products with modern IoT devices and HTML5 powered HMIs.

Posted in Whitepapers