Using the SEAN Stack with Visual Studio Code and Azure

Introduction

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.

There have been several acronyms for Web development stacks created over the years. LAMP has been used for Web applications since about 1996 and stands for Linux, Apache, MySQL, and PHP. MEAN is a newcomer and stands for MongoDb, Express, AngularJS, and Node.js. SEAN stands for Sequelize, Express, AngularJS, and Node.js.

Node.js

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

To use quickly develop applications in any stack, you’ll need a good editor. Microsoft recently released version 1.0 of their lightweight editor. Visual Studio Code. It supports JavaScript development very well. It is open source and can be downloaded from https://code.visualstudio.com.

Yeoman

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

SEAN.JS

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:

yo seanjs

SEAN01
Figure 1: Creating a new SEAN stack application

SEAN02
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.

Configuration

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.

SEAN03
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.

Microsoft SQL

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.

SEAN04
Figure 4: Preparing to add a new line

encrypt: process.env.DB_ENCRYPT || true,

SEAN05
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

Redis Cache

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.

Azure

If you are not connecting to local instances, you can set up SQL Databases and Redis Stores on Azure via the Azure Web site. By default, Redis Cache on Azure uses SSL. You might need to disable that to connect remotely and develop. You’ll want to re-enable that and use the secure port. You’ll also need to use the generated password and put that in your application’s environment JavaScript file. You can install Redis by itself or install all via a collection. Azure options change often, so search for options at https://portal.azure.com.

SEAN06
Figure 6: The Redis Cache

SEAN07
Figure 7: The app settings

Deploying to Azure can be as easy as committing with Git. After you start a Web site on Azure via the portal, find the remote Git URL and add it as a remote origin. Then, commit your changes to it. Azure will pick up the package.json and bower.json and install your site. It’s that easy. Make sure that you set your NODE_ENV parameter to the environment JavaScript file you want to use. In my case, it is production.

Grunt

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.

SEAN08
Figure 8: Grunt

SEAN09
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.

Let’s Code

SEAN10
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.

Menus

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.

SEAN11
Figure 11: The AngularJS module’s run function

Models

SEAN12
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.

Routes

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.

SEAN13
Figure 13: Server-side routes

Summary

The SEAN stack is something I have been developing in for quite a long time now. The performance increase over ASP.NET or PHP is awesome. It can take some more time to get everything the way you like it, but tools like Yeoman and starter code like in the SEAN.js generator can really help. Nothing is a black box in the SEAN stack. It’s all JavaScript. If you prefer control and performance over drag and drop control surfaces, give it a try. I hope this article will help if you decide to do so.

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.

More by Author

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Must Read