Microservices reference app showcasing a range of technologies, platforms & methodologies .Smilr is a multi component application & reference architecure. It has been designed to showcase microservices design patterns & deployment architectures. It consists of a front end single page application (SPA),
Smilr is a multi component application & reference architecure. It has been designed to showcase microservices design patterns & deployment architectures. It consists of a front end single page application (SPA), two lightweight services, supporting database and back end data enrichment functions.
The Smilr app is simple, it allows users to provide feedback on events or sessions they have attended via a simple web & mobile interface. The feedback consists of a rating (scored 1-5) and supporting comments.
The app has been designed to be deployed to Azure, but the flexible nature of the design & chosen technology stack results in a wide range of deployment options and compute scenarios, including:
This application supports a range of demonstration, and learning scenarios, such as:
The app consists of four logical components
There are a number of ways to get started with this project depending on your goals. Below are some suggestions and pointers
This is a monorepo so contains multiple discreet but loosely dependant projects. The top levels of the repository directory tree are laid out as follows
/ ├── archive Older and experimental code archive │ ├── mobile Nativescript + Vue.js mobile client │ └── go Work in progress re-write of the main services in Go ├── azure Supporting files for Azure deployment etc │ ├── functionsv2 Azure Functions serverless implementation │ ├── pipelines Azure Pipelines for CI/CD │ └── templates Example ARM templates ├── docs Documentation ├── docker Docker compose files, Note. Dockerfiles are elsewhere ├── etc Supporting files, pictures and other artefacts ├── kubernetes Docs and files to support deployment to Kubernetes & AKS │ ├── helm Helm chart for deploying Smilr with Helm │ ├── advanced Deployment YAML for use with Ingress, SSL and persistence │ └── basic Simple deployment without Ingress or persistence ├── node Main microservices, written in Node.js │ ├── data-api Data API service source code │ └── frontend Frontend service source code ├── orleans Orleans actor based implementation of the Data API ├── testing Mock test data, API tests and load test scripts └── vue The main app frontend, a Vue.js SPA ├── src Source code of Vue.js app └── mock-api Provides a fake API and database for local testing
The reference implementation of the Smilr app consists of the frontend server & data-api written in Node.js and the client as a SPA written in Vue.js. There are alternative versions (detailed below) but currently the core of the project is represented this implementation:
As Smilr is commonly used in demos, workshops/labs and for self learning, it defaults to being unsecured and open. This makes it easier to deploy without additional configuration or authentication complications.
Should you want to secure Smilr, typically because you want to have a permanent "live" version hosted and accessible, this is also possible. Securing both single page applications and REST APIs presents some interesting challenges. The approach taken was to use Azure Active Directory v2 for identity, the OAuth2 Implicit Grant flow for authentication and OAuth2 bearer tokens for validation
These docs covers some of the fundamental aspects of Smilr, which are independent of any particular implementation
The primary configuration mechanism for this project is system environmental variables (or env vars). These env vars are used with the Node.js services, container runtime, Docker tools and helper scripts. This gives a flexible and cross platform way to inject runtime settings, it is also widely supported in Azure (e.g. Azure App Service Settings) and Docker/Kubernetes.
There are numerous ways to set & override environmental variables; in the operating system, the user profile or from command line tools. For local development purposes it is strongly recommended you create & use
.env files. These are simple text files containing
var=value pairs. Sample files named
.env.sample are provided within the project, which you can rename and use. Note.
.env files can often contain secrets so they are prevented from being committed to Git
As containers and Kubernetes represents such an important build & deployment scenario, they have dedicated guides and documentation
Pre built images are available on Dockerhub. Using these will naturally mean you can get started deploying/running Smilr without needing to do anything. However building your own is still recommended, especially if you want to understand the build process in more detail.
Images for the Node.js data API and frontend (serving the Vue.js client) are available.
stabletag is only pushed after some manual validation and testing,
latestis auto-pushed with latest code every night
See provided Azure Resource Manager (ARM) templates to allow you to deploy the complete Smilr app and all components to Azure. As all deployment scenarios are container based you also need to refer to the containers section described above
Automated CI/CD pipelines have been created using Azure Pipelines. These automatically build the various components as containers and releases them to Azure for testing. The current status of these builds & releases is shown below
|Linux Images & Tests|
|Windows Images & Dockerhub|
You can visit the Azure Devops Public Project where these pipelines reside, although keep in mind the source code repo remains here on GitHub.
If you want to try using Azure DevOps to build Smilr, the pipelines are provided as YAML for your own use. An Azure DevOps account/organisation is required to use these, but can be setup for free.
There are several sub-projects and re-implementations of the Smilr architecture. Either at the backend, providing an API compatible with the data-api REST specification. Also the frontend has been implemented as a mobile app. All of these alternatives are considered experimental and for technology demo use cases
High level project changes and overall history are recorded here:
Live Demo: https://smilr.benco.io/
This is a simple example of how to implement server-side pagination in Vue.js with a Node.js backend API.
In this article, we will build a simple Task Manager application. We will build it using Node.js in the backend and Vue.js in the frontend. We will have a list of boards, each containing several lists. Each list will contain several cards which will represent the tasks.
Open source personal blog system based on Node.js, using Nuxt + Vue + TypeScript technology stack.
Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.