Getting Started with Express#

So far, we have only worked on the frontend part of our project. In this module, we will switch gears and create the backend part of the project, which will be an Express.js application.

Express is a Node.js web application framework that handles the common needs of a backend server-side web application. The features that we will be using include backend routing, serving static files and authentication.

Our source code is organized by frontend and backend directories. If you haven't already done so, create the backend directory under the root school-lunch directory.

$ mkdir backend

At this point, the overall project tree should look like this:

$ tree -I 'node_modules'

├── backend

└── frontend

    ├── README.md

    ├── package-lock.json

    ├── package.json

    ├── public

    │   ├── build

    │   │   ├── bundle.css

    │   │   ├── bundle.css.map

    │   │   ├── bundle.js

    │   │   └── bundle.js.map

    │   └── index.html

    ├── rollup.config.js

    └── src

        ├── App.svelte

        ├── main.js

        ├── routes.js

        └── views

            ├── admin

            │   └── LunchMenuAdmin.svelte

            └── public

                ├── Home.svelte

                ├── LunchMenuView.svelte

Next we will use express-generator to scaffold the backend project. Change to the backend directory and run the following:

$ cd backend

$ npx express-generator --no-view

You should see the following output:

npx: installed 10 in 1.233s

   create : public/

   create : public/javascripts/

   create : public/images/

   create : public/stylesheets/

   create : public/stylesheets/style.css

   create : routes/

   create : routes/index.js

   create : routes/users.js

   create : public/index.html

   create : app.js

   create : package.json

   create : bin/

   create : bin/www

   install dependencies:

     $ npm install

   run the app:

     $ DEBUG=temp:* npm start

As you can see, the above command created several directories and files for us to initialize a small Express project.

Have a look at the package.json file that was just created. You will see that there are a few dependencies that we need such as cookie-parser and express. Run npm install to install these additional dependencies:

$ npm install

Adding Prettier and ESLint#

Just like we did on the frontend project, we can configure Prettier and ESlint for the back end and get the same benefits. In the root of the backend project, add a .prettierrc.json file with the following rules. Feel free to customize these rules to your preference.

{

  "tabWidth": 2,

  "semi": false,

  "singleQuote": true,

  "trailingComma": "es5"

}

Likewise, create an .eslintrc.json file with the following config which is needed for a Node project.

{

  "env": {

    "commonjs": true,

    "es2020": true,

    "node": true

  },

  "extends": "eslint:recommended",

  "parserOptions": {

    "ecmaVersion": 11

  },

  "rules": {}

}

Note: Running npx eslint --init is another good way to initialize and configure an eslintrc.json file. This command provides an interactive installer to set the various options.

After this, let's add the ESLint command to the start script in package.json. In package.json add npx eslint ./. You can also add a separate lint script so that you can easily run ESlint directly with an npm run command:

  "scripts": {

    "start": "npx eslint ./ && node ./bin/www",

    "lint": "npx eslint ./"

  },

Give it a try from the command line by running npm run lint:

$ npm run lint

> backend@0.0.0 lint /school-lunch/backend

> npx eslint ./

/school-lunch/backend/routes/index.js

  5:37  error  'next' is defined but never used  no-unused-vars

/school-lunch/backend/routes/users.js

  5:36  error  'next' is defined but never used  no-unused-vars

✖ 2 problems (2 errors, 0 warnings)

Interestingly our ESLint rules have found a no-unused-vars problem with our auto-initialized code. Linting rules are often strict and may seem annoying at times but the end result is better quality code. Let's try to embrace the rules and be thankful for them!

The no-unused-vars rule is simply saying that we have defined a variable or parameter in the code, but not used it. While it wouldn't actually cause a bug, our code will be more readable and maintainable if we fix this issue, which we will do in the next section.