Blog

When running a professional website, one of the major things that you want to do, is making it as fast as possible! Fast loading times lead to more user engagement, satisfied viewers/customers and higher conversion rates. In addition, provided you deliver good content, the faster your page loads, the higher it’s ranked in the Google search results. That obviously leads to more visitors in the first place.

You’ve probably seen this button around the web:

Websites that use this button let you login using your Google Account as an alternative to creating an account on that particular page.

Why use Google Sign-In?

In the ever pacing world of the internet, to get customers to use your website, it needs to be fast. Fast not only in terms of the time it takes to load the page but also regarding user-interactions. Every additional step towards an action your visitors want to complete increases the chance of them just leaving your site. That’s why One-Click-Checkouts are so popular, for example. And Google Sign-In also does just that: removing a step towards logging in.

Even if our HTML-Hello-World is very cool, it does still look a little boring. Time to add some styling!

In our public/ folder we first add subfolder called css/. In there we create a file design.css with the following content:

1
2
3

h1 {
    color: red;
}

We reference this file in our views/index.html as we normally would:

As we’ve already learnt, the basic approach to routing can make our server.js unreadable in bigger projects. In this chapter we’ll get to know a slightly better way to do it (spoiler alert: there’s an EVEN better version, but we’ll get to that later).

To keep our server.js nice and clean, it’s usually better to handle routing in a dedicated place

The so-called ‘Login-System’ that we put up so far isn’t quite… secure, to say the least. The way it is currently implemented, anyone could come by, ’login’ and have an account created. Let’s toughen that up and replace it with some proper authentication mechanisms.

First things first - we need more packages!

So far we’ve only set up a single landing page. In some cases this is sufficient, but usually you might want to have other pages on your website as well. To demonstrate how this works with Node and Express, we will prepare a nice little login form.

For that we need a file views/login.html with the following content:

This is the end of our basic Hello World introduction of how to setup a server with NodeJS. We are now able to use npm to our advantage and learned about the general structure of a NodeJS-Project. We know how to deliver pages using ExpressJS and how routing between pages works. Dealing with sessions in NodeJS is not a problem for us anymore. We also covered how to connect NodeJS to a database using Mongo and Mongoose. Finally we even implemented a login-system with PassportJS.

Controllers allow organizing your site’s routing into smaller, more maintainable chunks. Now we can finally use that controllers/ folder!

What this system does is separating our routes into controllers, each with a specific job. For example, in a webshop you might have one controller for handling requests to articles, another for account-management and yet another for customer-support.

Quick introduction to MongoDB

MongoDB is a so-called NoSQL-Database (in contrast to SQL-Databases like MySQL). Unlike traditional databases these don’t require fixed table relations or a pre-defined schema which makes them more flexible to work with. While NoSQL is not out there to replace SQL there are use cases where they’re better suited for the job. Using MongoDB with NodeJS is great because it works extremely well with JavaScript. Entries in a MongoDB-Database are called ‘documents’ which are JSON-Objects in binary form (called BSON). This makes exchanging data between code and database almost seemless. A document to store a user might look like this: