Adding the Node Backend in MEAN Stack
In our previous section, we learned the ways in which we can connect our application with a node server and covered the theory section. In this section, we will connect our application with a Node backend.
We will build a totally separated backend for now in the following way:
1) We can do this in a new folder for a new project. But we will do it in the same folder so that switching between the files is easier and easier to follow for us.
Node: The node code is not actually related to our angular code.
So, we will put it into a separate folder. We will create a new folder next to our source folder and will give it a name backend. The name is completely up to us, and it can be any name that we want.
2) We will create a single JavaScript file, which will be our server because that is important for nodejs. Unlike PHP, where we need a separate server software like Apache or Nginx, for nodejs, we create the server with nodejs too. It means we write all that on our own. We will create this file in the root folder. By adding this file in the root folder, it will be much easier for us to execute.
Now, this server.js file can be executed with nodejs.
3) Now, we will open a new terminal and execute this server.js file with the node. When we run this, nothing will happen on the console because it is a blank file. So, we will write the following code to test that the server.js file is running or not:
The console statement is a node’s server-side code, so it does not listen to any request. We can execute any JavaScript file with node except those files which will try to access something in the DOM. The reason behind this is the nodejs is a server-side runtime, and there is no DOM.
4) Now, we turn this file into a server. First, we will need to import a package, i.e., http package provided by the nodejs. The syntax of importing packages in nodejs is different from the previous one. In nodejs, we need to create a variable and import the package with the required keyword in the following way:
We cannot find this package in the package.json file because this is a default nodejs package which get installed together with nodejs in our system.
5) Now, we will use the http package to create a new server. The http package has a createServer() method, which takes a request listener as an argument. It is a function that will be executed for every incoming request without worrying about the path which this request targets.
We pass the ES6 arrow function in createServer function. This function will receive two arguments, i.e., request and response object, which will be passed in by nodejs. These objects offer data and utility methods that allow us to work with requests and responses.
In this function, we will do whatever we want with the requests.
6) The response is the most interesting to understand. The response has a couple of methods like emit, getHeader, and getHeaders, etc. The end method is one of the methods which is used to end writing to the response stream. In this function, we can add something which will be sent as text.
7) Now, the server is created, but it is not active yet. We need to store that server in a new constant because we will not change the server value. We will call the listen() function of the server, and in this function, we need to pass a port number. This port during development will be 3000 and set in the following way:
We can use that port or the default port of the hosting provider. We are hosting this because this hosting provider will normally give us that port number in which we want to host our app during production.
So, we will access the environment variable with process.env.PORT or use 3000 if that’s not set. The environment variables are dynamically injected variables, they are always accessed on process.env that’s a nodejs feature. The environment variables can be injected by the runtime in which this apps runs.
Now, if save it and run on the localhost 3000, we will see the browser like this:
It is very difficult to write all the code just with nodejs. To solve this difficulty, we will add the express backend. So, in the next section, we will learn how we can add the express backend.