Tag Archives: typescript

Build a NodeJS stack with TypeScript, ExpressJS, MongoDB, AngularJS

I’m writing this post to those who want to start a new Node.js project and also wants to understand how it works and connects all the elements, without using a preset stack.

Let’s star for the basics, I use the Webstorm IDE from JetBrains, it’s awesome, all the source code will be uploaded in this repo: https://github.com/Squallium/node-express-typescript, I’ll try to use git-flow and also I will deploy the project in Heroku at important milestones

Firstly we’re going to create a basic node project structure with ExpressJS framework, to do this I use the WebStorm’s wizard, but you can use express-generator.  Once it’s created and you’ve checked it’s working we’re going to deploy it in heroku. You need to install the heroku toolbelt by following this instructions heroku setup

In order to let know heroku how to run our project we need to create a Procfile in the root of our app. If you’re using WebStorm, is similar to the www file inside the bin directory. We’re going to create a new file named pre-prod-env.ts with the following content.

The Profile file will contains:

After that, we’re going to create a git repo, and also add two different remotes, one for github, and the other one for heroku.

If everything it’s correct, you should have your source code in your repo (GitHub, BitBucket…) and also you’re app up and woking in heroku opened in your default browser 🙂

I use Admin-LTE as a template for my app. Because my template engine is Jade, I’m also porting to Jade the Admin-LTE project. In order to make all this things work, we’re going to cover a few dependencies. Let’s start by installing admin-lte as a module in our project.

You can copy my views directly from my project, but if you try to run it, you’ll see an ugly website without CSS. Admin-LTE needs some external libraries like JQuery or Fon-Awesomes to work. To install those dependencies we’re going to use the nicest third-party dependencies manager, bower. Let’s star with bootstrap, first we install the bower module npm install --save bower , then we initalize the bower.json config file, with the wizard  bower init . Finally  we install bootstrap,  bower install bootstrap --save . We need to be sure that our app has access to the bower_components folder, simply add these lines in the app.js file and publish this path. 

The last thing, It’s make sure that your project will deploy its third party dependencies like the Node JS ones. We need to add this line into the “scripts” section inside the package.json file:  "postinstall": "./node_modules/bower/bin/bower install" , with this line, when you deploy your code, the npm install command will install the node and bower dependencies. The rest of the necessary bower modules are in my github repo, you can copy and paste the dependencies from the bower.json file.

Looks better now, but still not perfect. What is wrong? It’s simple, my templates now have what they need from browser, but still need some files from the admin-lte module. We need to allow the project access to the admin-lte files, adding the following line in the app.js file.

Now that we have a better look and some forms, let’s fix the routes so we can see them. In the users.ts file inside the routes folder.

As a login strategy we’re going to use the passport module. In this first stage we’re only going to make sure is working without problems. Also we’ll use mongodb for storing the login’s data, if you don’t have mongodb installed read the following instructions  Install MongoDB. Now we need to add passport as a dependency in your project and also a middleware for the sessions.

After that, we have to initialize passport inside our app.ts and also the session management.

Now we need to connect our project with the mongodb database. For the different environments configurations (test, dev, prod) I’m going to use a configuration file like the following config.ts.

And in our app.ts file, we initialize the database depending on the environment, and we need the mongoose module  npm install --save mongoose :

Once we have mongoose connected, we’re going to integrate the local login strategy using passport, and specifically we install the node module passport-local  npm install --save passport-local. First thing we need is create a model to store the data of the different login strategies. Also we’re going to cipher the passwords using bcrypt  npm install --save bcrypt-nodejs.

Now we’re going to create a file that will contain all the management of the different login strategies. Create a passport.ts file in the config folder with the following content.

And then we include it in the setup process of our app.ts this way.

Now we have to define the routes of our app. We’re going to use express.Router(). The basic GET routes are: “/”, “/login”, “/signup”, “/logout” and “/profile”. This last one use a helper function that allow us to know if the user is authenticated or not ir order to show the info.

Now if you run your app, you must be able to sign-up, login and see your profile. In the next post I’ll continue adding features to my app.

Referencias: