Virtual Developer Workshop: Containerized Development with Docker
SEAN stands for Sequelize, Express, AngularJS, and Node.js. Choosing SEAN as your full stack Web framework gives you the speed of Node.js and the structure and stability of a SQL database. Microsoft recently released version 1.0, the new editor for developing applications called Visual Studio Code. It is a lightweight, cross-platform, free editor that supports just about every modern programming language. In this article, the author will walk you thru building an application using the SEAN stack with Visual Studio Code and deploying it on Azure.
Are you a front end developer? Do you only work on the server side of things? Or, do you consider yourself a full-stack developer? Perhaps you consider the term "full-stack" a fad. It is good for any developer to consider the frameworks used in all layers of a solution. This article will consider the SEAN stack.
The foundation of the SEAN stack is Node.js. It is the runtime that all the server side code will execute within. It is the first thing that you need to install. We'll use Node's package manager to install the other parts of he stack. Node.js can be downloaded at https://nodejs.org.
Microsoft Visual Studio Code
Now that you have Node.js and Code installed, the rest of the installs should be simple commands using NPM, Node's package manager. The next thing that you might want to install is the Sequelize NPM package, or maybe Express. That is the long way round. If you have never used Yeoman before, let me introduce you to a tool that could greatly improve your productivity: http://yeoman.io.
npm install -g yo
With Yeoman, we can install one of several SEAN stack generators. I prefer the seanjs generator. It is based on the meanjs generator and is still active. Other generators are not as actively supported by the community. It is open source, so you're free to fork and create your own: http://seanjs.org.
npm install -g generator-seanjs
After you install the generator-seanjs, you can create a new SEAN stack application with one simple command:
Figure 1: Creating a new SEAN stack application
Figure 2: The new application is running
The most important part of the the Seanjs generator is the choice of SQL database. If you don't choose MySQL, the files it downloads won't work with Microsoft SQL Azure. We'll be using that database platform in the solution illustrated later on.
There is no mssql option, but the postgres and mariadb option will not work with mssql. Sequelize works well with mssql but there are differences in authentication. After initial setup, the Seanjs generator will run bower install and npm install do install Node.js server side packages via NPM and AngularJS client side packages via Bower.
Now, if we open the project folder with Visual Studio Code, we can begin configuration and start development and testing. Yes, we are ready to begin after just a few commands. It's that easy.
The first thing we need to do is have the application connection to the Microsoft SQL Azure Database and a Redis Server. The Redis Server will also be hosting on Windows Azure and will be used as the session store.
Figure 3: The Redis Server
First, let's take a look at the folder structure of the solution. There is a public folder where client libraries and images will be stored. The config folder will hold the settings files for our environments, both local and hosted on Windows Azure. The modules folder will hold the core application code and any custom modules that we will create.
You'll need to change the dialect setting in the ./config/env/development.js file, along with any other settings to match your database. If you use Microsoft SQL on Azure, you'll need to change some more code. In ./config/env/development.js, you'll need to add a line below 14 where ssl: process.env.DB_SSL… is.
Figure 4: Preparing to add a new line
encrypt: process.env.DB_ENCRYPT || true,
Figure 5: After adding the new line
Microsoft SQL Server on Windows Azure requires encryption be set in the Sequelize connection. So, we'll need to change some connection code in the ./config/lib/sequelize.js file. This is unique to the mssql dialect, so the out-of-the-box code doesn't include it.
You probably want to run your app now and you could, but you'd get an error. The other part of the mssql dialect in Sequelize is adding the Tedious package. We also need to make sure we save that in the package.json file with the -save argument.
npm install tedious -save
So, that gets us part of the way, but this is a high performance Web application framework built to run in the cloud. We need Redis to store session state. For local development, I installed Redis 2.8.2400 from https://github.com/MSOpenTech/redis/releases. I use Windows 10 on my main development machine. Because the SEAN stack and Code are cross platform, you can use any operating system on your development machine. You will need a recent version of Redis to connect to. Older versions, such as 2.4, are not compatible.
Figure 6: The Redis Cache
Figure 7: The app settings
So now that we have the code, a SQL database, updated code for SQL, and a Redis Cache, we can start the application. If you are running development, you don't have to build. If you are running production, you have to use build and use Grunt. Information about the grunt task runner can be found at http://gruntjs.com. The tasks found in the ./gruntfile.js file are straightforward. There are tasks for minification, and so forth. The default task will build and run the application.
Figure 8: Grunt
Figure 9: SEAN.js has been installed
We are running and the database was created for us. If we go to http://localhost:3000, we can register and start using the application.
Figure 10: The main menu
Now, let's look at the code. The article's module is a complete example of what you need to build in your custom module.
The first thing other developers ask me is how the menu works. In the ./modules/articles/client/config/articles.client.config.js is the AngularJS module's run function. That is where we set up the menu. It extends the Menus service found in ./modules/core/client/services/menus.client.service.js.
Figure 11: The AngularJS module's run function
Figure 12: Model code
The second thing developers ask is about Sequelize and the models. Model code goes in the server/models folder of your module. Sequelize development could be its own series by itself. The one tip I would give you is that with the SEAN stack, basic columns like createdAt and updatedAt will be there. If you start adding an audit trail for your models, you are duplicating effort.
There are both client-side routes and server-side routes. The server side routes are under the /api folder. This would seem self explanatory but it is often confusing to developers who have not used AngularJS routes with Express and Node.
Figure 13: Server-side routes
Download the Code
You can download the code to accompany this article here.
About the Author
Aaron Stanley King is an application architect specializing in enterprise web applications and very large databases. After spending several years building corporate enterprise level web applications, Aaron left to become a consultant. He has helped several successful startups move to the SaaS model. Aaron is currently leading Web application development efforts at Fall Creek Solutions.