FEMALE TECH ENTREPRENEUR

Setup your first EXPRESS.JS BACKEND step by step

Written by Nanna Bach Munkholm

Founder & CTO Roccai

Becoming a Tech Entrepreneur

Wanna build your own website or app? There is something magical about building an application from scratch and to do that you need both a frontend and a backend. In this post I’m going to take you along the journey of building a backend in Express.js.

First of, let us talk about what Express.js is. Express.js is a popular framework that enables you to build server applications in node.js. You can think of it as the link between your frontend and database. So instead of, linking your database directly to your frontend, you build a backend that handle request and sends data back to your backend in the right format. Just to give you an idea, the following is a list of combination of how you can design you client-server architecture stack.

  • Angular.js (Frontend) + Express.js (Backend) + MongoDB (Database)
  • Flutter (Frontend) + Express.js (Backend) + MongoDB (Database)
  • React.js (Frontend) + Expressjs (Backend) + Firebase (Database)

Now that we know what it is used for, it’s time to setup an Express.js Backend. 

Create a new Express.js backend

I like working in VS Code so everything is going to be done using that code editer. If you haven’t already setup your code editer for node.js, you can follow the guide here. Check if you already have installed it by running npm install. 

First step into the world of building your own Express.js backend is to create a new project.

Go to VS Code

  1. In the terminal go to the desired location on your computer where you wanna store your project and write mkdir <project-name>
  2. Change to the new created folder with cd <project-name>
  3. Initialize node.js in your new project by writing npm init
  4. Fill out the questions asked (you can always modify the inputs later)
  5. You will now find a new file in your folder package.json
  6. Install Express.js by running npm install express

You folder will now include a new folder node_modules and package-lock.json including all preinstalled packages and the package.json file that will now look something like this:

Setting up an express.js backend

Run the Express.js server

Now that you have installed that right packages it is time to create a file that can run the Express.js backend. So in your folder create a new file called app.js and write the following.

h

js

const express = require(‘express’)
const app = express()

// http://localhost:3000/

app.listen(3000, () => {
console.log(‘Server is up and listening on port 3000’)
})

If you are not familiar with the JavaScript syntax you can read more about it here.

To run your server and see if it gives you the desired outcome, go to your terminal and write node app.js. Go to a browser and type in http://localhost:3000/ and you should now see “Server is up and listerning on port 3000” in your terminal.  But ass you can see in the browser it returns with “Cannot GET /”. This is because we haven’t specified a router, so /contact go to the contact page and / goes to the main page.  See below how to write the router function. In the function you have req which stands for request and res for respond. This server will therefor respond with “Hello, here is your first Express.js backend” in your browser and “Responding to root route” in your terminal. Remember to restart the server in your terminal. 

h

js

const express = require(‘express’)
const app = express()
app.get(“/”, (req, res) => {
console.log(“Responding to root route”)
res.send(“Hello, here is your first Express.js backend”)
})
//http://localhost:3000/
app.listen(3000, () => {
console.log(‘Server is up and listening on port 3000’)
})

Return data in json format in Express.js

Lets say you have a datebase with users and you want the route /users to respond with the user information in json format. Then you can define a variable user1 and respond that variable in a json format as shown below. 

h

js

const express = require(‘express’)
const app = express()

app.get(“/”, (req, res) => {
console.log(“Responding to root route”)
res.send(“Hello, here is your first Express.js backend”)
})

app.get(“/users”, (req, res) => {
console.log(“Responding to users route”)
var user1 = {firstName: “Nanna”, lastName: “Munkholm”}
var user2 = {firstName: “Sarah”, lastName: “Munkholm”}
res.json([user1, user2])
})

//http://localhost:3000/
app.listen(3000, () => {
console.log(‘Server is up and listening on port 3000’)
})

Optimize your workflow when working with Express.js

To make your life easier when working with your new Express.js backend, you can install the package nodemon. This package automatically restarts your node application when it detects changes in your folder. 

Run the following code in your terminal:

sudo npm install -g nodemon

When it is installed you can use nodemon app.js instead of node app.js.

I hope this helped you get started setting up your Express.js backend. If you have any questions or problems please leave a comment and I will see if I can help. If you haven’t decided on which frontend framework you want to use, then check out my post on how to get started working with Flutter. 

Have a great day and happy coding 👩🏽‍💻

setup an express.js backend

You May Also Like…

An Elegant Puzzle: Systems of Engineering Management – Book review

An Elegant Puzzle: Systems of Engineering Management – Book review

Apr 7, 2024

Gain invaluable insights into engineering management with Will Larson’s comprehensive guide. Learn practical tools and strategies for leading teams effectively, from small groups to scaling up. Discover the wisdom of stacking small wins over chasing silver bullets. An essential read for tech leaders at any level

Building an MVP for your Startup

Building an MVP for your Startup

Mar 28, 2024

Do you have an entrepreneur within you and want to bring it to life? Creating a business plan and building an MVP (Minimal Viable Product) is the place to start.