DEV Community 👩‍💻👨‍💻

Lisa Jung
Lisa Jung

Posted on

Part 2: Build a server using Node.js with Express

Table of Content | Read Next: Part 3 - Create an Elastic Cloud deployment

Let's take the first step in building a full stack app with Elasticsearch!

In this blog, we will be building a server using Node.js with Express.

Resources:

If you are relatively new to Node.js or Express, some of the terms or concepts mentioned in this blog may seem confusing to you.

Check out my blogs if you need some background info on Node.js or Express!

Would you rather watch a video to learn this content? Click on the link below!

Want the code covered in this blog? Click on the link below to access it!

Prerequisite installation:

Build a Node.js server

Step 1: Create an earthquake_app project directory

This project directory will eventually include both the server side and the client side code.

We will focus on the server side code for now!

Open up your terminal emulator. From this point on, I will use the term terminal and terminal emulator interchangeably.

In the location of your choosing, execute the following command in the terminal.

//in terminal
mkdir earthquake_app
Enter fullscreen mode Exit fullscreen mode

Side Note: I keep all my projects in a directory called mini_crash_course. You will see this reflected in the screenshots of the terminal shared in this blog.

Step 2: Change the current working directory to earthquake_app

Execute the following command in the terminal.

//in terminal
cd earthquake_app
Enter fullscreen mode Exit fullscreen mode

Step 3: Open the earthquake_app with the code editor of your choice

I use VS code. I have previously set up a code . command to open up VS Code straight from my terminal.

//in terminal
code .
Enter fullscreen mode Exit fullscreen mode

When you execute steps 1-3 in the terminal, the terminal should look similar to the screenshot below.

Image description

If you do not use VS Code or have not set up a code . command, ignore the code . command.

Open your project directory with your code editor as you normally would.

When you do so, you will see the earthquake_app directory open on your code editor.

image

Step 4: Set up a Node.js development environment

As a prerequisite step, you have installed Node.js.

Let's initialize a new Node.js project so we can start building our server!

Go back to your terminal.

Within the earthquake_app directory, execute the following command.

//in terminal within the earthquake_app directory
npm init -y
Enter fullscreen mode Exit fullscreen mode

This command accepts all default options in the terminal dialogue. It creates a package.json file in the root directory. This file keeps track of our app scripts and manages any dependencies our server needs.

In the terminal, you should see something similar to the following screenshot.

Image description

Go to your code editor to view the earthquake_app directory. You should see a package.json file within it.
Image description

Step 5: Install dependencies

For our server, we need to install the following dependencies.

  • @elastic/elasticsearch
  • axios
  • config
  • cors
  • express
  • log-timestamp
  • nodemon

Copy and paste the following command and execute it in the terminal.

//in terminal within the earthquake_app directory
npm i @elastic/elasticsearch axios config cors express log-timestamp nodemon 
Enter fullscreen mode Exit fullscreen mode

If you have no idea what these dependencies are used for, don't worry! We will go over these when the time comes.

You will see something like this in the terminal.

Image description

After executing this command in the terminal, take a look at your code editor. You will see that package.json and package-lock.json files have been automatically created.

If you look at the package.json file, you will see that it lists all the dependencies we have installed.
Image description

Step 6: Set up a server directory

Using your code editor, create a directory called server within the earthquake_app directory.

Image description

Within the server directory, create a server.js file. This file will be the entry point to the server and handle the server startup, routing, and other functions of our server.

Image description

Let's make sure our package.json knows this.

Open the package.json file then go to line 5.

You will see that "main" is set to "index.js"(line 5).

Image description

Replace "index.js" with "server.js" as shown below.

This will let package.json know that server.js will be the entry point to the server.

Image description

Next, let's specify what command we can use to execute server.js.

Within the package.json file and scroll down to line 6 "scripts". We will add an npm start script here.

Add a comma at the end of line 7 and add the following in line 8.

//in package.json line 8
"start": "nodemon server/server.js" 
Enter fullscreen mode Exit fullscreen mode

Image description

This step will allow us to execute the server.js file in the server directory by executing npm start in the terminal.

What is nodemon in front of server/server.js you ask?

In step 5, we installed a dependency called nodemon. Without this dependency, the server must be manually restarted every time you make changes to your code.

nodemon automatically restarts the server every time we make changes to our code so we don't have to do it ourselves!

We are now able to start the server by using the command npm start in the terminal.

Step 7: Create an Express app

Within the server.js file, copy and paste the following code.

//in server/server.js
const express = require('express');

const app = express();

const port = 3001;

app.listen(port, () => console.log(`Server listening at http://localhost:${port}`));
Enter fullscreen mode Exit fullscreen mode

Let's go over this code snippet!

Heads up!

For reference purposes only, I have included screenshots of code that I will be explaining.

If you need to copy and paste the code, please refer to the code snippet above or the GitHub repo for part 2.

Image description

Line 1
In order to create a server with Express, we need to require the express library to access all the functionalities that come with it.

Line 3
Among these functionalities, express() is used to create an Express app. We set express() equal to a constant app here.

Line 5
We set the constant port to 3001.

Line 7
We instruct the server to listen for HTTP requests on port 3001 and print a message to the console explaining what browser URL you can use to test the server.

Step 8: Start the server

In the terminal, execute the following command to start the server.

//in terminal within the earthquake_app directory
npm start
Enter fullscreen mode Exit fullscreen mode

In the terminal, you will see that your app is executing server.js in the server directory and that the server is listening at http://localhost:3001.

Image description

We now have a server that can be connected to Elastic Cloud!

Move on to Part 3 to create an Elastic Cloud deployment.

Top comments (1)

Collapse
 
webjose profile image
José Pablo Ramírez Vargas

Hello. Here's what I think a better configuration package than config: wj-config.

It works the same way in NodeJS and ReactJS and probably other frameworks, and helps you with any URL building tasks like no other configuration system in existence.

Since you are using CommonJS, here's a direct link to a complete example of how to use wj-config in NodeJS Express CommonJS, although I'd recommend that you re-write your Express to ES Modules. There's even an express generator out there that bootstraps in ES Modules right away. I think it is express-generator-esmodules.

If you would like to know more about wj-config, ping me. I'm the author.

Get a better DEV experience!

Sign in to your DEV account for a more curated experience.

You're welcome to keep lurking, but the signed in experience is more delightful.