Using Vue.js with the Mako Server
We maintain a fairly fast pace in this short video. Make sure to see the written tutorial for more details.
Article: https://realtimelogic.com/articles/Re...
We use the commands provided on the GitHub page "as is". We use a Windows bash shell just to show that it is possible to use the Linux commands on Windows. You can also use the commands from a standard Windows command window if you have all the tools installed, such as 'git' and 'wget'.
Note that you must also make sure you have Node.js installed prior to running the commands.
We use the Node Package Manager aka npm to initialize and set up the environment.
Some of the npm commands take a considerable amount of time. We have sped up these commands and do not show the full length of the operation.
So what's important to understand about this example is that the Single Page Application's assets are loaded from the local Node.js server running in the command window. The Single Page Application connects to the backend server using WebSockets as soon as it is loaded into the browser. In this example, the backend is running on the domain simplemq.com.
The Vue.js powered Single Page Application piggy backs on an existing example infrastructure for the SMQ protocol. The example shows how to control LEDs or light-bulbs in a device by using a browser user interface.
We also download, compile, and run the SMQ LED C client code just to show how a new device pops up in the Vue.js powered Single Page application.
The original LED web application is powered by a JavaScript application that is using the JQuery JavaScript library. As you can see, the Vue.js powered application and the JQuery powered application are synchronized.
Let's stop the Node.js server and lets use npm to build a release. The production ready code is assembled in the 'dist' sub directory.
We are going to show how to use the mako server as the server for loading the Single Page Application's static assets. We also need to copy the server side LED example code to the 'dist' directory.
We can start the mako server and instruct the server to use the 'dist' directory as the 'www' directory.
The server side LED example code we copied to the 'dist' directory is started by the Mako Server as soon as the server starts. We can now instruct the SMQ LED C client to connect to the local server instead of connecting to simplemq.com.
The SMQ LED C client now connects to the local server.
We can also load the Vue.js powered LED example into the browser from the local Mako Server.
We also copied the original JQuery powered Single Page application when we copied the server side code to the 'dist' directory. We can use the second browser window and navigate to this app.
You can now see that everything is controlled from the local Mako server.
All client applications, including the C program, the JQuery app, and the Vue.js app disconnect as soon as we terminate the server.
That concludes the short video tutorial on how to use the Vue.js app in developer mode and release mode.