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.
There is a distinct difference between developer mode and production mode in any modern web framework.
When developing a SPA, the web framework components must be converted to a format the browser on the fly understands.
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.
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.
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.
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.
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 .
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.
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.
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:
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.
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.
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.
Expedite your IoT and edge computing development with the "Barracuda App Server Network Library", a compact client/server multi-protocol stack and toolkit with an efficient integrated scripting engine. Includes Industrial Protocols, MQTT client, SMQ broker, WebSocket client & server, REST, AJAX, XML, and more. The Barracuda App Server is a programmable, secure, and intelligent IoT toolkit that fits a wide range of hardware options.
SharkSSL is the smallest, fastest, and best performing embedded TLS stack with optimized ciphers made by Real Time Logic. SharkSSL includes many secure IoT protocols.
SMQ lets developers quickly and inexpensively deliver world-class management functionality for their products. SMQ is an enterprise ready IoT protocol that enables easier control and management of products on a massive scale.
SharkMQTT is a super small secure MQTT client with integrated TLS stack. SharkMQTT easily fits in tiny microcontrollers.
An easy to use OPC UA stack that enables bridging of OPC-UA enabled industrial products with cloud services, IT, and HTML5 user interfaces.
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.
Learn how to use the Barracuda App Server as your On-Premises IoT Foundation.
The compact Web Server C library is included in the Barracuda App Server protocol suite but can also be used standalone.
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.
Why use FTP when you can use your device as a secure network drive.
PikeHTTP is a compact and secure HTTP client C library that greatly simplifies the design of HTTP/REST style apps in C or C++.
The embedded WebSocket C library lets developers design tiny and secure IoT applications based on the WebSocket protocol.
Send alarms and other notifications from any microcontroller powered product.
The RayCrypto engine is an extremely small and fast embedded crypto library designed specifically for embedded resource-constrained devices.
Real Time Logic's SharkTrust™ service is an automatic Public Key Infrastructure (PKI) solution for products containing an Embedded Web Server.
The Modbus client enables bridging of Modbus enabled industrial products with modern IoT devices and HTML5 powered HMIs.