Getting started with NodeJS and Express - Part 1

As recorded by me in my notes, as I follow a couple of tutorials in an attempt to create a recipe saver app.

Before getting started - what are NodeJS and Express?

NodeJS is an environment to run JavaScript outside of the browser. Vanilla JavaScript and front-end JavaScript frameworks, like React, can only run in the browser. This is an important security measure so that front-end applications, like the front-end of a website you navigate to in the browser, cannot access files directly off your computer, for example.

Express is a NodeJS framework that makes it easier to create servers and routes for your full-stack app. It is pretty much standard now to use Express when creating servers with NodeJS.

And why do we need a backend anyway?

As mentioned earlier, JavaScript cannot directly access data from outside the browser. Therefore, our backend server, built in NodeJS and Express, is needed to access data from external servers (with some exceptions, like APIs without CORS enabled). Vice-versa, if we want to protect some information in our app and prevent others from accessing it via the browser, our backend is a place where we can place this sensitive information.

Step 1: Creating a basic server

1. Create a folder for your new project, and open it in VSCode. Since I am working on a recipe app, I named this folder "recipe-app."

2. Create a folder within the project folder called "backend." This is where all the backend code will go. Change your directory to the backend folder.

3. Check that you have Node installed:

    node -v
   

4. Initialize a new project in the backend folder. To create a package.json file with default settings, copy the below code. The package.json file will store, among other things, the dependencies for your app. For example, Express!

    npm init -y
   

5. Install Express. After running the below code, you will see Express has been added as a dependency to your package.json file. You will also see a node_modules folder added to your backend folder - this contains all the modules Express needs to run. You will also see a package-lock.json file. This contains information on the version of Express (and other dependencies you install later) that this app was created with. This means that, unlike front-end code where compatibility is the developer's responsibility over time, a Node app depends only on what version of NodeJS and the modules you used when you built it.

    npm i express
   

6. Before creating a basic server, setup an environment variable by creating a new file named ".env" in the backend folder. This is where we can store sensitive information and prevent this information from being pushed to Github. For now, just put a value for the port number in the file.

    PORT=4000
   

7. To be able to access the .env variable, install the npm package dotenv. This package loads the environment variables into the process.env object, which is available to us globally in the NodeJS environment. In the VSCode terminal, type:

    npm i dotenv
   

8. At this point, we can create a basic server. Create a file called "server.js" inside the backend folder. Setup the basic server as follows:

    require("dotenv").config()
   
    const express = require("express")
   
    const app = express()
   
    app.listen(process.env.PORT, () => {
        console.log(`server listening on port ${process.env.PORT}`)
    })
   

9. Before we test the server, we will install the package nodemon to be able to monitor our Node app for changes and update the server dynamically, rather than having to stop and restart the server to see the effect of each change. Note that we will install this as a development dependency, since we do not need, or want, to run nodemon in the production app - this is what the -save-dev flag achieves. In the VSCode terminal, type:

    npm i nodemon -save-dev
   

10. One last step before testing the server! Go into package.json and under "scripts," add a "start" and a "dev" command, as written below. These commands will allow us to type less to either start the server or start and monitor the server via nodemon. The finished scripts object should look something like this:

     "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "node server.js",
        "dev": "nodemon server.js"
      },
    

11. Okay! Now in the VSCode terminal, ensuring you're still in the backend folder, type out your dev script, below. You can tell your server is up and running if you see the message "server listening on port 4000" in the console.

    npm run dev
    

Next up: creating basic routes....